როგორ დავამატოთ საკონტაქტო ფორმა საიტზე (რომელიც მართლა მოგწერს)

საკონტაქტო ფორმა, რომელიც მუშაობს, არის მოკლე ფორმა (სახელი, ელფოსტა, შეტყობინება), რომელიც იგზავნება სერვერის მარშრუტზე, ის ამოწმებს შეყვანილ მონაცემებს, ინახავს შეტყობინებას მონაცემთა ბაზაში და შემდეგ ელფოსტის პროვაიდერის საშუალებით გიგზავნის შეტყობინებას საიდუმლო API გასაღებით. დაამატე დამალული honeypot ველი და rate limiting, რომ უმეტესი სპამი შეჩერდეს, აჩვენე ნათელი წარმატების შეტყობინება და გამოსცადე სრულად გამოქვეყნებულ საიტზე. მთავარია შენახვა გაგზავნამდე: თუ ელფოსტა ოდესმე ვერ გაიგზავნა, მოთხოვნა მაინც გაქვს.

შენი ვარიანტები

თუ შენს საიტს უკვე აქვს ბექენდი და მონაცემთა ბაზა — რაც AI აპის კონსტრუქტორებით აშენებულ აპებს ხშირად აქვს — ბოლო ვარიანტი ყველაზე საიმედოა და მოთხოვნებს იქ ინახავს, სადაც შენ ხედავ.

რას მოიცავს კარგი საკონტაქტო ფორმა

• რაც შეიძლება ცოტა ველი. სახელი, ელფოსტა, შეტყობინება. დაამატე თემის ჩამოსაშლელი სია („გაყიდვები“, „მხარდაჭერა“, „სხვა“) მხოლოდ იმ შემთხვევაში, თუ მის მიხედვით მიმართავ.
• ნათელი ეტიკეტები თითოეულ ველზე, და არა მხოლოდ placeholder ტექსტი, რომელიც ქრება.
• სასარგებლო ვალიდაცია: „შეიყვანეთ სწორი ელფოსტის მისამართი“, ველის გვერდით.
• წარმატების მდგომარეობა, რომელიც ამბობს, რა მოხდება შემდეგ: „გმადლობთ — ერთი სამუშაო დღის განმავლობაში გიპასუხებთ.“
• კონფიდენციალურობის შენიშვნა, სადაც ნათქვამია, როგორ გამოიყენებ მონაცემებს, და ბმული შენს კონფიდენციალურობის პოლიტიკაზე.
• სარეზერვო გზა, მაგალითად შენი ელფოსტა ან ტელეფონი იმათთვის, ვინც ამას ურჩევნია.

მაგალითი პრომპტები

ძირითადი ფორმა:

დაამატე საკონტაქტო ფორმა საკონტაქტო გვერდზე სახელით, ელფოსტით და შეტყობინებით (ყველა სავალდებულო, შეტყობინება მაქსიმუმ 2,000 სიმბოლო). გაგზავნე სერვერის მარშრუტზე, რომელიც ამოწმებს მონაცემებს, ინახავს contact_messages ცხრილში მიღების დროით და აჩვენებს წარმატების შეტყობინებას: „გმადლობთ, ერთი სამუშაო დღის განმავლობაში გიპასუხებთ.“ ველების შეცდომები აჩვენე პირდაპირ ველთან. დაამუშავე მობილურისთვის.

ელფოსტის შეტყობინებები:

როცა საკონტაქტო შეტყობინება შეინახება, გამომიგზავნე შეტყობინება hello@example.com-ზე Resend-ით, გასაღებით RESEND_API_KEY-ში. დააყენე reply-to გამგზავნის ელფოსტაზე, რომ შემეძლოს პირდაპირ პასუხი. თუ გაგზავნა ვერ მოხერხდება, შეინახე შეტყობინება და ჩაწერე შეცდომა ისე, რომ გასაღები არ გამოჩნდეს.

