Un formulario de solicitud que no pierde ninguna

Qué obtienes

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

Paso a paso

1. Un bloque de formulario normal

   El formulario, el mensaje de éxito y el mensaje de error están en un mismo contenedor, tal como Webflow exporta un bloque de formulario. No hace falta marcar el formulario aparte: el tema lo encuentra solo.

   <div class="booking__form w-form">

2. Una clase para destinatarios propios

   Por defecto, todos los formularios del sitio van al perfil «All forms». Para que este formulario tenga sus propias direcciones y sus propios mensajes, dale una clase y crea en el panel un perfil con el selector .booking-form.

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

3. Claves de campo fijas

   wp-field en el contenedor «etiqueta + campo»: en la solicitud y en la plantilla del correo, el campo se llamará name, aunque su etiqueta cambie en el diseño.

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

4. Los mensajes, junto al formulario

   Los bloques .w-form-done y .w-form-fail van justo después de <form>, dentro del mismo contenedor. Su texto es para el diseño: en el sitio lo reemplaza el mensaje de los ajustes del formulario.

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

Lo importante

• La solicitud se guarda en el panel aunque el correo aún no esté configurado: no se pierde ninguna.
• Si el mensaje está vacío en los ajustes del formulario, el tema muestra el mensaje estándar «Your message has been sent!» en el idioma del sitio.

Errores frecuentes

El registro de la generación es la pestaña «Registros» de tu proyecto en themeforge.pro; la revisión gratuita del marcado muestra los mismos avisos.

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

Atributos de esta receta

Más recetas