چطور یک فرم تماس به وب‌سایت خود اضافه کنیم (که واقعاً به دست شما برسد)

برای افزودن یک فرم تماس که کار می‌کند، یک فرم کوتاه (نام، ایمیل، پیام) بسازید که به یک مسیر سرور ارسال شود، ورودی را اعتبارسنجی کند، پیام را در یک پایگاه داده ذخیره کند، و سپس از طریق یک ارائه‌دهنده‌ی ایمیل با یک کلید API محرمانه برایتان اعلان ایمیل کند. یک فیلد مخفی honeypot و محدودیت نرخ اضافه کنید تا بیشتر اسپم‌ها متوقف شوند، یک پیام موفقیت واضح نشان دهید، و آن را از ابتدا تا انتها روی سایت منتشرشده تست کنید. نکته‌ی مهم ذخیره‌ی پیام قبل از ارسال ایمیل است: اگر ایمیل هرگز شکست بخورد، درخواست هنوز در دست شماست.

گزینه‌های شما

اگر سایت شما از قبل بک‌اند و پایگاه داده دارد — که اپ‌هایی که با ساز اپ‌های هوش مصنوعی ساخته می‌شوند اغلب دارند — آخرین گزینه مطمئن‌ترین است و درخواست‌ها را جایی نگه می‌دارد که خودتان می‌بینید.

یک فرم تماس خوب چه چیزهایی دارد

• حداقل فیلد ممکن. نام، ایمیل، پیام. یک منوی کشویی موضوع ("فروش"، "پشتیبانی"، "سایر") فقط اگر بر اساس آن مسیریابی می‌کنید.
• برچسب‌های واضح بالای هر فیلد، نه فقط متن placeholder که با تایپ کردن ناپدید می‌شود.
• اعتبارسنجی مفید: "یک ایمیل معتبر وارد کنید"، کنار همان فیلد نشان داده شود.
• وضعیت موفقیت که بگوید بعد چه می‌شود: "ممنون — ظرف یک روز کاری پاسخ می‌دهیم."
• یادداشت حریم خصوصی که توضیح دهد اطلاعات را چگونه استفاده می‌کنید، با لینک به سیاست حریم خصوصی شما.
• جایگزین مثل نشانی ایمیل یا شماره تلفن شما برای کسانی که آن را ترجیح می‌دهند.

نمونه پرامپت‌ها

فرم پایه:

روی صفحه‌ی تماس یک فرم تماس با نام، ایمیل و پیام (همه الزامی، پیام تا ۲٬۰۰۰ کاراکتر) اضافه کن. فرم را به یک مسیر سرور بفرست که ورودی را اعتبارسنجی کند، آن را با زمان دریافت در جدول contact_messages ذخیره کند، و این پیام را نشان دهد: "ممنون، ظرف یک روز کاری پاسخ می‌دهیم." خطاهای هر فیلد را همان‌جا نشان بده. روی گوشی هم خوب کار کند.

اعلان ایمیلی:

وقتی یک پیام تماس ذخیره شد، با Resend و کلیدی که در RESEND_API_KEY است، یک ایمیل اعلان به hello@example.com برایم بفرست. Reply-to را روی ایمیل فرستنده بگذار تا بتوانم مستقیم پاسخ دهم. اگر ارسال شکست خورد، پیام ذخیره‌شده را نگه دار و خطا را بدون افشای کلید ثبت کن.

محافظت در برابر اسپم:

محافظت در برابر اسپم به فرم تماس اضافه کن: یک فیلد honeypot مخفی که باید خالی بماند، محدودیت ۵ ارسال در هر IP در ساعت در سرور، و رد پیام‌هایی با بیش از ۳ لینک. ارسال‌های honeypot را بی‌صدا حذف کن ولی باز هم پیام موفقیت نشان بده.

صندوق ورودی:

یک صفحه‌ی مدیریتی محافظت‌شده با رمز اضافه کن که پیام‌های تماس را از جدیدترین به قدیمی‌ترین فهرست کند، با یک چک‌باکس "رسیدگی‌شده" و فیلتری برای پیام‌های رسیدگی‌نشده.

گام به گام

