HTML-форма контакту
Форма контакту звичайним HTML. Її надсилає браузер. Бекенд, фреймворк і шрифт не потрібні.
Що ви копіюєте
Це стартова форма контакту звичайним HTML. Браузер надсилає її звичайним POST. Тут немає виклику fetch, фреймворку і кроку збірки.
Вставте розмітку на статичну сторінку, у вбудовування Webflow або будь-куди, де приймають елемент форми. Своїй сторінці не потрібен власний сервер.
Форма питає ім’я, адресу електронної пошти і повідомлення. Телефон необов’язковий. Ці слова є і назвами полів.
Telegram друкує назву кожного поля жирним над відповіддю. Короткі назви на кшталт name, email і message читаються з телефону.
Тут не збирають файл, оплату чи оцінку Formgong. Це лише спосіб, яким відвідувач може до вас дістатись.
Як відбувається надсилання
Дія форми — це походження Formgong плюс /submit, метод POST. Приховане поле access_key називає форму.
Ключ публічний і має бути на сторінці. Він дозволяє відвідувачу надіслати заявку. Ним не змінити одержувачів і не ввімкнути вебхук.
Приховане поле _lang несе мову сторінки, наприклад en. Formgong бере його для сторінки подяки і тексту помилки.
Повідомлення відвідувача воно не перекладає. Видимі підписи пишіть мовою сторінки, а назви полів лишайте англійськими.
Пастка для ботів — це поле з назвою botcheck. Воно поза екраном, з tabindex -1 і вимкненим autocomplete. Люди лишають його порожнім.
Заявку, у якій заповнено botcheck, зберігають як спам і не доставляють. Відвідувач усе одно бачить звичайний успішний шлях.
Turnstile необов’язковий. У сніпеті віджет лишається всередині коментаря. Ключа сайту в цьому шаблоні немає.
Якщо ви вмикаєте Turnstile для форми, приберіть позначки коментаря і вставте власний ключ сайту. До того ці рядки нічого не роблять.
Без прихованого _redirect Formgong показує власну сторінку подяки. Додатковий сніпет ставить _redirect на адресу https.
Замініть https://example.com/thanks на сторінку, якою ви керуєте. Відносний шлях не приймається.
Після того як вставите
Створіть форму в кабінеті або натисніть кнопку на цій сторінці і замініть fk_your_access_key, якщо скопіювали заповнювач.
Підключіть Telegram у налаштуваннях форми, коли хочете бачити повідомлення на телефоні. На безкоштовному плані пошта — це денний дайджест, а Telegram надходить одразу.
Надішліть тест з опублікованої сторінки. Файл, відкритий як file://, не є надійною перевіркою живої форми.
Безкоштовний план зберігає заявки 30 днів. Платні плани можуть зберігати довше. Formgong тримає їх у ЄС.
Безкоштовний план включає 300 заявок на місяць. Спам у цю кількість не входить.
Якщо потрібна форма для клініки, вакансії чи прорахунку, візьміть галузевий шаблон нижче на цьому сайті. Ця сторінка — лише простий макет контакту.
Питання про сервіс надсилайте на support@formgong.com. Оператором сервісу є Formgong. Цей шаблон не називає іншу компанію оператором.
Перегляд
Код форми
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <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>
Та сама форма з переадресацією на подяку
<form action="https://formgong.com/submit" method="POST" style="position:relative"> <input type="hidden" name="access_key" value="fk_your_access_key"> <input type="hidden" name="_lang" value="uk"> <input type="hidden" name="_redirect" value="https://example.com/thanks"> <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>
Питання та відповіді
Чи потрібен цій формі JavaScript?
Ні. Браузер надсилає форму сам. Стартовий шаблон AJAX — це той, що лишається на сторінці через fetch.
Куди йдуть повідомлення?
У вхідні Formgong, а також на пошту і в Telegram, коли ви їх підключите. Пишіть на support@formgong.com, якщо питання стосується самого сервісу.
Чи можна додати поля?
Так. Додайте поля з короткими назвами, наприклад city. Telegram надрукує цю назву над відповіддю. Не перейменовуйте access_key і botcheck.
Чи надсилає перегляд справжнє повідомлення?
Ні. Перегляд на цій сторінці лише показує примітку. Нічого не вирушає, доки ви не поставите сніпет на свій сайт зі справжнім ключем доступу.