Контактна форма Cloudflare Pages

Formgong team ·

Контактна форма Cloudflare Pages може надсилати дані з браузера. Вставте HTML нижче і вкажіть action на Formgong. Pages Function і поштовий API не потрібні. Telegram приходить одразу. На безкоштовному плані лист — це дайджест наступного ранку о 08:00.

Cloudflare Pages
<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>

Як працюють форми в Cloudflare Pages

Cloudflare Pages віддає статичні файли. Він не шукає форму у вашому HTML. POST на адресу сторінки немає куди прийняти, тож заявка губиться.

Файл functions/api/contact.js може прочитати цей POST. Щоб надіслати лист, усе одно потрібні поштовий API, секрет і DNS на вашому домені. Форма нижче пропускає цю роботу.

Налаштування в Cloudflare Pages

  1. Створіть форму у Formgong і скопіюйте ключ доступу. Він починається з fk_.
  2. Вставте HTML у теку, яку публікує Pages, наприклад public/index.html або contact.html. Вкажіть action на https://formgong.com/submit.
  3. Замініть fk_your_access_key. Залиште botcheck порожнім. Turnstile додавайте лише після ввімкнення в розділі Protection.
  4. Задеплойте з Git або запустіть wrangler pages deploy. Надішліть тест із живої адреси pages.dev.
  5. На безкоштовному плані лист — це дайджест наступного ранку о 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 надсилають лист на кожну заявку.

Почати безкоштовно