Контактна форма 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 надсилають лист на кожну заявку.