Формы на статическом сайте

Как подключить

Направьте форму на адрес /webshieldpro/forms/<имя> вашего сайта. Например:

<form action="/webshieldpro/forms/contact" method="post">
  <p><label>Имя<br><input name="name" required></label></p>
  <p><label>Электронная почта<br><input name="email" type="email" required></label></p>
  <p><label>Сообщение<br><textarea name="message" rows="5" required></textarea></label></p>
  <p><button type="submit">Отправить</button></p>
</form>
<script src="/webshieldpro/forms.js" defer></script>

Этого достаточно: форма берёт оформление вашего сайта, а <script> отвечает за защиту от спама и ответ на месте формы. Поля и подписи настраиваете на ваше усмотрение, важны только action и method="post".

При публикации мы сами находим такие формы в HTML и заводим их в карточке сайта, в блоке Формы. Поля из разметки становятся списком разрешённых.

Правила именования: строчные латинские буквы, цифры, - и _, до 64 символов, регистрозависимые.

Зачем подключать forms.js

Скрипт forms.js необязателен. Форма работает и без скрипта: сообщения принимаются, письма уходят. Скрипт делает две вещи — показывает ответ прямо на странице и отсеивает спам.

Ответ на месте формы. Без скрипта после отправки открывается наша страница «Спасибо» — аккуратная, но чужая вашему сайту. Со скриптом страница никуда не уходит: форма сменяется сообщением, которое оформлено стилями сайта (классы ws-form-success и ws-form-error). Как настроить текст, свой блок или свою страницу — в разделе «Что увидит посетитель».

Уведомления на почту

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

Сообщения в любом случае сохраняются в личном кабинете, их всегда можно там посмотреть.

Сайт на React, Vue и других SPA

Форму, которую вы создаете через JavaScript, мы в HTML нет. Есть два пути:

• добавить форму в карточке сайта вручную — кнопка Добавить форму, имя то же, что в адресе;
• или просто отправить первое сообщение. Форма появится со статусом незнакомая форма, сообщения сохранятся, но на почту не уйдут, пока вы не нажмёте Принять форму.

Отправка через fetch поддерживается — попросите JSON, и вместо страницы «Спасибо» придёт ответ {"ok": true}:

const body = new URLSearchParams(new FormData(form));
// Служебные поля от forms.js, если скрипт подключён.
for (const [key, value] of Object.entries(window.wsForms?.fields() ?? {})) body.set(key, value);
await fetch("/webshieldpro/forms/contact", {
  method: "POST",
  headers: { Accept: "application/json" },
  body,
});

Что увидит посетитель

По умолчанию всё зависит от того, подключён ли forms.js:

• со скриптом форма на странице сменяется сообщением «Спасибо! Сообщение отправлено.», а при ошибке над кнопкой появляется подсказка;
• без скрипта открывается наша страница «Спасибо» со ссылкой обратно на страницу с формой.

Всё это настраивается:

Что хотите	Где настроить	Нужен forms.js
Отправить на свою страницу	поле Страница после отправки в личном кабинете	нет
Поменять текст сообщения	атрибуты data-success и data-error у формы	да
Показать свой блок вместо формы	элемент с атрибутом data-ws-success	да
Обычный переход без сообщения	атрибут data-ws-submit="page" у формы	да

Страница после отправки

Самый простой способ сохранить оформление сайта — сделать на нём страницу «Спасибо» и отправлять посетителя туда.

1. Опубликуйте на сайте страницу, например /thanks/.
2. Откройте Сайты → Управление нужного сайта, в блоке Формы раскройте форму.
3. Впишите путь в поле Страница после отправки и нажмите Сохранить.

Посетитель попадёт на эту страницу и со скриптом, и без. Указывается только путь на этом же сайте: /thanks/ подойдёт, https://example.com/thanks/ — нет. Пустое поле возвращает поведение по умолчанию. Если страница задана, текст из data-success не показывается — посетитель уходит на неё.

Текст сообщения: data-success и data-error

Атрибуты ставятся прямо на <form>:

<form action="/webshieldpro/forms/contact" method="post"
      data-success="Получили, ответим в течение дня."
      data-error="Что-то пошло не так, напишите нам на hello@example.com.">

• data-success — текст после успешной отправки. Форма прячется, на её месте появляется <p class="ws-form-success"> с этим текстом.
• data-error — текст, если сообщение не приняли. Он появляется над кнопкой в <p class="ws-form-error">, форма остаётся на месте.

Текст вставляется как есть, без HTML: теги покажутся буквами. Внешний вид задайте в стилях сайта через классы ws-form-success и ws-form-error.

Свой блок вместо формы: data-ws-success

Нужно больше, чем строчка текста — заголовок, картинка, ссылки? Сверстайте блок сами, скройте его атрибутом hidden и пометьте data-ws-success:

<form action="/webshieldpro/forms/contact" method="post">
  <!-- поля формы -->
  <div data-ws-success hidden>
    <h3>Спасибо!</h3>
    <p>Пока ждёте ответа — <a href="/blog/">загляните в блог</a>.</p>
  </div>
  <button type="submit">Отправить</button>
</form>

После отправки скрипт спрячет поля и кнопку и покажет этот блок. Блок можно держать и вне формы — тогда в атрибуте укажите имя формы: <div data-ws-success="contact" hidden>, и скрипт спрячет форму целиком.

Обычный переход: data-ws-submit=“page”

Если сообщение на месте не нужно, добавьте форме data-ws-submit="page". Отправка пойдёт обычным переходом — на Страницу после отправки или на нашу страницу «Спасибо».

Файлы в форме

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

<form action="/webshieldpro/forms/contact" method="post" enctype="multipart/form-data">
  <p><label>Имя<br><input name="name" required></label></p>
  <p><label>Файл<br><input name="attachment" type="file" multiple></label></p>
  <p><button type="submit">Отправить</button></p>
</form>
<script src="/webshieldpro/forms.js" defer></script>

Без enctype="multipart/form-data" браузер отправит только имя файла, без содержимого — со скриптом forms.js это не страшно, он отправит файл сам, но атрибут лучше не забывать.

Что важно знать:

• Лимиты: до 10 МБ на файл, до 5 файлов и до 25 МБ на одно сообщение.
• Исполняемые файлы не принимаются — .exe, .msi, .apk, .bat, .jar, документы Office с макросами и подобное.

Ограничения

• Тело формы вместе с файлами — до 27 МБ.
• Число сообщений в месяц зависит от тарифа.
• Сообщения хранятся 90 дней, спам и сообщения в непринятые формы — 14.