Як додати контактну форму на ваш сайт (яка справді доходить до вас)

Щоб додати контактну форму, яка працює, створіть коротку форму (ім'я, електронна пошта, повідомлення) і надсилайте її на серверний маршрут, який перевіряє введені дані, зберігає повідомлення в базі даних, а потім надсилає вам сповіщення на пошту через поштового провайдера, використовуючи секретний API-ключ. Додайте приховане поле-пастку (honeypot) і обмеження частоти запитів, щоб зупинити більшість спаму, покажіть чітке повідомлення про успіх і протестуйте весь шлях на опублікованому сайті. Найважливіше — спочатку зберегти, а потім надсилати лист: якщо пошта колись не спрацює, звернення все одно залишиться у вас.

Ваші варіанти

Якщо ваш сайт уже має бекенд і базу даних — а застосунки, створені конструкторами на основі ШІ, часто їх мають, — останній варіант найнадійніший і зберігає звернення там, де ви їх бачите.

Що має містити хороша контактна форма

• Якомога менше полів. Ім'я, електронна пошта, повідомлення. Додавайте випадаючий список теми («Продажі», «Підтримка», «Інше») лише якщо будете за ним розподіляти звернення.
• Чіткі підписи над кожним полем, а не лише підказка всередині поля, яка зникає.
• Корисна перевірка: «Введіть дійсну адресу електронної пошти», що показується поруч із полем.
• Стан успіху, який пояснює, що буде далі: «Дякуємо — ми відповімо протягом одного робочого дня».
• Примітка про конфіденційність з поясненням, як ви використовуватимете дані, з посиланням на вашу політику конфіденційності.
• Запасний варіант, як-от ваша електронна адреса або номер телефону, для тих, хто віддає перевагу іншому способу.

Приклади промптів

Базова форма:

Додай контактну форму на сторінку «Контакти» з полями ім'я, електронна пошта і повідомлення (усі обов'язкові, повідомлення до 2 000 символів). Надсилай її на серверний маршрут, який перевіряє дані, зберігає їх у таблиці contact_messages з часом отримання і показує повідомлення про успіх: «Дякуємо, ми відповімо протягом одного робочого дня». Показуй помилки полів одразу біля них. Зроби так, щоб добре працювало на телефонах.

Сповіщення на пошту:

Коли контактне повідомлення збережено, надсилай мені сповіщення на hello@example.com через Resend, використовуючи ключ із RESEND_API_KEY. Встанови reply-to на адресу відправника, щоб я міг відповісти напряму. Якщо надсилання не вдалося, збережи повідомлення і запиши помилку в лог, не виводячи ключ.

Захист від спаму:

Додай захист від спаму до контактної форми: приховане поле-пастку, яке має залишатися порожнім, ліміт 5 надсилань з однієї IP-адреси на годину на сервері, і відхиляй повідомлення з більш ніж 3 посиланнями. Тихо відкидай надсилання з пасткою, але все одно показуй повідомлення про успіх.

Вхідні повідомлення:

Додай сторінку адміністрування під паролем, яка показує контактні повідомлення, спочатку найновіші, з прапорцем «оброблено» і фільтром для необроблених повідомлень.

Крок за кроком

1. Вирішіть, куди надходять повідомлення: хто отримує сповіщення і хто відповідає.
2. Створіть форму з описаними вище полями, доступними підписами і зручними для телефону полями введення (використовуйте тип поля email, щоб на телефонах з'являлася правильна клавіатура).
3. Створіть серверний маршрут. Він перевіряє обов'язкові поля, формат електронної пошти і обмеження довжини. Ніколи не довіряйте лише перевірці в браузері.
4. Спочатку збережіть у базі даних. Див. як додати базу даних до застосунку.
5. Налаштуйте поштового провайдера. Створіть обліковий запис, підтвердьте домен для надсилання і збережіть API-ключ як секрет. Як надсилати електронні листи з вашого застосунку детально пояснює налаштування домену (SPF, DKIM).
6. Надішліть сповіщення з сервера після збереження. Використовуйте ваш підтверджений домен як відправника, а адресу відвідувача — як reply-to. Не надсилайте «від імені» адреси відвідувача, інакше її, імовірно, відхилять як підробку.
7. За бажання — автовідповідь відвідувачу, але коротка; автовідповіді на спам-адреси можуть зашкодити вашій репутації відправника.
8. Додайте захист від спаму: пастку, обмеження частоти, а за потреби — перевірку типу CAPTCHA.
9. Протестуйте на опублікованому сайті: надішліть повідомлення, перевірте базу даних, вашу пошту і папку спаму, натисніть «Відповісти».

Як зупинити спам

Контактні форми приваблюють ботів протягом кількох днів після запуску. Нашаровуйте захист від найменш до найбільш нав'язливого:

1. Поле-пастка (honeypot). Поле, приховане від людей; боти його заповнюють. Реальним відвідувачам це нічого не коштує.
2. Обмеження частоти на сервері. Обмежує, скільки повідомлень одна адреса може надіслати за період.
3. Правила вмісту. Відхиляйте повідомлення, напхані посиланнями, або з порожнім чи абсурдно довгим полем повідомлення.
4. Перевірка типу CAPTCHA, як Cloudflare Turnstile або Google reCAPTCHA. Токен має перевірятися на вашому сервері; перевірка, яка працює лише в браузері, може бути обійдена.

Типові помилки

• Показувати «Надіслано!», коли нічого не надіслано. Інтерфейс показує успіх до або незалежно від відповіді сервера. Завжди чекайте на сервер.
• Лише пошта, без бази даних. Один неправильно налаштований ключ — і звернення зникають на тижні, і ніхто цього не помічає.
• API-ключ у коді фронтенду. Будь-хто може використати його, щоб надсилати пошту від вашого імені.
• Неперевірений домен для надсилання. Сповіщення потрапляють у спам або взагалі не приходять.
• Надсилання «від імені» електронної адреси відвідувача. Натомість використовуйте reply-to.
• Відсутні обмеження довжини. Боти вставляють величезні блоки тексту.
• Ніколи не тестувати живий сайт. Ключі та домени часто відрізняються між попереднім переглядом і продакшеном.

Чек-ліст

• Коротка форма з видимими підписами і чіткими помилками
• Перевірка на сервері і обмеження довжини
• Кожне повідомлення зберігається в базі даних
• Сповіщення надсилається з підтвердженого домену, з встановленим reply-to
• API-ключ пошти зберігається лише як секрет на сервері
• Пастка і обмеження частоти увімкнені
• Повідомлення про успіх з'являється лише після підтвердження сервера
• Примітка про конфіденційність містить посилання на вашу політику конфіденційності
• Протестовано на опублікованому сайті від початку до кінця, включно з папкою спаму

Контактні форми в Mythex

У Mythex можна побудувати все це з чату. Попросіть форму і базу даних в одному промпті (або введіть /database), щоб надіслані дані зберігалися. Mythex не має вбудованого продукту для надсилання пошти, тож для сповіщень використовуйте провайдера, як Resend, SendGrid або Postmark, додайте його ключ через /secrets або налаштування проєкту і попросіть агента надсилати з сервера — див. Надсилання пошти з вашого застосунку. Перш ніж покладатися на це, запустіть App Testing (/test) для форми в попередньому перегляді, а потім опублікуйте і протестуйте на живій URL-адресі.

Контактна форма — ключова частина більшості сайтів малого бізнесу і посадкових сторінок. Перевірте чек-лист безпеки перед запуском.

Запитання