Formgong

Мінімальна форма контакту

Підписи, три поля і кнопка. Без блоку стилів. Елементи малює браузер. Надсилання таке саме, як в інших стартових шаблонах.

Увійдіть, щоб використати шаблон

Що ви копіюєте

Це форма контакту без блоку стилів і без утилітних класів. Браузер малює елементи своїм типовим виглядом.

Це корисно, коли хочете ясно бачити запит, або коли фарбуватиме ваша власна таблиця стилів.

Поля все ті самі: ім’я, пошта, необов’язковий телефон і повідомлення. Кнопка надсилає звичайний POST.

Немає фреймворку, шрифту і скрипту. Якщо ваш загальний CSS перестилізовує поля, він застосується. Цей файл із ним не бореться.

Перегляд на цій сторінці також пропускає карткові стилі інших шаблонів, тож елементи ближчі до нестилізованої форми.

Що все одно потрібне

Навіть голій формі потрібні access_key, _lang і botcheck. Так Formgong впізнає форму, мову і пастку.

Пастку сховано коротким атрибутом стилю на її обгортці. Це єдиний стиль у сніпеті. Без нього люди можуть заповнити пастку.

Turnstile стоїть у коментарі. Додатковий сніпет — та сама форма з розкоментованими рядками, де YOUR_TURNSTILE_SITE_KEY ще треба замінити.

Розкоментування рядків не створює ключ. Створіть віджет у Cloudflare, увімкніть Turnstile на формі, а потім вставте ключ сайту.

Закоментований скрипт не виконується. Лишайте коментар, доки віджет справді не потрібен.

Те саме доставлення, що в стилізованих

Telegram друкує назви полів жирним. Лишайте їх короткими. Перекладайте лише текст, який читає відвідувач.

Без _redirect Formgong показує свою сторінку подяки. Додавайте _redirect лише як абсолютну https-адресу, якою ви володієте.

Безкоштовний план включає 300 заявок на місяць, 30 днів зберігання, миттєвий Telegram і денний дайджест пошти.

Дані зберігаються в ЄС. Сервіс веде Formgong. Адреса підтримки — support@formgong.com.

Коли гола форма працює, можете обгорнути її у власний макет. Не обов’язково починати зі стилізованого шаблону.

Перегляд

Код форми

HTML
<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" 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;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="uk"></div>
-->
  <button type="submit">Надіслати</button>
</form>
Та сама форма з розкоментованим Turnstile
Та сама форма з розкоментованим Turnstile
<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" 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;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="uk"></div>
  <button type="submit">Надіслати</button>
</form>

Питання та відповіді

Чому на пастці все ще є стиль?

Щоб пастка лишалася поза екраном. Усе інше навмисно без стилів. Якщо прибрати це єдине правило, пастка стане видимою.

Чи CSS мого сайту зламає POST?

CSS не змінює POST. Стиль може сховати кнопку надсилання, але важливі назви полів і URL дії.

Чому він менший?

Так. Це той самий запит із меншою фарбою, тож його можна поставити на сторінку, у якої дизайн уже є.

Чи потрібне поле телефону?

Ні. Видаліть цей підпис, якщо номер не потрібен. Лишіть email, якщо у вхідних потрібна адреса для відповіді.