טופס יצירת קשר ל-Vercel

Formgong team ·

טופס יצירת קשר ל-Vercel לא צריך פונקציה בלי שרת ולא מפתח SMTP. ל-Vercel אין מוצר טפסים מובנה. השתמשו בטופס ה-HTML למטה לאתר סטטי, או באותה נקודת קצה מדף Next.js. זה טופס דואר של Vercel: Formgong שולח את הדואר. אין צורך בפונקציית שרת.

Vercel
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="he">
  <label>שם <input type="text" name="name" autocomplete="name" placeholder="השם שלך" required></label>
  <label>אימייל <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label>
  <label>הודעה <textarea name="message" placeholder="איך נוכל לעזור?" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>השאירו שדה זה ריק<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  
  <button type="submit">שליחה</button>
</form>

איך טפסים עובדים ב-Vercel

Vercel מארח קבצים סטטיים ו-Next.js. אין שם תיבת טפסים. התוספת הרגילה היא Route Handler או Server Action שקוראים ל-API של דואר. זה קוד שרת, סוד, ופונקציה שמשלמים עליה כשהיא רצה.

ייצוא סטטי מקשה על המסלול הזה. Next.js מתעד ש-output: 'export' לא תומך ב-Server Actions, ו-Route Handlers במצב הזה לא יכולים לקרוא את הבקשה. POST מהדפדפן לא צריך אף אחד מהם.

הגדרה ב-Vercel

  1. צרו טופס ב-Formgong והעתיקו את מפתח הגישה.
  2. לאתר סטטי הדביקו את טופס ה-HTML בדף ש-Vercel מגיש. הגדירו access_key, _lang ו-botcheck, ושלחו אל https://formgong.com/submit.
  3. ב-Next.js אל תוסיפו app/api/contact/route.ts ואל תקראו ל-API של SMTP. רכיב לקוח יכול לקרוא ל-fetch על אותו URL. ראו את מדריך Next.js לרכיב.
  4. פרסמו עם Vercel. השליחות לא מריצות Vercel Function, ולכן הן לא נספרות במכסת הפונקציות. שלחו ניסיון בדומיין הייצור.
  5. הדואר החינמי של Formgong הוא סיכום יומי. דואר לכל הודעה מתחיל ב-Pro. Telegram עובד בכל התוכניות, כולל Free.

Formgong או פונקציית Vercel?

כתבו Route Handler כשהשליחה צריכה לעדכן את המסד או לבדוק משתמש מחובר.

השתמשו ב-Formgong לטופס קשר באתר סטטי או ב-Next.js. אתם מדלגים על SMTP ועדיין יכולים להשתמש ב-output: 'export'.

שאלות ותשובות

האם ל-Vercel יש טופס יצירת קשר?

לא. המדריך של Vercel לעבודה הזו משתמש בשירות טפסים. אין לשונית Forms בפרויקט.

אפשר לשלוח טופס דואר של Vercel בלי Resend?

כן. שלחו אל Formgong מהדף. Formgong שולח את הדואר. אתם לא שמים מפתח SMTP בפרויקט Vercel.

האם זה עובד עם ייצוא סטטי?

כן. הדפדפן שולח את הטופס. Server Actions לא נתמכות כש-output: 'export' מוגדר, וזה לא משנה כאן.

האם המבקר יכול להישאר בדף?

כן. קראו ל-fetch עם Accept: application/json והציגו את ההודעה מה-JSON. טופס ה-HTML הוא המסלול בלי JavaScript.

התחילו חינם