1. تصمیم بگیرید پیام‌ها کجا بروند: چه کسی اعلان‌ها را دریافت می‌کند و چه کسی پاسخ می‌دهد.
2. فرم را با فیلدهای بالا بسازید، با برچسب‌های قابل‌دسترس و ورودی‌های مناسب موبایل (از نوع input ایمیل استفاده کنید تا گوشی‌ها کیبورد درست را نشان دهند).
3. مسیر سرور را بسازید. فیلدهای الزامی، قالب ایمیل و محدودیت طول را بررسی می‌کند. هرگز به اعتبارسنجی فقط در مرورگر اعتماد نکنید.
4. اول در پایگاه داده ذخیره کنید. ببینید چطور پایگاه داده به اپ اضافه کنیم.
5. یک ارائه‌دهنده‌ی ایمیل راه‌اندازی کنید. حساب بسازید، دامنه‌ی ارسال را تأیید کنید، و کلید API را به‌عنوان راز ذخیره کنید. چطور از اپ خود ایمیل بفرستیم تنظیم دامنه (SPF، DKIM) را با جزئیات توضیح می‌دهد.
6. اعلان را از سرور بفرستید بعد از ذخیره. دامنه‌ی تأییدشده‌ی خودتان را به‌عنوان فرستنده و ایمیل بازدیدکننده را به‌عنوان reply-to استفاده کنید — از ایمیل بازدیدکننده به‌عنوان "from" استفاده نکنید، وگرنه به احتمال زیاد به‌عنوان جعل رد می‌شود.
7. اختیاری: پاسخ خودکار به بازدیدکننده بدهید، اما کوتاه نگهش دارید؛ پاسخ خودکار به نشانی‌های اسپم می‌تواند اعتبار فرستنده‌ی شما را لطمه بزند.
8. محافظت در برابر اسپم را اضافه کنید: honeypot، محدودیت نرخ، و در صورت نیاز یک بررسی شبیه CAPTCHA.
9. روی سایت منتشرشده تست کنید: ارسال کنید، پایگاه داده را بررسی کنید، صندوق ورودی و پوشه‌ی اسپم را ببینید، و روی پاسخ کلیک کنید.

جلوگیری از اسپم

فرم‌های تماس ظرف چند روز بعد از راه‌اندازی ربات‌ها را جذب می‌کنند. دفاع‌ها را از کم‌مزاحم‌ترین تا مزاحم‌ترین لایه‌بندی کنید:

1. فیلد honeypot. فیلدی که از انسان پنهان است؛ ربات‌ها آن را پر می‌کنند. برای بازدیدکنندگان واقعی هزینه‌ای ندارد.
2. محدودیت نرخ در سرور. تعداد پیام‌هایی را که یک نشانی می‌تواند در یک بازه بفرستد محدود می‌کند.
3. قوانین محتوا. پیام‌هایی را که پر از لینک هستند، یا فیلد پیام خالی یا به‌طور مضحکی طولانی دارند رد کنید.
4. یک بررسی شبیه CAPTCHA، مثل Cloudflare Turnstile یا Google reCAPTCHA. توکن باید در سرور شما تأیید شود؛ بررسی‌ای که فقط در مرورگر اجرا می‌شود قابل دور زدن است.

اشتباهات رایج

• نشان دادن "ارسال شد!" وقتی هیچ چیز فرستاده نشده. رابط کاربری قبل از پاسخ سرور یا بدون توجه به آن موفقیت را اعلام می‌کند. همیشه منتظر سرور بمانید.
• فقط ایمیل، بدون پایگاه داده. یک کلید اشتباه و درخواست‌ها برای هفته‌ها بدون اینکه کسی متوجه شود ناپدید می‌شوند.
• کلید API در کد فرانت‌اند. هرکسی می‌تواند با آن به‌نام شما ایمیل بفرستد.
• دامنه‌ی ارسال تأییدنشده. اعلان‌ها به اسپم می‌روند یا اصلاً نمی‌رسند.
• ارسال "from" با ایمیل بازدیدکننده. به‌جایش از reply-to استفاده کنید.
• نبود محدودیت طول. ربات‌ها بلوک‌های عظیمی از متن جای‌گذاری می‌کنند.
• هرگز تست نکردن سایت زنده. کلیدها و دامنه‌ها اغلب بین پیش‌نمایش و تولید فرق دارند.

چک‌لیست

• فرم کوتاه با برچسب‌های قابل‌مشاهده و خطاهای واضح
• اعتبارسنجی سمت سرور و محدودیت طول
• هر پیام در پایگاه داده ذخیره می‌شود
• ایمیل اعلان از یک دامنه‌ی تأییدشده با reply-to تنظیم‌شده ارسال می‌شود
• کلید API ایمیل فقط در راز‌های سمت سرور ذخیره شده
• honeypot و محدودیت نرخ فعال است
• پیام موفقیت فقط بعد از تأیید سرور ظاهر می‌شود
• یادداشت حریم خصوصی به سیاست حریم خصوصی لینک دارد
• از ابتدا تا انتها روی سایت منتشرشده تست شده، از جمله پوشه‌ی اسپم

فرم‌های تماس در Mythex

در Mythex می‌توانید کل این کار را از داخل چت بسازید. فرم و پایگاه داده را در همان پرامپت بخواهید (یا /database را تایپ کنید) تا ارسال‌ها ماندگار شوند. Mythex محصول ارسال ایمیل داخلی ندارد، پس برای اعلان‌ها یک ارائه‌دهنده مثل Resend، SendGrid یا Postmark بیاورید، کلیدش را با /secrets یا تنظیمات پروژه اضافه کنید، و از عامل بخواهید از سمت سرور بفرستد — ببینید ارسال ایمیل از اپ شما. قبل از اتکا به آن، App Testing (/test) را روی فرم در Preview اجرا کنید، سپس منتشر کنید و روی نشانی زنده تست کنید.

فرم تماس بخش کلیدی بیشتر وب‌سایت‌های کسب‌وکار کوچک و صفحات فرود است. قبل از راه‌اندازی چک‌لیست امنیت را بررسی کنید.

پرسش‌ها