Форма зворотного зв'язку для сайту: HTML-шаблон

HTML-код форми зворотного зв'язку

1. Зареєструйтеся у Formgong і скопіюйте ключ доступу форми.
2. Вставте код туди, де має бути форма, і замініть fk_your_access_key своїм ключем.
3. Опублікуйте сторінку й надішліть тестову заявку: лист прийде на пошту акаунта.

<style>
  .fg-form label { display: block; margin: 0 0 12px; }
  .fg-form input:not([type="checkbox"]), .fg-form textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 10px; font: inherit; }
  .fg-form textarea { min-height: 120px; }
  .fg-form small { display: block; margin-top: 10px; opacity: .75; }
</style>
<form class="fg-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">
  <input type="hidden" name="_subject" value="Нове повідомлення з сайту">
  <!-- Необов'язково: власна сторінка подяки -->
  <!-- <input type="hidden" name="_redirect" value="https://ваш-сайт.com/dyakuyemo"> -->
  <label>Ім’я <input type="text" name="name" autocomplete="name" required></label>
  <label>Email <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;left:-10000px;width:1px;height:1px;overflow:hidden">
    <label>Залиште це поле порожнім<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
  </div>
  <button type="submit">Надіслати</button>
</form>

Поле телефону необов'язкове. Можна прибрати його або додати свої поля: кожне поле з атрибутом name з'явиться в листі та в повідомленні Telegram.

Як форма працює без PHP

Атрибут action надсилає дані методом POST у Formgong. Приховані поля керують обробкою:

• access_key визначає вашу форму й те, куди піде заявка;
• _lang задає мову сторінки подяки й автовідповіді;
• _subject задає тему листа;
• _redirect (необов'язково) веде на вашу сторінку подяки. Без нього відвідувач побачить сторінку подяки Formgong.

Форма на PHP з функцією mail() потребує хостингу з PHP і налаштованої пошти, а такі листи часто потрапляють у спам. Тут цього не потрібно: код працює й на статичному хостингу, і в конструкторах сайтів.

Заявки в Telegram

У налаштуваннях форми у Formgong підключіть Telegram, і кожна заявка прийде і на пошту, і в чат: особистий або груповий. Chat id шукати не треба, для групи достатньо команди /connect з кодом із панелі. Під повідомленням є кнопки «спам» і зміни статусу, а AI-оцінка лідів безкоштовна до 100 заявок на місяць.

Захист форми від спаму

• Приховане поле-пастка botcheck працює завжди. Заявки від ботів ідуть в окрему вкладку й не рахуються в ліміт.
• Якщо спаму багато, увімкніть Cloudflare Turnstile — він доступний і на безкоштовному тарифі.
• На тарифах Pro і Business форму можна обмежити своїми доменами.

Куди вставити форму

• Tilda: блок T123 на платному тарифі (HTML-форма для Tilda) або вбудований бот Tilda (заявки з Tilda в Telegram);
• Хорошоп: текстова сторінка й скрипт (інструкція для Хорошоп);
• WordPress: блок «Довільний HTML» (інструкція для WordPress);
• звичайний сайт: файл на кшталт contact.html (інструкція для HTML).

Де зберігаються заявки

Заявки зберігаються в ЄС (Cloudflare D1 з юрисдикцією ЄС), листи надсилає ZeptoMail (Zoho) з дата-центру в ЄС, а IP-адреса зберігається лише як хеш. Telegram обробляє повідомлення за власними правилами. Деталі — на сторінці дані та їх розташування.