InicioDocPersonalización del formulario completar datos del módulo de alquiler/alojamiento

Personalización del formulario completar datos del módulo de alquiler/alojamiento

La personalización del formulario completar datos es uno de los temas más solicitados por nuestros clientes y para las agencias con las que colaboramos. Para poder personalizar el formulario es necesario tener un mínimo de conocimiento de WordPress, cómo instalar un plugin, y de HTML, aunque puedes copiar a adaptar los ejemplos que tenemos disponibles.

Tanto en el plugin como en el tema incluimos la versión mínima que recomendamos solicitando sólo el nombre del cliente, una dirección de correo electrónico y un teléfono de contacto. Es lo que se necesita para contactar con el cliente. Clientes de diversos sectores quieren capturar más información durante el proceso de venta. Datos de facturación para emitir directamente la factura del cobro realizado, datos de los conductores, …

Formulario completar datos estándar del plugin Mybooking Reservation Engine
Formulario completar datos estándar del tema Mybooking

Permitimos dos formas de personalizar los campos del formulario. Extendiendo el tema mediante un child theme y sobreescribiendo las plantillas correspondientes o bien utilizando un plugin que nos permita insertar código HTML en una página de de WordPress. En este artículo vamos a detallar la segunda opción, ya que es la más sencilla y permite resolver la situación sin tener que hacer un desarrollo ni maquetación.

Instalación del plugin para añadir fragmentos HTML

Por nuestra experiencia recomendamos instalar el plugin Header Footer Code Manager que permite de forma fácil añadir un fragmento de HTML que se añadirá en el pie de página de la página completar datos, aquella en la que hemos insertado el shortcode mybooking_rent_engine_complete.

[mybooking_rent_engine_complete]

Crear el fragmento de código

Utilizando el plugin instalado añadiremos un nuevo fragmento de código. Seleccionaremos el tipo HTML que se se visualice en el pie de página de completar datos y que se mostrará en todos los dispositivos.

add-fragmento-codigo
Añadir un nuevo fragmento de código

Fragmento de código

Tenemos compartido un proyecto en Github con ejemplos de formularios con los campos más solicitados, tanto el plugin como para nuestro tema. Tenemos ambos ejemplos porque el marcaje de clases CSS que usamos en uno u otro es diferente. Aquí mostramos un ejemplo para el plugin de reemplazar el campo de teléfono alternativo por el número de plazas requeridas. Puedes verlo en las líneas 34-45.

<script type="text/tmpl" id="script_renting_complete_form_tmpl_es">
  <h3 class="mb-section_title complete-section-title">Información del cliente</h3>
  <div class="mb-form-row">
    <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" required>
    </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" required>
    </div>
  </div>
  <div class="mb-form-row">
    <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" required>
    </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" required>
    </div>
  </div>
  <div class="mb-form-row">
    <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" required>
    </div>

    <div class="mb-form-group mb-col-md-6">
      <label for="number_of_adults">Número de plazas *</label>
      <select name="number_of_adults" id="number_of_adults" class="mb-form-control" style="margin-top: 0" required>
        <option value=""></option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>        
      </select>
    </div>  

  </div>

  <h3 class="mb-section_title complete-section-title">Información adicional</h3>
  <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>
  <!-- Reservation : payment -->
  <div id="payment_detail"></div>

</script>

Resultado

Si abrimos la página web y llevamos a cabo el proceso de reserva en el último paso podremos ver el formulario personalizado.

Formulario completar personalizado con el número de plazas

Otros ejemplos

Pueden añadirse infinidad de campos que están documentados en el proyecto ejemplo y que detallaremos a continuación. Todos aquellos que forman parte de la ficha de la reserva o contrato. A continuación mostramos un ejemplo de un formulario personalizado a las necesidades de la mayoría de empresas de alquiler de vehículos.

formulario-completar-personalizado-2
Formulario personalizado con DNI, fecha de nacimiento y dirección del cliente

Arriba