Un formulaire de demande qui n’en perd aucune

Ce que vous obtenez

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

Étape par étape

1. Un bloc de formulaire ordinaire

   Le formulaire, le message de réussite et le message d’erreur se trouvent dans un même conteneur : c’est ainsi que Webflow exporte un bloc de formulaire. Inutile de baliser le formulaire à part, le thème le trouve tout seul.

   <div class="booking__form w-form">

2. Une classe pour ses propres destinataires

   Par défaut, tous les formulaires du site vont vers le profil « All forms ». Pour que ce formulaire ait ses propres adresses et ses propres messages, donnez-lui une classe et créez dans l’administration un profil avec le sélecteur .booking-form.

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

3. Des clés de champ stables

   wp-field sur le conteneur « libellé + champ » : dans la demande et dans le modèle d’e-mail, le champ s’appellera name, même si son libellé change dans la maquette.

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

4. Les messages à côté du formulaire

   Les blocs .w-form-done et .w-form-fail se placent juste après <form>, dans le même conteneur. Leur texte sert à la maquette : sur le site, il est remplacé par le message des réglages du formulaire.

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

À retenir

• Une demande est enregistrée dans l’administration même si l’e-mail n’est pas encore configuré : aucune ne se perd.
• Si le message est vide dans les réglages du formulaire, le thème affiche le message standard « Your message has been sent! » dans la langue du site.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

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

Attributs de cette recette

Autres recettes