სპამისგან დაცვა:

დაამატე სპამისგან დაცვა საკონტაქტო ფორმაზე: დამალული honeypot ველი, რომელიც ცარიელი უნდა დარჩეს, სერვერზე ლიმიტი 5 გაგზავნა IP-ზე საათში და უარყავი შეტყობინებები 3-ზე მეტი ბმულით. honeypot-ის გაგზავნები მდუმარედ უგულებელყავი, მაგრამ წარმატება აჩვენე.

შემომავალი:

დაამატე პაროლით დაცული ადმინ გვერდი საკონტაქტო შეტყობინებების სიით, ახლიდან ძველამდე, „დამუშავებულია“ ველით და ფილტრით დაუმუშავებელი შეტყობინებებისთვის.

ნაბიჯ-ნაბიჯ

1. გადაწყვიტე, სად მოდის შეტყობინებები: ვინ იღებს შეტყობინებებს და ვინ პასუხობს.
2. ააშენე ფორმა ზემოთ ჩამოთვლილი ველებით, ხელმისაწვდომი ეტიკეტებით და მობილურისთვის მოსახერხებელი ველებით (გამოიყენე email შეყვანის ტიპი, რომ ტელეფონებმა სწორი კლავიატურა აჩვენონ).
3. შექმენი სერვერის მარშრუტი. ის ამოწმებს სავალდებულო ველებს, ელფოსტის ფორმატსა და სიგრძის ლიმიტებს. ბრაუზერში მხოლოდ ვალიდაციას არასდროს ენდო.
4. ჯერ მონაცემთა ბაზაში შეინახე. იხილე როგორ დავამატოთ მონაცემთა ბაზა შენს აპში.
5. დააყენე ელფოსტის პროვაიდერი. შექმენი ანგარიში, დაადასტურე შენი გამგზავნი დომენი და API გასაღები შეინახე როგორც საიდუმლო. როგორ გავაგზავნოთ ელფოსტა შენი აპიდან დომენის დაყენებას (SPF, DKIM) დეტალურად ხსნის.
6. გაგზავნე შეტყობინება სერვერიდან შენახვის შემდეგ. გამგზავნად გამოიყენე შენი დადასტურებული დომენი, ხოლო reply-to-დ ვიზიტორის ელფოსტა — ნუ გაგზავნი „from“-ად ვიზიტორის მისამართიდან, წინააღმდეგ შემთხვევაში ის სავარაუდოდ უარყოფილი იქნება როგორც გაყალბება.
7. არასავალდებულო ავტომატური პასუხი ვიზიტორს, მაგრამ შეინახე მოკლედ; სპამ მისამართებზე ავტო-პასუხებმა შეიძლება შენი გამგზავნის რეპუტაცია დააზიანოს.
8. დაამატე სპამისგან დაცვა: honeypot, rate limiting, შემდეგ საჭიროებისამებრ CAPTCHA-ს ტიპის შემოწმება.
9. გამოსცადე გამოქვეყნებულ საიტზე: გაგზავნე, შეამოწმე მონაცემთა ბაზა, შეამოწმე შენი შემომავალი და სპამის საქაღალდე, დააჭირე პასუხს.

სპამის შეჩერება

საკონტაქტო ფორმები ბოტებს რამდენიმე დღეში იზიდავს, როგორც კი გაიშვება. დაიცავი ფენებად, ყველაზე ნაკლებად შემაწუხებლიდან ყველაზე მეტამდე:

