A request form that never loses an entry

What you get

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

Step by step

1. An ordinary form block

   The form, the success message and the error message sit in one wrapper, the way Webflow exports a form block. No extra mark on the form: the theme finds it by itself.

   <div class="booking__form w-form">

2. A class for its own recipients

   By default, every form of the site goes to the “All forms” profile. To give this form its own addresses and messages, give it a class and add a profile with the .booking-form selector in the admin.

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

3. Stable field keys

   wp-field on the “label + field” wrapper: in the entry and the email template the field is called name, even if its label in the design changes.

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

4. Messages next to the form

   The .w-form-done and .w-form-fail blocks come right after <form>, inside the same wrapper. Their text is for the design: on the site the message from the form settings replaces it.

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

What matters

• An entry is saved in the admin even before email is set up, so none is lost.
• If the message in the form settings is empty, the theme shows the standard “Your message has been sent!” in the site’s language.

Common mistakes

The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.

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

Attributes in this recipe

More recipes