טופס יצירת קשר שמגיע למייל: איך בונים, איך שולחים, ואיך עוצרים ספאם

שלושה רכיבים טכניים קובעים אם פנייה מטופס יצירת קשר באתר תנחת בתיבה שלכם: תגיות ה-HTML שרצות בדפדפן, שרת שמקבל את הבקשה ומאמת אותה, וספק תשתית דואר שמוציא אותה החוצה. אם אחד מהם נופל, הגולש ילחץ על הכפתור, יחשוב שהכול עבר בהצלחה, אבל שום הודעה לא תגיע לעסק. כדי להרים טופס יעיל נדרשים בסך הכול שלושה שדות: שם מלא, כתובת מייל ותוכן הפנייה. כל שדה נוסף שתדחפו פנימה רק יקטין את יחס ההמרה ויגרום לגולשים לנטוש באמצע.

הרבה אתרים פשוט מאבדים לקוחות בגלל ניתוב שבור.

בניית שלד הטופס בעמוד

כל טופס מתחיל בתגית form ונסגר בה. התגית הזו מחזיקה שני מאפיינים: action שמגדיר את כתובת היעד בשרת שאליה נשלחים הנתונים, ו-method שקובע באיזו שיטת HTTP להשתמש, כאשר ברירת המחדל היא כמעט תמיד post. בתוך התגית מניחים את שדות הקלט. שדה טקסט קצר עבור השם מוגדר בתור input עם הערך text, שהוא ברירת המחדל למאפיין. תיבת קלט גדולה עבור גוף ההודעה נבנית באמצעות textarea, שאינה נחשבת לתגית ריקה ומחייבת תגית סגירה מתאימה כדי להכיל תוכן ראשוני.

עבור כתובת המייל משתמשים בתגית input עם הערך email. ההגדרה הזו מפעילה בדיקת תקינות מובנית בדפדפן, שלא תאפשר מסירה ללא כתובת עם מבנה חוקי, וגם מעלה מקלדת ייעודית עם סימן כרוכית בסמארטפונים. לכל שדה קלט מצמידים תגית label ייעודית עם מאפיין for שערכו זהה למזהה ה-id של השדה. החיבור הזה מבטיח שלחיצה על התווית תפעיל מיד את שדה הקלט ותאפשר לקוראי מסך לתאר אותו כראוי לגולשים עם מוגבלויות ראייה.

לסיום מוסיפים כפתור שליחה באמצעות תגית button עם הערך submit, שמפעיל את המסירה. התגית הזו תומכת גם בערכים reset שמנקה את השדות ו-button שלא עושה דבר כברירת מחדל, אך שימוש בכפתור reset נחשב לנוהג גרוע בחוויית משתמש ומסכן את המידע שהוקלד. כדאי לכם להימנע מכפתורי איפוס לחלוטין כדי למנוע מחיקה בשוגג.

זה כל קוד המבנה.

העברת המידע בצד השרת

דפדפנים אינם שולחים מיילים ישירות מהקוד. דפדפן הוא לקוח Frontend, וכדי להוציא דואר הוא שולח את הנתונים בפורמט טקסט מובנה כמו JSON אל שרת Backend. השרת מקבל את הבקשה, מאמת את הנתונים שהתקבלו, ופונה בחיבור REST API אל ספק תשתית דואר ייעודי. לא הייתי מנסה לשלוח מיילים ישירות משרת אחסון משותף, מפני שכתובות ה-IP שלו סובלות בדרך כלל ממוניטין גרוע שמפיל הודעות לתיקיית הזבל.

ספק דואר כמו Resend מטפל בשילוח ישירות דרך REST API או חיבור SMTP relay, עם תמיכה מלאה באימות תקני כמו SPF, DKIM ו-DMARC. החבילה החינמית של Resend מציעה 3,000 הודעות בחודש, מוגבלת לתקרה של 100 הודעות ביום, ומאפשרת לחבר עד 3 דומיינים שונים עם שמירת נתונים למשך 30 יום. טופס יצירת קשר באתר שלא מתחבר לשירות תשתית דואר ייעודי דרך שרת פשוט יזרוק את ההודעות שלכם לפח האשפה.

חבילת Pro מתחילה מ-20 דולר לחודש וכוללת 50,000 הודעות בחודש עבור 10 דומיינים ללא הגבלה יומית. חבילת Scale עולה 90 דולר לחודש עבור 100,000 הודעות ו-1,000 דומיינים, ומי ששולח מעל 3,000 הודעות ביום יכול להוסיף כתובת IP ייעודית בתוספת של 30 דולר לחודש. תוספת של 100 דומיינים עולה 20 דולר לחודש, וחיבור Single Sign-On במסלול Scale עולה 150 דולר לחודש. מעבר למכסה הקבועה בחבילות בתשלום, כל תוספת של 1,000 הודעות מתומחרת ב-0.90 דולר. מסלול Enterprise דורש יצירת קשר עם החברה ומחירו אינו מפורסם. לרוב העסקים הקטנים חבילת ה-Pro היא הבחירה המדויקת ביותר, כי היא מסירה את תקרת 100 ההודעות היומית במחיר שווה לכל נפש.

עצירת ספאם בלי פאזלים

ברגע שטופס עולה לרשת, בוטים מתחילים לסרוק את העמוד, למלא שדות באופן אוטומטי ולהציף את תיבת הדואר בזבל. בעבר נהגו להציג לגולשים תמונות מעוותות של מדרכות או שלטי דרכים, אך מנגנונים כאלה מתסכלים משתמשים ומורידים את אחוזי הפניות. כלי כמו Cloudflare Turnstile פותר את הבעיה באמצעות בדיקות רקע שקטות בדפדפן, ללא חידות תמונה וללא איסוף נתונים לצורכי פרסום ממוקד.

ההגנה מוטמעת בעמוד כקטע קוד קצר וחינמי שנשען על רשת שרתים עולמית הפרוסה ביותר מ-330 ערים ומעבירה 20 אחוז מתעבורת האינטרנט. לאחר הבדיקה בדפדפן מופק אישור דיגיטלי, והשרת שלכם חייב לאמת את האישור מול שרתי Cloudflare לפני שהוא קורא ל-API של ספק הדואר. אם האימות נכשל או חסר, השרת פשוט זורק את הבקשה ואינו שולח דבר.

בלי אימות כזה, התיבה תיסתם.

בדיקת התהליך מקצה לקצה

כאשר הודעה נעלמת בדרך, לא מנחשים מה קרה אלא בודקים כל תחנה בנפרד. תחילה מזינים ערך חסר או שגוי בשדה המייל באתר ובודקים אם הדפדפן עוצר את השליחה ומציג התראה מקומית. לאחר מכן פותחים את כלי המפתחים בדפדפן בלשונית הרשת, שולחים פנייה תקינה ובודקים שהבקשה לשרת מחזירה תשובת הצלחה. לבסוף נכנסים ללוח הבקרה של Resend ומוודאים ביומן הרישום שהפנייה הגיעה מהשרת, עובדה ונמסרה בהצלחה לתיבת הדואר שלכם.

מקורות

• developer.mozilla.orghttps://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Your_first_form
• resend.comhttps://resend.com/pricing
• cloudflare.comhttps://www.cloudflare.com/application-services/products/turnstile/

המדריך נכתב מהמקורות שלמעלה בתאריך הפרסום. מחירים ותנאים משתנים; לפני החלטה כספית בודקים מול המקור. מצאתם טעות? כתבו.