טופס קשר באתר HTML סטטי, בלי שרת משלכם

אתר סטטי עדיין צריך שירות קבלה

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

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

לפני שמדביקים את הקוד

צרו טופס ב-Formgong, אמתו את המייל והעתיקו את המפתח מחיבור האתר. החליפו fk_your_access_key. הוא ציבורי ויכול להיות ב-HTML; בלי אימות מייל ההתראות עשויות להמתין.

הוסיפו את הדוגמה לעמוד

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

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

המאפיינים שקובעים את השליחה

action קובע יעד, method="POST" שיטת שליחה ו-name שם לכל ערך. id בלבד אינו מספיק. אפשר להוסיף טלפון עם name="phone".

botcheck הוא מלכודת לבוטים. השאירו אותו מחוץ למסך וריק. מילוי שלו עלול לסווג את ההודעה כספאם בלי לשלוח התראה.

בחרו את העמוד שאחרי השליחה

ברירת המחדל פותחת עמוד תוצאה של Formgong. לעמוד תודה משלכם, הגדירו כתובת HTTPS מלאה. אפשר גם _redirect; אם הלוח מתעלם מכתובות שבקוד, ההגדרה בלוח קודמת.

להישאר באותו עמוד דורש fetch וניהול מצבים. יש דוגמה ב-מדריך האבחון.

שלחו בדיקה מהדומיין האמיתי

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

התאימו את הקוד להגנות

Turnstile דורש רכיב וטוקן cf-turnstile-response; מלכודת הבוטים בדוגמה אינה תחליף. קחו קוד עדכני מהלוח. ברשימת דומיינים מורשים כללו את הדומיין שפורסם, שכן תצוגה מקדימה עשויה להשתמש באחר.