Форма обратной связи без бэкенда

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

Решение — встроенный приёмник форм: форма отправляется на служебный адрес вашего же домена, сообщение сохраняется в кабинете и уходит на почту, а скрипт рядом с формой отсеивает ботов.

Что получится: форма в оформлении вашего сайта; заявки приходят на почту и хранятся в разделе Сообщения; спам отсеивается без капчи для людей. Понадобится: опубликованный статический сайт у нас. Время: 15 минут.

1. Добавьте форму в HTML

Укажите в action адрес /webshieldpro/forms/<имя>, где имя придумываете вы, и подключите рядом скрипт:

<form action="/webshieldpro/forms/contact" method="post">
  <p><label>Имя<br><input name="name" required></label></p>
  <p><label>Телефон или почта<br><input name="contact" required></label></p>
  <p><label>Что нужно сделать<br><textarea name="message" rows="5"></textarea></label></p>
  <p><button type="submit">Отправить заявку</button></p>
</form>
<script src="/webshieldpro/forms.js" defer></script>

Поля, подписи и классы — ваши, мы на них не смотрим. Важны три вещи: action, method="post" и скрипт.

Скрипт обязателен. Без forms.js сообщения не принимаются: это он доказывает, что форму заполняли в браузере, и показывает ответ на месте формы. Подключите его на каждой странице, где есть форма.

Имя формы — строчные латинские буквы, цифры, - и _. Если форм несколько — заявка, подписка, отзыв, — дайте им разные имена: сообщения будут лежать раздельно, и у каждой формы будет свой список получателей.

2. Опубликуйте сайт

Загрузите изменённые файлы и нажмите Опубликовать — как обычно. При публикации мы сами найдём форму в HTML и заведём её в карточке сайта, в блоке Формы: со статусом работает и со списком полей из разметки.

Не видите форму в списке? Значит, её строит JavaScript (React, Vue и другие одностраничные приложения), и в опубликованном HTML её нет. Нажмите Добавить форму и впишите то же имя, что в адресе.

3. Укажите, кому слать письма

Раскройте форму в блоке Формы, раздел Получатели на почту. Адрес вашей учётной записи уже там. Добавьте ящик менеджера или общий sales@ — на него придёт письмо со ссылкой для подтверждения. Пока адрес не подтверждён, заявки на него не уходят: так форму нельзя превратить в рассылку на чужие ящики.

Почту настраивать не нужно: письма отправляем мы со своего адреса, SPF и DKIM вашего домена они не касаются.

4. Решите, что увидит посетитель

По умолчанию форма сменяется надписью «Спасибо! Сообщение отправлено.» в стилях вашего сайта. Текст или страницу можно заменить своими:

<!-- свой текст -->
<form action="/webshieldpro/forms/contact" method="post"
      data-success="Получили! Перезвоним в течение рабочего дня.">

Своя страница «Спасибо» — например, ради цели в счётчике аналитики — настраивается в кабинете: опубликуйте на сайте /thanks/ и впишите этот путь в поле Страница после отправки у формы. Остальные варианты, включая собственный блок вместо формы, — в справке Формы на статическом сайте.

5. Если нужны файлы

Резюме, фото, техническое задание — добавьте поле для файла и enctype:

<form action="/webshieldpro/forms/contact" method="post" enctype="multipart/form-data">
  <!-- … поля … -->
  <p><label>Файлы<br><input name="attachment" type="file" multiple></label></p>
  <p><button type="submit">Отправить</button></p>
</form>

До 5 файлов и 25 МБ на сообщение. Исполняемые файлы и документы с макросами мы не принимаем. Вложения скачиваются только из кабинета.

Проверка

1. Откройте опубликованную страницу и отправьте форму. Вместо формы должна появиться надпись об успехе.
2. В кабинете откройте Сообщения — заявка уже там, с именем сайта и формы.
3. Письмо придёт на подтверждённые адреса. Рядом с сообщением в кабинете видно, ушло ли оно на почту.

Если не работает

Симптом	Причина и решение
После отправки страница просит включить JavaScript	На странице нет forms.js или он не загрузился. Проверьте <script src="/webshieldpro/forms.js" defer>.
Сообщение в кабинете есть, письма нет	Получатель ещё не подтвердил адрес — статус ждёт подтверждения. Или форма в статусе незнакомая форма: нажмите Принять форму.
Тестовая заявка попала в Спам	Пометьте её Не спам. Посетитель в таком случае видит отказ, а не «Спасибо», так что настоящий человек о проблеме узнает и не будет ждать ответа.
Форма с файлом отклонена	Файл больше лимита или исполняемый. Проверьте размер и формат.
Поле пришло отдельным блоком Поля вне списка	Его нет в Разрешённых полях формы — так бывает у форм, добавленных вручную. Допишите поле в список.

Что дальше

• Формы на статическом сайте — отправка через fetch, свои блоки ответа, лимиты и сроки хранения.
• Сайт обновляется сам после git push — чтобы правки формы выкатывались сами.
• Форма живёт на вашем собственном сервере? Для неё есть Защита форм.