Как добавить контактную форму на сайт (которая реально доходит до вас)

Чтобы контактная форма работала, создайте короткую форму (имя, email, сообщение) и отправляйте её на серверный маршрут, который проверяет данные, сохраняет сообщение в базу данных и затем отправляет вам уведомление по почте через почтового провайдера с помощью секретного API-ключа. Добавьте скрытое поле-ловушку (honeypot) и ограничение частоты запросов, чтобы отсечь большую часть спама, покажите понятное сообщение об успешной отправке и протестируйте весь путь на опубликованном сайте. Важнее всего сохранять сообщение до отправки письма: если почта когда-нибудь подведёт, заявка у вас останется.

Варианты

Если у вашего сайта уже есть бэкенд и база данных, как часто бывает у приложений, созданных AI-конструкторами, последний вариант самый надёжный и сохраняет заявки там, где вы их видите.

Что должна включать хорошая контактная форма

• Как можно меньше полей. Имя, email, сообщение. Выпадающий список темы («Продажи», «Поддержка», «Другое») добавляйте, только если будете по нему распределять заявки.
• Понятные подписи над каждым полем, а не только подсказка внутри поля, которая исчезает.
• Полезная проверка данных: «Введите корректный адрес email», показанная рядом с полем.
• Состояние успеха, которое говорит, что будет дальше: «Спасибо, ответим в течение одного рабочего дня».
• Пометка о конфиденциальности с объяснением, как вы используете данные, со ссылкой на политику конфиденциальности.
• Запасной вариант, например email или телефон, для тех, кто предпочитает связываться иначе.

Примеры промптов

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

Добавь контактную форму на страницу «Контакты» с полями имя, email и сообщение (все обязательны, сообщение до 2000 символов). Отправляй её на серверный маршрут, который проверяет данные, сохраняет их в таблицу contact_messages с временем получения и показывает сообщение об успехе: «Спасибо, мы ответим в течение одного рабочего дня». Показывай ошибки полей прямо рядом с ними. Сделай так, чтобы форма хорошо работала на телефонах.

Уведомления по email:

Когда сообщение контактной формы сохранено, отправляй мне уведомление на hello@example.com через Resend с ключом из RESEND_API_KEY. Укажи в reply-to email отправителя, чтобы я мог ответить напрямую. Если отправка не удалась, сохрани сообщение и запиши ошибку в лог, не раскрывая ключ.

Защита от спама:

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

Список сообщений:

Добавь защищённую паролем страницу администратора со списком контактных сообщений от новых к старым, с галочкой «обработано» и фильтром для необработанных сообщений.

Пошагово

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

Борьба со спамом

Контактные формы привлекают ботов уже через несколько дней после запуска. Выстраивайте защиту от наименее навязчивой к самой строгой:

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

Частые ошибки

• Показ «Отправлено!», когда ничего не отправлено. Интерфейс сообщает об успехе до ответа сервера или независимо от него. Всегда дожидайтесь ответа сервера.
• Только почта, без базы данных. Одна неверно настроенная отправка ключа, и заявки пропадают неделями, и никто этого не замечает.
• API-ключ во фронтенд-коде. Любой может использовать его, чтобы отправлять письма от вашего имени.
• Неподтверждённый домен отправителя. Уведомления попадают в спам или вообще не доходят.
• Отправка «от» email посетителя. Вместо этого используйте reply-to.
• Нет ограничений длины. Боты вставляют огромные блоки текста.
• Никогда не тестировали живой сайт. Ключи и домены часто различаются между превью и продакшеном.

Чек-лист

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

Контактные формы в Mythex

В Mythex можно собрать всё это прямо из чата. Попросите форму и базу данных в одном промпте (или введите /database), чтобы заявки сохранялись. В Mythex нет встроенного продукта для отправки писем, поэтому для уведомлений подключите провайдера, например Resend, SendGrid или Postmark, добавьте его ключ через /secrets или настройки проекта и попросите агента отправлять письма с сервера — см. Отправка email из приложения. Прежде чем полагаться на форму, запустите тестирование приложения (/test) для формы в превью, затем опубликуйте и проверьте на живом адресе.

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

Вопросы