כך טופס שנבנה עם AI באמת ישלח את הנתונים

למה הטופס המיוצר לא שולח לשום מקום

Lovable, Bolt, v0 ו-Cursor מייצרים ממשקים יפים: שדות, אימות, כפתור והודעת «תודה!». אבל כברירת מחדל הכפתור לרוב לא עושה כלום שימושי — הטיפול מציג תודה מיד, בלי שום בקשת רשת, והנתונים לא נשמרים בשום מקום.

הדפוס השני: הכלי מחבר בעצמו Supabase או Lovable Cloud. זה עובד, אבל עבור טופס קשר פשוט זה גורר מסד נתונים, הגדרות הרשאות ולרוב שירות מייל נפרד כמו Resend.

אפשר לבדוק את המצב בדקה: פתחו כלי מפתחים, בחרו את לשונית Network ושלחו את הטופס. אם אין בקשת POST, הטופס הוא קישוט — וזה מה שקורה ברוב האתרים המיוצרים.

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

1. התשתית של כלי הבנייה. Lovable Cloud או Supabase בתוספת חיבור מייל. הגיוני כשהאפליקציה כבר משתמשת בהם לאימות או לנתונים אחרים, אבל זו תשתית עודפת לטופס קשר מבודד.

2. שירות טפסים מתארח. הטופס שולח POST לכתובת אחת עם מפתח ציבורי, והשירות שומר את הפניות ומתריע במייל ובטלגרם. המסלול המהיר ביותר לעמודי נחיתה ואתרי תדמית: בלי סכמות, פונקציות edge או שרתים.

3. פונקציית serverless משלכם. שליטה מלאה ואחריות מלאה: קוד, סודות, סינון ספאם וניסיונות חוזרים למסירה עליכם. מוצדק כשהטופס כבר חלק מלוגיקה מורכבת יותר.

המאמר עוסק במסלול השני, והוא עובד אותו דבר בכל כלי שמייצר HTML או React.

הקריטריונים לבחירת שירות קבלה

הוכחת מסירה. «תודה» על המסך לא מוכיח כלום. צריך מאגר פניות עם סטטוסים: התקבל, נמסר, ספאם. ב-Formgong זו תיבה עם פרטי מסירה לכל ערוץ.

הגנה מספאם. מלכודת נסתרת לכל הפחות; עדיף שיש גם Turnstile אופציונלי והערכת ספאם, ושהספאם לא יאכל את המכסה החודשית.

ערוצי התראה. מייל כבסיס, טלגרם לתגובה מהירה של הצוות, ו-webhooks חתומים לאינטגרציות.

מיקום הנתונים. אם הלקוחות באירופה, בדקו איפה הפניות נשמרות בפועל. Formgong שומר הכל ב-Cloudflare בתחום שיפוט אירופי: D1, התור והקבצים.

שינויים בלי לבנות מחדש. נמענים, הפניות ותשובה אוטומטית משתנים בלוח הבקרה — לא בקוד שה-AI צריך לייצר מחדש.

הנחיה אחת שעובדת בכל כלי

פתחו את הצ'אט של הפרויקט בכלי ובקשו לחבר את הטופס הקיים תוך שמירה על העיצוב ועל שמות השדות. ההנחיה שמתאימה ל-Lovable, Bolt, v0 ו-Cursor מוצגת מתחת לפסקה זו; החליפו את fk_your_access_key במפתח מלוח הבקרה של Formgong, באזור חיבור האתר של הטופס.

Connect this form to Formgong. Keep its design and field names.
1. Send a POST request to https://formgong.com/submit (FormData or JSON with access_key).
2. access_key: fk_your_access_key (a public key; it can stay in the code).
3. Show success only after a response with success: true.
4. On error, keep the entered field values and show an error message.
5. Add a hidden botcheck field (honeypot) with no visible UI change.
6. Do not add tokens, secrets, or file inputs.

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Could not send. Please try again.");
  return result.message; // localized "Sent. Thank you!"
}

בדקו מסירה, לא את הודעת ההצלחה

אחרי שהכלי מחיל את השינויים, שלחו פניית בדיקה מזוהה ועברו על כל המסלול:

1. הבקשה. בלשונית Network מופיעה בקשת POST אל https://formgong.com/submit עם success: true בתשובה.
2. הרשומה. הפנייה מופיעה בתיבה של הטופס ב-Formgong, עם כל השדות.
3. המייל. ב-Free המייל מגיע בסיכום של הבוקר שלמחרת בשעה 08:00, באזור הזמן של בעל החשבון, לנמען אחד. ב-Pro וב-Business כל פנייה נשלחת במייל. בדקו גם דואר זבל.
4. טלגרם. טלגרם מיידי בכל התוכניות, כולל Free. אם יש צ'אט מחובר, ההודעה מגיעה אליו.

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

אחרי ההשקה: שינויים בלי לייצר מחדש

כשהטופס עובד, רוב השינויים לא דורשים חזרה לכלי הבנייה: נמענים, צ'אטים בטלגרם, הפניות אחרי שליחה, תשובה אוטומטית למבקר והגנות — הכל משתנה בלוח Formgong.

אם פניות מפסיקות להגיע אחרי עיצוב מחדש, אל תנחשו: אבחון הטפסים של Formgong טוען את העמוד ומראה אם הקוד מותקן נכון — כתובת, שיטה, מפתח ושדות נדרשים.

אנליטיקת הטפסים מראה באילו שדות מבקרים נוטשים. זה זול מניסוי A/B ולא דורש קוד חדש.

טעויות נפוצות בטפסים שמייצר AI

מופיעה «הצלחה» אבל אין בקשה

הכלי יצר טיפול קישוטי. בקשו ממנו: «שלח את הנתונים עם fetch והצג הצלחה רק אחרי תשובה success: true».

הקוד עדיין מכיל fk_your_access_key

זה מציין מקום. קחו את המפתח האמיתי מאזור חיבור האתר של הטופס והחליפו אותו.

השדות נמחקים אחרי שגיאה

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

הטופס נשבר אחרי הפעלת Turnstile

צריך להוסיף את הרכיב לקוד ולשלוח cf-turnstile-response. רעננו את דוגמת החיבור בלוח אחרי שינוי הגנה.

יש רשומה אבל אין מייל

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