1. Honeypot ველი. ველი, რომელიც ადამიანს არ უჩანს; ბოტები ავსებენ. ნამდვილ ვიზიტორს არაფერს არ უჯდება.
2. სერვერზე rate limiting. ზღუდავს, რამდენი შეტყობინება შეუძლია ერთ მისამართს გაგზავნოს პერიოდში.
3. შინაარსის წესები. უარყავი შეტყობინებები, სადაც ბმულებია ზედმეტად მრავალი, ან შეტყობინების ველი ცარიელია ან აბსურდულად გრძელი.
4. CAPTCHA-ს ტიპის შემოწმება, მაგალითად Cloudflare Turnstile ან Google reCAPTCHA. ტოკენი სერვერზე უნდა გადამოწმდეს; შემოწმება, რომელიც მხოლოდ ბრაუზერში მუშაობს, შეიძლება გვერდი აივლოს.

ხშირი შეცდომები

• „გაიგზავნა!“ წარმატება, როცა არაფერი გაიგზავნა. UI წარმატებას აჩვენებს სერვერის პასუხამდე ან მის მიუხედავად. ყოველთვის დაელოდე სერვერს.
• მხოლოდ ელფოსტა, მონაცემთა ბაზის გარეშე. ერთი არასწორად დაყენებული გასაღები და მოთხოვნები კვირებით ქრება, და ეს ვერავინ ამჩნევს.
• API გასაღები ფრონტენდ კოდში. ნებისმიერს შეუძლია მისით შენი სახელით ელფოსტა გაგზავნოს.
• დაუდასტურებელი გამგზავნი დომენი. შეტყობინებები სპამში ხვდება ან საერთოდ არ მოდის.
• „from“-ად ვიზიტორის ელფოსტის გაგზავნა. ნაცვლად ამისა გამოიყენე reply-to.
• სიგრძის ლიმიტების გარეშე. ბოტები დიდ ტექსტურ ბლოკებს აგზავნიან.
• ცოცხალი საიტის არასდროს ტესტირება. გასაღებები და დომენები ხშირად განსხვავდება გადახედვასა და წარმოებას შორის.

ჩამონათვალი

• მოკლე ფორმა ხილული ეტიკეტებით და მკაფიო შეცდომებით
• სერვერზე ვალიდაცია და სიგრძის ლიმიტები
• ყოველი შეტყობინება ინახება მონაცემთა ბაზაში
• შეტყობინების ელფოსტა იგზავნება დადასტურებული დომენიდან, reply-to დაყენებულია
• ელფოსტის API გასაღები მხოლოდ სერვერის საიდუმლოებებშია
• honeypot და rate limiting ჩართულია
• წარმატების შეტყობინება ჩნდება მხოლოდ მას შემდეგ, რაც სერვერი დაადასტურებს
• კონფიდენციალურობის შენიშვნა აკავშირებს შენს კონფიდენციალურობის პოლიტიკაზე
• გამოცდილია სრულად გამოქვეყნებულ საიტზე, მათ შორის სპამის საქაღალდეში

საკონტაქტო ფორმები Mythex-ში

Mythex-ში ყველაფერი ჩატიდან შეგიძლია ააშენო. ითხოვე ფორმა და მონაცემთა ბაზა ერთ პრომპტში (ან ჩაწერე /database), რომ მოთხოვნები შენახული იყოს. Mythex-ს ჩაშენებული ელფოსტის გაგზავნის პროდუქტი არ აქვს, ამიტომ შეტყობინებებისთვის იყენებ პროვაიდერს, მაგალითად Resend-ს, SendGrid-ს ან Postmark-ს, მის გასაღებს ამატებ /secrets-ით ან პროექტის პარამეტრებში, და აგენტს სთხოვ, სერვერიდან გააგზავნოს — იხილე ელფოსტის გაგზავნა შენი აპიდან. სანამ ამას დაეყრდნობი, გაუშვი App Testing (/test) ფორმაზე Preview-ში, შემდეგ გამოაქვეყნე და გამოსცადე ცოცხალ URL-ზე.

საკონტაქტო ფორმა მრავალი მცირე ბიზნესის ვებსაიტისა და სადესანტო გვერდის მნიშვნელოვანი ნაწილია. გაშვებამდე შეამოწმე უსაფრთხოების ჩამონათვალი.

კითხვები