טופס יצירת קשר ב-Cloudflare Pages
Formgong team ·
טופס יצירת קשר ב-Cloudflare Pages יכול להישלח מהדפדפן. הדביקו את ה-HTML למטה וכוונו את action אל Formgong. אין צורך ב-Pages Function או ב-API לדוא"ל. Telegram מגיע מיד. בתוכנית החינמית הדוא"ל הוא תקציר למחרת ב-08:00.
<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="en"> <label>Name <input type="text" name="name" autocomplete="name" placeholder="Your name" required></label> <label>Email <input type="email" name="email" autocomplete="email" placeholder="you@example.com" required></label> <label>Message <textarea name="message" placeholder="How can we help?" 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>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Send</button> </form>
<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="uk"> <label>Ім’я <input type="text" name="name" autocomplete="name" placeholder="Ваше ім’я" required></label> <label>Email <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>
<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="pl"> <label>Imię <input type="text" name="name" autocomplete="name" placeholder="Twoje imię" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="ty@example.com" required></label> <label>Wiadomość <textarea name="message" placeholder="W czym możemy pomóc?" 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>Pozostaw to pole puste<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Wyślij</button> </form>
<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="tr"> <label>Ad <input type="text" name="name" autocomplete="name" placeholder="Adınız" required></label> <label>E-posta <input type="email" name="email" autocomplete="email" placeholder="siz@ornek.com" required></label> <label>Mesaj <textarea name="message" placeholder="Size nasıl yardımcı olabiliriz?" 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>Bu alanı boş bırakın<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Gönder</button> </form>
<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="es"> <label>Nombre <input type="text" name="name" autocomplete="name" placeholder="Tu nombre" required></label> <label>Correo electrónico <input type="email" name="email" autocomplete="email" placeholder="tu@ejemplo.com" required></label> <label>Mensaje <textarea name="message" placeholder="¿En qué podemos ayudarte?" 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>Deja este campo vacío<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Enviar</button> </form>
<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="fr"> <label>Nom <input type="text" name="name" autocomplete="name" placeholder="Votre nom" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="vous@exemple.com" required></label> <label>Message <textarea name="message" placeholder="Comment pouvons-nous vous aider ?" 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>Laissez ce champ vide<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Envoyer</button> </form>
<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="pt"> <label>Nome <input type="text" name="name" autocomplete="name" placeholder="O seu nome" required></label> <label>E-mail <input type="email" name="email" autocomplete="email" placeholder="voce@exemplo.com" required></label> <label>Mensagem <textarea name="message" placeholder="Como podemos ajudar?" 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>Deixe este campo vazio<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Enviar</button> </form>
<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="ar"> <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>
<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>
<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="hi"> <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>
<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="ja"> <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>
<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="de"> <label>Name <input type="text" name="name" autocomplete="name" placeholder="Ihr Name" required></label> <label>E-Mail <input type="email" name="email" autocomplete="email" placeholder="name@beispiel.de" required></label> <label>Nachricht <textarea name="message" placeholder="Wie können wir Ihnen helfen?" 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>Lassen Sie dieses Feld leer<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label> </div> <button type="submit">Senden</button> </form>
איך טפסים עובדים ב-Cloudflare Pages
Cloudflare Pages מגיש קבצים סטטיים. הוא לא סורק את ה-HTML בחיפוש טופס. ל-POST אל כתובת העמוד אין לאן להגיע, והפנייה אובדת.
קובץ functions/api/contact.js יכול לקרוא את ה-POST. שליחת דוא"ל עדיין דורשת API לדוא"ל, סוד ו-DNS על דומיין שלכם. הטופס למטה מדלג על העבודה הזו.
הגדרה ב-Cloudflare Pages
- צרו טופס ב-Formgong והעתיקו את המפתח. הוא מתחיל ב-
fk_. - הדביקו את ה-HTML לתיקייה ש-Pages מפרסם, למשל
public/index.htmlאוcontact.html. כוונו אתactionאלhttps://formgong.com/submit. - החליפו את
fk_your_access_key. השאירו אתbotcheckריק. הוסיפו Turnstile רק אחרי שהפעלתם אותו תחת Protection. - פרסמו מ-Git, או הריצו
wrangler pages deploy. שלחו ניסיון מכתובתpages.devהחיה. - בתוכנית החינמית הדוא"ל הוא תקציר למחרת ב-08:00. Telegram מגיע מיד. Pro ו-Business שולחים דוא"ל על כל שליחה.
Formgong או Pages Function?
כתבו Pages Function כשהשליחה חייבת לשנות את מסד הנתונים שלכם או לקרוא ל-API פרטי.
השתמשו ב-Formgong לטופס יצירת קשר. אתם מדלגים על סוד הדוא"ל, על רשומות DNS ועל פונקציה לתחזוקה. האתר נשאר תיקיית קבצים סטטיים.
שאלות ותשובות
האם ל-Cloudflare Pages יש טופס יצירת קשר?
לא. המדריך הרשמי בונה Pages Function שמחזירה את השדות כ-JSON. היא לא שולחת דוא"ל ולא שומרת תיבה. עדיין צריך צד שרת לטפסים, או פונקציה שלכם יחד עם API לדוא"ל.
האם צריך Pages Function או Worker?
לא לטופס הזה. הדפדפן שולח אל Formgong. פונקציה מתאימה כשהשליחה חייבת להריץ את הקוד שלכם. המסלול החינמי הישן של MailChannels ל-Workers נעצר ב-30 ביוני 2024.
האם המבקר יכול להישאר בעמוד?
כן. קראו ל-fetch על https://formgong.com/submit עם Accept: application/json. חשבו שהשליחה הצליחה רק כש-response.ok ו-result.success שניהם אמת. טופס ה-HTML עובד גם בלי JavaScript.
איך מוסיפים Turnstile באותו חשבון?
צרו ווידג'ט Turnstile בלוח של Cloudflare והדביקו את מפתח האתר בטופס. שימו את הסוד ב-Formgong תחת Protection, לא בפרויקט Pages. הווידג'ט שולח cf-turnstile-response.
מה כלול בתוכנית החינמית?
Free שומר 300 שליחות בחודש. Telegram מגיע מיד. הדוא"ל הוא תקציר אחד למחרת ב-08:00 באזור הזמן שלכם. Pro ו-Business שולחים דוא"ל על כל שליחה.