Как добавить форму обратной связи на сайт — чтобы письма реально доходили

Самый частый способ «сделать форму» на первом сайте — кнопка с mailto:. И это форма, которая молча теряет большинство сообщений: mailto: не отправляет письмо, а открывает почтовую программу на устройстве посетителя. У половины людей она не настроена — окно мигнуло, человек закрыл, сообщение умерло.

Настоящая форма работает иначе: данные уезжают с твоей страницы туда, где ты их точно увидишь, — в почту или в табличку. Соберём такую за шесть шагов. Ни своего сервера, ни бэкенда не понадобится.

Шаг 0. Реши, куда падают сообщения

До кода — один выбор. Сообщения из формы должны куда-то приезжать, и для новичка есть два хороших адреса:

• Сервис форм (Formspree, Web3Forms и похожие). Даёт готовый URL: форма шлёт данные на него, сервис пересылает тебе на почту. Самый быстрый путь — берём его.
• Своя таблица в базе. Сообщения падают в твою базу данных, а смотришь ты их в панели. Чуть больше настройки, зато всё твоё — хороший второй шаг.

Шаг 1. Разметка: три поля и кнопка

<form id="contact-form">
  <input name="email" type="email" placeholder="Твоя почта" required />
  <textarea name="message" placeholder="Сообщение" required></textarea>
  <input name="company" style="display:none" tabindex="-1" autocomplete="off" />
  <button type="submit">Отправить</button>
</form>
<p id="form-status"></p>

Две неочевидные детали. У каждого поля есть name — это имена, под которыми данные приедут к тебе; без них форма пришлёт пустоту. А скрытое поле company — ловушка для спама, о ней в шаге 5.

Шаг 2. Отправка без перезагрузки

const form = document.getElementById("contact-form");
const status = document.getElementById("form-status");

form.addEventListener("submit", async (e) => {
  e.preventDefault(); // не перезагружать страницу
  status.textContent = "Отправляю…";
  const res = await fetch("https://formspree.io/f/ТВОЙ_ID", {
    method: "POST",
    body: new FormData(form),
    headers: { Accept: "application/json" },
  });
  status.textContent = res.ok
    ? "Готово! Отвечу на почту."
    : "Не отправилось. Попробуй ещё раз.";
  if (res.ok) form.reset();
});

Главная строка тут — e.preventDefault(): без неё браузер перезагрузит страницу по-старинке. А fetch отправляет данные формы POST-запросом на URL из шага 3.

Шаг 3. Возьми адрес у сервиса форм

Зарегистрируйся в сервисе форм, создай форму — получишь URL вида https://formspree.io/f/abcd1234. Подставь его в fetch вместо заглушки. Всё: сервис принимает данные и пересылает тебе на почту.

Если делаешь сайт с ИИ — не собирай это руками, попроси готовое: «Добавь на мою страницу форму обратной связи: почта и сообщение, отправка через fetch на <твой URL> без перезагрузки, статусы "отправляю / готово / ошибка", в стиле моего сайта». Получишь свой вариант этих же шагов, вписанный в твою страницу.

Шаг 4. Покажи человеку, что случилось

Это половина качества формы. После клика человек должен видеть три состояния: «отправляю», «готово», «не получилось». В коде шага 2 они уже есть — строка form-status. Форма без статуса выглядит сломанной, даже когда работает: человек жмёт кнопку ещё пять раз, и у тебя шесть копий письма.

Шаг 5. Включи ловушку для спама

Спам придёт — боты находят любые формы. Самая дешёвая защита — honeypot, поле-приманка: то самое скрытое company из шага 1. Человек его не видит и не заполняет. Бот заполняет всё подряд. Значит, письмо с заполненным company можно выбрасывать — сервисы форм умеют это сами, включи опцию honeypot в настройках.

Этого хватает на месяцы. Станет тесно — добавишь капчу, но не начинай с неё: капча отпугивает и людей.

Что получится

Посетитель заполняет два поля, жмёт кнопку — страница не перезагружается, появляется «Готово!». Тебе на почту падает письмо с его адресом и текстом. Спам-боты попадают в ловушку. А когда сообщений станет много, тем же fetch перенаправишь их в свою табличку — или подключишь отправку писем из своего кода, чтобы отвечать автоматически.

Обязательно ли собирать почту посетителя?

Если хочешь ответить — да, поле «почта» обязательное. И не проси лишнего: имя, телефон и «откуда вы о нас узнали» снижают число отправок. Два поля — золотой стандарт формы обратной связи.

Почему сообщения не приходят, хотя форма «работает»?

Три частые причины: письма падают в папку «Спам» (проверь её), в полях нет атрибутов name (данные уезжают пустыми), адрес в fetch скопирован с опечаткой. Проверяй в этом порядке.