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

Formgong team ·

טופס יצירת קשר ל-Gatsby יכול לשלוח מהדפדפן אל Formgong. Gatsby מוציא קבצים סטטיים, ולכן אין שרת שמקבל את ה-POST. אין צורך בפונקציית Gatsby או בסוד דואר. הדביקו את הטופס, החליפו את המפתח, והפניות מגיעות בדואר וב-Telegram. האתר נשאר סטטי. אין צורך בשרת.

Gatsby
<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>

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

Gatsby הופך דפי React ל-HTML סטטי. המדריך לטופס מציע שירות טפסים, Netlify Forms או שרת שלכם. Gatsby Functions הוא המסלול המתועד בשרת. זו פונקציה שאתם מפרסמים ומתחזקים.

קובץ בתוך src/pages יכול להחזיק טופס HTML. הוא נשלח אל https://formgong.com/submit עם access_key, _lang ו-botcheck. לדפדפן מגיעים רק שמות שמתחילים ב-GATSBY_. המפתח הזה ציבורי, ולכן הקידומת מתאימה.

הגדרה ב-Gatsby

  1. צרו טופס ב-Formgong והעתיקו את המפתח. הוא מתחיל ב-fk_.
  2. הוסיפו src/pages/contact.js והדביקו את הטופס. הפעולה היא https://formgong.com/submit.
  3. החליפו את fk_your_access_key. שם כמו GATSBY_FORMGONG_KEY הוא רשות. אל תשימו סיסמת SMTP בשם GATSBY_.
  4. הריצו gatsby develop ושלחו ניסיון. אחר כך gatsby build. ה-POST רץ בדפדפן, ולכן הבנייה החיה מתנהגת אותו דבר.
  5. אם האתר על Netlify, אל תוסיפו data-netlify. טופס React בלבד לא נראה בסריקת HTML אלא אם מפרסמים גם עותק נסתר עם form-name.

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

השתמשו ב-Gatsby Function כשהשליחה צריכה לשנות את מסד הנתונים או לקרוא ל-API פרטי.

השתמשו ב-Formgong לטפסי קשר. אתם מדלגים על SMTP, על פונקציה לארח ועל ה-HTML הנסתר ש-Netlify דורשת מ-React.

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

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

לא. המדריך הרשמי מציין שירות טפסים, Netlify Forms אם אתם מארחים שם, או שרת שלכם. הדף נשאר סטטי.

למה Netlify מפספסת את טופס Gatsby?

Netlify קוראת את ה-HTML אחרי הבנייה. טופס שמופיע רק אחרי ש-React רץ מתפספס. שלחו אל Formgong או הוסיפו עותק סטטי נסתר.

אפשר להשתמש ב-fetch ולהישאר בדף?

כן. קראו ל-fetch על https://formgong.com/submit ושלחו Accept: application/json. טופס ה-HTML עובד גם כש-JavaScript כבוי.

האם המפתח בטוח בחבילת Gatsby?

כן. הוא מקבל רק שליחות של הטופס שלכם. ב-Pro אפשר להגביל דומיינים. אל תשימו מפתחות פרטיים בשם GATSBY_.

התחילו חינם