Форма заявки, яка не губить заявок

Що вийде

<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>

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

Ще рецепти