טופס יצירת קשר ב-AJAX
אותם שדות קשר, נשלחים ב-fetch כ-JSON. המבקר נשאר בדף ורואה סטטוס קצר.
מה אתם מעתיקים
תבנית זו שולחת את אותם שדות יצירת קשר עם fetch, כך שהמבקר נשאר בעמוד שלכם וקורא סטטוס קצר.
לטופס עדיין יש action ושיטת POST. אם JavaScript אינו רץ, הדפדפן מבצע שליחה רגילה.
מסלול הגיבוי הזה חשוב לדפדפנים ישנים יותר ולאנשים שחוסמים סקריפטים. אין צורך לתחזק שני טפסים.
המקטע העיקרי שולח JSON. הוא קובע את Content-Type ל-application/json ואת Accept ל-application/json.
ההצלחה היא הערך הבוליאני success ב-JSON. כשהוא true, המקטע מציג את הודעת התשובה, או תודה קצרה, ומאפס את הטופס.
כשהוא false, המקטע מציג את הודעת התשובה. Formgong כותב את ההודעה הזאת בשפה של _lang.
JSON ו-FormData
גוף JSON חייב למנות את השדות שאתם רוצים לשלוח. המקטע כולל את access_key, את _lang, את name, את email, את phone, את message ואת botcheck.
אם בהמשך תסירו את ההערה מ-Turnstile, מסלול ה-JSON מעתיק גם את cf-turnstile-response כשלשדה הזה יש ערך.
המקטע הנוסף משתמש ב-FormData במקום ב-JSON. הדפדפן קובע את סוג התוכן, כולל את הגבול. אל תקבעו את Content-Type בעצמכם.
FormData קולט כל שדה בטופס, כולל אסימון Turnstile אם הווידג׳ט נמצא בתוך הטופס.
שני המסלולים שולחים Accept: application/json. בלי הכותרת הזאת, שליחת טופס רגילה מהדפדפן מקבלת את עמוד התודה, לא JSON.
אל תשלחו גם גוף JSON וגם גוף multipart. בחרו אחד. שני המקטעים הם חלופות, לא שכבות.
ספאם, Telegram ומגבלות
השאירו את המלכודת בשם botcheck ריקה, מחוץ למסך, עם tabindex -1. מלכודת מלאה נשמרת כספאם ואינה נמסרת.
השאירו את שמות השדות קצרים כדי ש-Telegram יוכל להדפיס אותם בהדגשה. אל תשנו את email למשפט ארוך.
מפתח הגישה נשאר בעמוד. העברה שלו לסוד בשרת אינה הופכת את הטופס לבטוח יותר, ולמקטע הזה אין שרת.
בתוכנית החינמית Telegram מיידי והדוא״ל הוא סיכום יומי. התיבה שומרת פניות למשך 30 יום.
התוכנית החינמית כוללת 300 פניות בחודש. פניית ספאם אינה משתמשת באחת מהן.
התצוגה המקדימה הזאת אינה שולחת. חברו את המקטע באתר שלכם, ואז שלחו בדיקה מהעמוד ההוא.
Formgong מפעיל את השירות. לעזרה במוצר כתבו אל support@formgong.com.
תצוגה מקדימה
קוד הטופס
<form id="fg-ajax" 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>
<p data-status role="status"></p>
</form>
<script>
(function () {
var form = document.getElementById("fg-ajax");
if (!form) return;
var status = form.querySelector("[data-status]");
form.addEventListener("submit", function (event) {
event.preventDefault();
var data = {
access_key: form.access_key.value,
_lang: form._lang.value,
name: form.name.value,
email: form.email.value,
phone: form.phone.value,
message: form.message.value,
botcheck: form.botcheck.value
};
var token = form.querySelector('[name="cf-turnstile-response"]');
if (token && token.value) data["cf-turnstile-response"] = token.value;
var body = JSON.stringify(data);
fetch("https://formgong.com/submit", {
method: "POST",
headers: { "Content-Type": "application/json", Accept: "application/json" },
body: body
}).then(function (res) { return res.json(); }).then(function (result) {
if (status) status.textContent = result && result.success ? (result.message || "נשלח. תודה!") : ((result && result.message) || "השליחה נכשלה. נא לנסות שוב.");
if (result && result.success) form.reset();
}).catch(function () {
if (status) status.textContent = "השליחה נכשלה. נא לנסות שוב.";
});
});
})();
</script>אותו טופס עם FormData במקום JSON
<form id="fg-ajax" 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>
<p data-status role="status"></p>
</form>
<script>
(function () {
var form = document.getElementById("fg-ajax");
if (!form) return;
var status = form.querySelector("[data-status]");
form.addEventListener("submit", function (event) {
event.preventDefault();
var body = new FormData(form);
fetch("https://formgong.com/submit", {
method: "POST",
headers: { Accept: "application/json" },
body: body
}).then(function (res) { return res.json(); }).then(function (result) {
if (status) status.textContent = result && result.success ? (result.message || "נשלח. תודה!") : ((result && result.message) || "השליחה נכשלה. נא לנסות שוב.");
if (result && result.success) form.reset();
}).catch(function () {
if (status) status.textContent = "השליחה נכשלה. נא לנסות שוב.";
});
});
})();
</script>שאלות ותשובות
למה לטופס עדיין יש כתובת action?
כדי שהשליחה עדיין תעבוד כש-JavaScript כבוי. הסקריפט קורא ל-preventDefault רק כשהוא רץ.
לשלוח JSON או FormData?
שניהם תקינים. JSON מפורש לגבי כל שדה. FormData קצר יותר כשאתם מוסיפים שדות קלט אחר כך, כי הוא קורא את הטופס.
שורת הסטטוס נשארת ריקה. מה נכשל?
בדקו ש-Accept הוא application/json, שמפתח הגישה תואם לטופס שבבעלותכם, ושהעמוד מוגש דרך http או https, לא כקובץ מקומי.
האם הטופס הזה יכול להעלות קובץ?
לא בתבנית הזאת. שדות קובץ צריכים קבצים מצורפים מופעלים ואסימון Turnstile תקין. השתמשו בתיעוד של הלוח להגדרה הזאת.