Форма заявки, которая не теряет заявки

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

<section class="booking">
  <h2 fld-text="Booking title">Book a table</h2>
  <div class="booking__form w-form">
    <form class="booking-form" data-name="Booking">
      <label wp-field="name">Your name
        <input type="text" name="field" data-name="Your name" required></label>
      <label wp-field="phone">Phone
        <input type="tel" name="field" data-name="Phone" required></label>
      <label wp-field="guests">Guests
        <select name="field" data-name="Guests"><option>2</option><option>4</option><option>6</option></select></label>
      <input type="submit" class="button" value="Book a table">
    </form>
    <div class="w-form-done"><div>Thank you! We will call you back.</div></div>
    <div class="w-form-fail"><div>Something went wrong. Please call us.</div></div>
  </div>
</section>

Пошагово

1. Обычный блок формы

   Форма, сообщение об успехе и сообщение об ошибке лежат в одной обёртке — так экспортирует блок формы Webflow. Отдельно размечать форму не нужно: тема находит её сама.

   <div class="booking__form w-form">

2. Класс — для своих получателей

   По умолчанию все формы сайта идут в профиль «All forms». Чтобы у этой формы были свои адреса и свои сообщения, дайте ей класс и заведите в админке профиль с селектором .booking-form.

   <form class="booking-form" data-name="Booking">

3. Постоянные ключи полей

   wp-field на обёртке «подпись + поле»: в заявке и в шаблоне письма поле будет называться name, даже если подпись в макете поменяется.

   <label wp-field="name">Your name
     <input type="text" name="field" data-name="Your name" required></label>

4. Сообщения — рядом с формой

   Блоки .w-form-done и .w-form-fail стоят сразу после <form>, внутри той же обёртки. Текст в них — для макета: на сайте его заменит сообщение из настроек формы.

   <div class="w-form-done"><div>Thank you! We will call you back.</div></div>
   <div class="w-form-fail"><div>Something went wrong. Please call us.</div></div>

Что важно

• Заявка сохраняется в админке, даже если почта ещё не настроена, — ни одна не потеряется.
• Если в настройках формы сообщение пустое, тема покажет стандартное «Your message has been sent!» на языке сайта.

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

Журнал сборки — вкладка «Логи» вашего проекта на themeforge.pro; те же замечания показывает бесплатная проверка разметки.

<form class="booking-form" data-name="Booking">
  <input type="submit" value="Book a table">
  <div class="w-form-done">Thank you!</div>
</form>

<form class="booking-form" data-name="Booking">
  <input type="submit" value="Book a table">
</form>
<div class="w-form-done">Thank you!</div>

Атрибуты в рецепте

Ещё рецепты