טופס יצירת קשר ב-HTML
טופס יצירת קשר ב-HTML פשוט. הדפדפן שולח אותו. בלי בקאנד, בלי framework ובלי גופן.
מה אתם מעתיקים
תבנית זו היא טופס יצירת קשר ב-HTML פשוט. הדפדפן שולח אותו ב-POST רגיל. אין כאן קריאת fetch, אין framework ואין שלב בנייה.
הדביקו את הסימון בעמוד סטטי, בהטמעה של Webflow, או בכל מקום שמקבל רכיב טופס. לעמוד אין צורך בשרת משלו.
הטופס מבקש שם, כתובת דוא״ל והודעה. הטלפון אופציונלי. המילים האלה הן גם שמות השדות.
Telegram מדפיס כל שם שדה בהדגשה מעל התשובה. שמות קצרים כמו name, email ו-message נשארים קריאים בטלפון.
אין כאן איסוף של קובץ, של תשלום או של דירוג של Formgong. זו רק דרך שבה מבקר יכול להגיע אליכם.
איך השליחה עובדת
ה-action של הטופס הוא המקור של Formgong בתוספת /submit, והשיטה היא POST. שדה נסתר access_key נותן לטופס את שמו.
המפתח ציבורי והמקום שלו הוא העמוד. הוא מאפשר למבקר לשלוח פנייה. אי אפשר לשנות באמצעותו נמענים או להפעיל webhook.
שדה נסתר _lang נושא את שפת העמוד, למשל en. Formgong משתמש בו לעמוד התודה ולטקסט השגיאה.
הוא אינו מתרגם את הודעת המבקר. כתבו את התוויות הגלויות בשפת העמוד, והשאירו את שמות השדות באנגלית.
המלכודת היא שדה קלט בשם botcheck. הוא מחוץ למסך, עם tabindex -1 ועם autocomplete כבוי. אנשים משאירים אותו ריק.
פנייה שממלאת את botcheck נשמרת כספאם ואינה נמסרת. המבקר עדיין רואה מסלול הצלחה רגיל.
Turnstile אופציונלי. המקטע משאיר את הווידג׳ט בתוך הערה. אין מפתח אתר בתבנית זו.
אם אתם מפעילים את Turnstile לטופס, הסירו את סימני ההערה והדביקו את מפתח האתר שלכם. עד אז השורות לא עושות דבר.
בלי שדה נסתר _redirect Formgong מציג את עמוד התודה שלו. המקטע הנוסף קובע את _redirect לכתובת https.
החליפו את https://example.com/thanks בעמוד שאתם שולטים בו. נתיב יחסי אינו מתקבל.
אחרי ההדבקה
צרו טופס בלוח, או השתמשו בכפתור בעמוד זה, והחליפו את fk_your_access_key אם העתקתם את מציין המקום.
חברו את Telegram בהגדרות הטופס כשאתם רוצים את ההודעה בטלפון. בתוכנית החינמית הדוא״ל הוא סיכום יומי, ו-Telegram מיידי.
שלחו בדיקה מהעמוד שפורסם. קובץ שנפתח כ-file:// אינו בדיקה אמינה של הטופס החי.
התוכנית החינמית שומרת פניות למשך 30 יום. תוכניות בתשלום יכולות לשמור זמן רב יותר. Formgong מאחסן אותן באיחוד האירופי.
התוכנית החינמית כוללת 300 פניות בחודש. ספאם אינו נספר במספר הזה.
אם אתם צריכים טופס למרפאה, למשרה או להצעת מחיר, השתמשו בתבנית ענפית בהמשך האתר. עמוד זה הוא רק פריסת יצירת הקשר הפשוטה.
שאלות על השירות נשלחות אל support@formgong.com. Formgong הוא המפעיל של השירות. תבנית זו אינה מציינת חברה אחרת כמפעיל.
תצוגה מקדימה
קוד הטופס
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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" required></label> <label>אימייל <input type="email" name="email" autocomplete="email" required></label> <label>טלפון <input type="tel" name="phone" autocomplete="tel"></label> <label>הודעה <textarea name="message" 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> <!-- אופציונלי. הפעילו Turnstile לטופס הזה, הסירו את סימני ההערה והדביקו את מפתח האתר. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="he"></div> --> <button type="submit">שליחה</button> </form>
אותו טופס עם הפניה לעמוד תודה
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="he"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <label>שם <input type="text" name="name" autocomplete="name" required></label> <label>אימייל <input type="email" name="email" autocomplete="email" required></label> <label>טלפון <input type="tel" name="phone" autocomplete="tel"></label> <label>הודעה <textarea name="message" 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> <!-- אופציונלי. הפעילו Turnstile לטופס הזה, הסירו את סימני ההערה והדביקו את מפתח האתר. <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script> <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="he"></div> --> <button type="submit">שליחה</button> </form>
שאלות ותשובות
האם הטופס הזה צריך JavaScript?
לא. הדפדפן שולח את הטופס בעצמו. תבנית ה-AJAX היא זו שנשארת בעמוד עם fetch.
לאן ההודעות מגיעות?
לתיבה של Formgong, ולדוא״ל ול-Telegram כשאתם מחברים אותם. כתבו אל support@formgong.com אם השאלה היא על השירות עצמו.
אפשר להוסיף שדות?
כן. הוסיפו שדות קלט עם שמות קצרים, למשל city. Telegram מדפיס את השם הזה מעל התשובה. אל תשנו את השם של access_key או של botcheck.
האם התצוגה המקדימה שולחת הודעה אמיתית?
לא. התצוגה המקדימה בעמוד זה רק מציגה הערה. דבר אינו נשלח עד שתשימו את המקטע באתר שלכם עם מפתח גישה אמיתי.