Añadir campos personalizados en el formulario de reserva

En el plugin de Mybooking intentamos que el formulario de reserva sea lo más sencillo posible para no desanimar la conversión, como se puede ver en la siguiente imagen.

Sin embargo, para algunas tipologías de negocio, se puede hacer necesario añadir otros campos personalizados como pasa en este caso que vamos a ilustrar.

Lo que vemos es que se han añadido otros campos para recoger la tallas de los cascos de conductor y acompañante.

Lo que hemos hecho para conseguir esto es añadir una funcionalidad que permite incluir un script que contiene el nuevo formulario y que sustituirá al formulario por defecto.

El formulario tiene que mantener los nombres de los campos del formulario original y a cada nuevo campo hay que añadirlo con un formato especifico:

meta[xxx]

A continuación ponemos un ejemplo que daría como resultado el formulario del ejemplo en la versión en castellano.

<script type="text/tmpl" id="script_renting_complete_form_tmpl_es">

  <h4 class="brand-primary customer_component">Información del cliente</h4>
  <div class="mb-form-row customer_component">
    <div class="mb-form-group mb-col-md-6">
      <label for="name">Nombre *</label>
      <input class="mb-form-control" id="customer_name" name="customer_name" type="text"
        placeholder="Nombre*" maxlength="40">
    </div>
    <div class="mb-form-group mb-col-md-6">
      <label for="surname">Apellidos*</label>
      <input class="mb-form-control" id="customer_surname" name="customer_surname" type="text"
        placeholder="Apellidos" maxlength="40">
    </div>
  </div>
  <div class="mb-form-row customer_component">
    <div class="mb-form-group mb-col-md-6">
      <label for="email">Correo electrónico*</label>
      <input class="mb-form-control" id="customer_email" name="customer_email" type="text"
        placeholder="Correo electrónico" maxlength="50">
    </div>
    <div class="mb-form-group mb-col-md-6">
      <label for="confirm_customer_email">Confirmar correo electrónico*</label>
      <input class="mb-form-control" id="confirm_customer_email" name="confirm_customer_email" type="text"
        placeholder="Confirmar correo electrónico" maxlength="50">
    </div>
  </div>
  
  <div class="mb-form-row customer_component">
    <div class="mb-form-group mb-col-md-6">
      <label for="customer_phone">Teléfono principal*</label>
      <input class="mb-form-control" id="customer_phone" name="customer_phone" type="text"
        placeholder="Teléfono principal" maxlength="15">
    </div>
    <div class="mb-form-group mb-col-md-6">
      <label for="customer_phone">Teléfono alternativo</label>
      <input class="mb-form-control" id="customer_mobile_phone" name="customer_mobile_phone" type="text"
        placeholder="Teléfono alternativo" maxlength="15">
    </div>
  </div>

  <h4 class="brand-primary">Escoge el tamaño del casco</h4>
  <div class="mb-form-row">
    <div class="mb-form-group mb-col-md-6">
        <h5>Primer conductor *</h5>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductor]" id="helmetSize1" value="XS" required="" /> <label class="form-check-label" for="helmetSize1"> Casco talla XS </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductor]" id="helmetSize2" value="S" required="" /> <label class="form-check-label" for="helmetSize2"> Casco talla S </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductor]" id="helmetSize3" value="M" required="" /> <label class="form-check-label" for="helmetSize3"> Casco talla M </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductor]" id="helmetSize4" value="L" required="" /> <label class="form-check-label" for="helmetSize4"> Casco talla L </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductor]" id="helmetSize5" value="XL" required="" /> <label class="form-check-label" for="helmetSize5"> Casco talla XL </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductor]" id="helmetSize6" value="XXL" required="" /> <label class="form-check-label" for="helmetSize6"> Casco talla XXL </label></div>
    </div>
    <div class="mb-form-group mb-col-md-6">
        <h5>Acompañante</h5>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductorAdicional]" id="helmetSizeA1" value="XS" /> <label class="form-check-label" for="helmetSizeA1"> Casco talla XS </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductorAdicional]" id="helmetSizeA2" value="S" /> <label class="form-check-label" for="helmetSizeA2"> Casco talla S </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductorAdicional]" id="helmetSizeA3" value="M" /> <label class="form-check-label" for="helmetSizeA3"> Casco talla M </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductorAdicional]" id="helmetSizeA4" value="L" /> <label class="form-check-label" for="helmetSizeA4"> Casco talla L </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductorAdicional]" id="helmetSizeA5" value="XL" /> <label class="form-check-label" for="helmetSizeA5"> Casco talla XL </label></div>
        <div class="mb-form-check"><input class="mb-form-check-input" type="radio" name="meta[cascoConductorAdicional]" id="helmetSizeA6" value="XXL" /> <label class="form-check-label" for="helmetSizeA6"> Casco talla XXL </label></div>
    </div>
  </div>

  <h4 class="brand-primary">Información adicional</h4>
  <div class="mb-form-row">
    <div class="mb-form-group mb-col-md-12">
      <label for="comments">Comentarios</label>
      <textarea name="comments" id="comments" placeholder="Comentarios"
        style="width: 100%; height: 100px; padding: 0.8rem;"></textarea>
    </div>
  </div>

  <div id="payment_detail"></div>

</script>

Tras hacer esto lo que sucederá es que estos datos llegarán a la API de Mybooking y se podrán consultar en el programa desde la pagina de la reserva en una pestaña llamada Datos personalizados