Campos de formulario

Referencia de campos para el formulario Completar del proceso de reserva

Cómo usar este código
Nombre y apellidos
Email de contacto
Teléfono
Nombre del conductor
Dirección del conductor
DNI o Pasaporte
Licencia de conducir
Datos del vuelo de llegada
Datos del vuelo de regreso
Numero de personas
Alojamiento en destino
Número de matrícula
Ejemplos

Cómo usar este código

Puedes usar los fragmentos de código que presentamos a continuación para construir formularios personalizados para el paso Completar del proceso de reservas de Mybooking.

Los fragmentos sepueden usar tanto para implementarlo en un sitio web hecho con el tema oficial de Mybooking, como en uno que solo incluya el plugin Mybooking Reservation Engine, siempre que tengas en cuante lo siguiente:

En el tema las clases CSS son las de Bootstrap. En el plugin van precedidas del prefijo mb-
Puedes controlar el ancho de columna que quieras usando las clases col-md-* o mb-col-md-*
No modifique los ID de los campos
El atributo required es opcional ;P

Ten en cuenta que el código a insertar dependerá del contexto en el que estés desarrollando:
– Plantilla o tema de Mybooking -> usa el primer bloque
– Tema de terceros o propio – usa el código para el plugin

Consulta este árticulo para más información sobre cómo implementar formularios personalizados.

Nombre y apellidos

Nombre *

Apellidos *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="name">Nombre *</label>
    <input class="form-control" id="customer_name" name="customer_name" type="text"
      placeholder="Nombre*" maxlength="40" required>
  </div>
  <div class="form-group col-md-6">
    <label for="surname">Apellidos *</label>
    <input class="form-control" id="customer_surname" name="customer_surname" type="text"
      placeholder="Apellidos" maxlength="40" required>
  </div>
</div>

Código para el plugin

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

Email de contacto

Correo electrónico *

Confirmar correo electrónico *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="email">Correo electrónico *</label>
    <input class="form-control" id="customer_email" name="customer_email" type="text"
      placeholder="Correo electrónico" maxlength="50" required>
  </div>
  <div class="form-group col-md-6">
    <label for="confirm_customer_email">Confirmar correo electrónico *</label>
    <input class="form-control" id="confirm_customer_email" name="confirm_customer_email" type="text"
      placeholder="Confirmar correo electrónico" maxlength="50" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group 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>

Teléfono

Teléfono principal *

Teléfono alternativo *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="customer_phone">Teléfono principal *</label>
    <input class="form-control" id="customer_phone" name="customer_phone" type="text"
      placeholder="Teléfono principal" maxlength="15" required>
  </div>
  <div class="form-group col-md-6">
    <label for="customer_mobile_phone">Teléfono alternativo *</label>
    <input class="form-control" id="customer_mobile_phone" name="customer_mobile_phone" type="text" 
    placeholder="Teléfono alternativo" maxlength="15">
  </div>
</div>

Código para el plugin

<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="customer_mobile_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>

Nombre del conductor

Nombre *

Apellidos *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="driver_name">Nombre *</label>
    <input class="form-control" id="driver_name" name="driver_name" type="text" 
    placeholder="Nombre" maxlength="40" required>
  </div>
  <div class="form-group col-md-6">
    <label for="driver_surname">Apellidos *</label>
    <input class="form-control" id="driver_surname" name="driver_surname" type="text" 
    placeholder="Apellidos" maxlength="40" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_name">Nombre *</label>
    <input class="mb-form-control" id="driver_name" name="driver_name" type="text" 
    placeholder="Nombre" maxlength="40" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_surname">Apellidos *</label>
    <input class="mb-form-control" id="driver_surname" name="driver_surname" type="text" 
    placeholder="Apellidos" maxlength="40" required>
  </div>
</div>

Dirección del conductor

Dirección *

Número *

Complemento

Ciudad *

Provincia *

Código Postal *

País *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="street">Dirección *</label>
    <input class="form-control" id="street" name="street" type="text" maxlength="60" placeholder="Calle" required>
  </div>
  <div class="form-group col-md-2">
    <label for="number">Número *</label>
    <input class="form-control" id="complement" name="number" type="text" maxlength="10" placeholder="Número" required>
  </div>
  <div class="form-group col-md-4">
    <label for="complement">Complemento</label>
    <input class="form-control" id="complement" name="complement" type="text" maxlength="20" placeholder="Piso / Puerta">
  </div>
  <div class="form-group col-md-6">
    <label for="city">Ciudad *</label>
    <input class="form-control" id="city" name="city" type="text" maxlength="50" placeholder="Ciudad" required>
  </div>
  <div class="form-group col-md-6">
    <label for="state">Provincia *</label>
    <input class="form-control" id="state" name="state" type="text" maxlength="50" placeholder="Provincia" required>
  </div>
  <div class="form-group col-md-6">
    <label for="state">Código Postal *</label>
    <input class="form-control" id="state" name="state" type="text" maxlength="10" placeholder="Código Postal" required>
  </div>
  <div class="form-group col-md-6">
    <label class="full-width" for="country">País *</label>
    <select name="country" id="country" class="form-control mt-0" required>
    </select>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="street">Dirección *</label>
    <input class="mb-form-control" id="street" name="street" type="text" maxlength="60" placeholder="Calle" required>
  </div>
  <div class="mb-form-group mb-col-md-2">
    <label for="number">Número *</label>
    <input class="mb-form-control" id="complement" name="number" type="text" maxlength="10" placeholder="Número" required>
  </div>
  <div class="mb-form-group mb-col-md-4">
    <label for="complement">Complemento</label>
    <input class="mb-form-control" id="complement" name="complement" type="text" maxlength="20" placeholder="Piso / Puerta">
  </div>
</div>
<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="city">Ciudad *</label>
    <input class="mb-form-control" id="city" name="city" type="text" maxlength="50" placeholder="Ciudad" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="state">Provincia *</label>
    <input class="mb-form-control" id="state" name="state" type="text" maxlength="50" placeholder="Provincia" required>
  </div>
</div>
<div class="mb-form-row">
  <div class="form-group mb-col-md-6">
    <label for="state">Código Postal *</label>
    <input class="mb-form-control" id="state" name="state" type="text" maxlength="10" placeholder="Código Postal" required>
  </div>
  <div class="form-group mb-col-md-6">
    <label class="full-width" for="country">País *</label>
    <select name="country" id="country" class="mb-form-control" required>
    </select>
  </div>
</div>

DNI o Pasaporte

DNI/NIF/Pasaporte *

Fecha expedición *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="driver_document_id">DNI/NIF/Pasaporte *</label>
    <input class="form-control" id="driver_document_id" name="driver_document_id" type="text" 
    placeholder="DNI/NIF/Pasaporte" maxlength="50" required>
  </div>
  <div class="form-group col-md-6">
    <label for="driver_document_id_date">Fecha expedición *</label>
    <div class="custom-date-form">
      <div class="custom-date-item">
        <select name="driver_document_id_date_day" id="driver_document_id_date_day" class="form-control" required></select>
      </div>
      <div class="custom-date-item">
        <select name="driver_document_id_date_month" id="driver_document_id_date_month" class="form-control" required></select>
      </div>
      <div class="custom-date-item">
        <select name="driver_document_id_date_year" id="driver_document_id_date_year" class="form-control" required></select>
      </div>
    </div>
    <input type="hidden" name="driver_document_id_date" id="driver_document_id_date" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_document_id">DNI/NIF/Pasaporte *</label>
    <input class="mb-form-control" id="driver_document_id" name="driver_document_id" type="text" 
           placeholder="DNI/NIF/Pasaporte" maxlength="50" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_document_id_date">Fecha expedición *</label>
    <div class="mb-form-row mb-custom-date-form">
      <div class="mb-custom-date-item">
        <select name="driver_document_id_date_day" id="driver_document_id_date_day" class="mb-form-control" required></select>
      </div>
      <div class="mb-custom-date-item">
        <select name="driver_document_id_date_month" id="driver_document_id_date_month" class="mb-form-control" required></select>
      </div>
      <div class="mb-custom-date-item">
        <select name="driver_document_id_date_year" id="driver_document_id_date_year" class="mb-form-control" required></select>
      </div>
    </div>
    <input type="hidden" name="driver_document_id_date" id="driver_document_id_date" required>
  </div>
</div>

Licencia de conducir

Número permiso conducir *

Fecha expedición de la licencia *

País de expedición *

Fecha de nacimiento *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="driver_driving_license_number">Número permiso conducir *</label>
    <input class="form-control" id="driver_driving_license_number" name="driver_driving_license_number" type="text" 
    placeholder="Número permiso conducir" maxlength="50" required>
  </div>
  <div class="form-group col-md-6">
    <label for="driver_driving_license_date">Fecha expedición de la licencia *</label>
    <div class="custom-date-form">
      <div class="custom-date-item">
        <select name="driver_driving_license_date_day" id="driver_driving_license_date_day" class="form-control" required></select>
      </div>
      <div class="custom-date-item">
        <select name="driver_driving_license_date_month" id="driver_driving_license_date_month" class="form-control" required></select>
      </div>
      <div class="custom-date-item">
        <select name="driver_driving_license_date_year" id="driver_driving_license_date_year" class="form-control" required></select>
      </div>
    </div>
    <input type="hidden" name="driver_driving_license_date" id="driver_driving_license_date" required>
  </div>
</div>
<div class="form-row">
  <div class="form-group col-md-6">
    <label class="full-width" for="driver_driving_license_country">País de expedición *</label>
    <select name="driver_driving_license_country" id="driver_driving_license_country" class="form-control mt-0" required>
    </select>
  </div>
  <div class="form-group col-md-6">
    <label for="driver_date_of_birth">Fecha de nacimiento *</label>
    <div class="custom-date-form">
      <div class="custom-date-item">
        <select name="driver_date_of_birth_day" id="driver_date_of_birth_day" class="form-control" required></select>
      </div>
      <div class="custom-date-item">
        <select name="driver_date_of_birth_month" id="driver_date_of_birth_month" class="form-control" required></select>
      </div>
      <div class="custom-date-item">
        <select name="driver_date_of_birth_year" id="driver_date_of_birth_year" class="form-control" required></select>
      </div>
    </div>
    <input type="hidden" name="driver_date_of_birth" id="driver_date_of_birth">
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_driving_license_number">Número permiso conducir *</label>
    <input class="mb-form-control" id="driver_driving_license_number" name="driver_driving_license_number" type="text" 
    placeholder="Número permiso conducir" maxlength="50" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_driving_license_date">Fecha expedición de la licencia *</label>
    <div class="mb-custom-date-form">
      <div class="mb-custom-date-item">
        <select name="driver_driving_license_date_day" id="driver_driving_license_date_day" class="mb-form-control" required></select>
      </div>
      <div class="mb-custom-date-item">
        <select name="driver_driving_license_date_month" id="driver_driving_license_date_month" class="mb-form-control" required></select>
      </div>
      <div class="mb-custom-date-item">
        <select name="driver_driving_license_date_year" id="driver_driving_license_date_year" class="mb-form-control" required></select>
      </div>
    </div>
    <input type="hidden" name="driver_driving_license_date" id="driver_driving_license_date" required>
  </div>
</div>
<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_driving_license_country">País expedición *</label>
      <select name="driver_driving_license_country" id="driver_driving_license_country" class="mb-form-control mt-0 select2-hidden-accessible" 
      required tabindex="-1" aria-hidden="true">
      </select>
      <span class="select2 select2-container select2-container--bootstrap4 select2-container--below" dir="ltr" style="width: 100%;"></span>
      <span class="dropdown-wrapper" aria-hidden="true"></span>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="driver_date_of_birth">Fecha de nacimiento *</label>
    <div class="mb-custom-date-form">
      <div class="mb-custom-date-item">
        <select name="driver_date_of_birth_day" id="driver_date_of_birth_day" class="mb-form-control" required></select>
      </div>
      <div class="mb-custom-date-item">
        <select name="driver_date_of_birth_month" id="driver_date_of_birth_month" class="mb-form-control" required></select>
      </div>
      <div class="mb-custom-date-item">
        <select name="driver_date_of_birth_year" id="driver_date_of_birth_year" class="mb-form-control" required></select>
      </div>
    </div>
    <input type="hidden" name="driver_date_of_birth" id="driver_date_of_birth">
  </div>
</div>

Datos del vuelo de llegada

Aeropuerto de origen

Compañia

Número de vuelo

Hora prevista de llegada

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="fligth_airport_origin">Aeropuerto de origen</label>
    <input class="form-control" id="fligth_airport_origin" name="fligth_airport_origin" type="text" placeholder="Aeropuerto de destino" maxlength="80" required>
  </div>
  <div class="form-group col-lg-6">
    <label for="flight_company">Compañia</label>
    <input class="form-control" id="flight_company" name="flight_company" type="text" placeholder="Compañia" maxlength="80" required>
  </div>
  <div class="form-group col-lg-6">
    <label for="flight_number">Número de vuelo</label>
    <input class="form-control" id="flight_number" name="flight_number" type="text" placeholder="Número de vuelo" maxlength="10" required>
  </div>
  <div class="form-group col-lg-6">
    <label for="flight_time">Hora prevista de llegada</label>
    <input class="form-control" id="flight_time" name="flight_time" type="text" placeholder="Hora prevista" maxlength="5" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="form-group col-md-6">
    <label for="fligth_airport_origin">Aeropuerto de destino</label>
    <input class="form-control" id="fligth_airport_origin" name="fligth_airport_origin" type="text" placeholder="Aeropuerto de destino" maxlength="80" required>
  </div>
  <div class="mb-form-group mb-col-lg-4">
    <label for="flight_company">Compañia</label>
    <input class="mb-form-control" id="flight_company" name="flight_company" type="text" placeholder="Compañia" maxlength="80" required>
  </div>
  <div class="mb-form-group mb-col-lg-4">
    <label for="flight_number">Número de vuelo</label>
    <input class="mb-form-control" id="flight_number" name="flight_number" type="text" placeholder="Número de vuelo" maxlength="10" required>
  </div>
  <div class="mb-form-group mb-col-lg-4">
    <label for="flight_time">Hora prevista de llegada</label>
    <input class="mb-form-control" id="flight_time" name="flight_time" type="text" placeholder="Hora prevista" maxlength="5" required>
  </div>
</div>

Datos del vuelo de regreso

Aeropuerto de destino

Compañia de regreso

Número de vuelo de regreso

Hora prevista de regreso

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-6">
    <label for="fligth_airport_destination">Aeropuerto de destino</label>
    <input class="form-control" id="fligth_airport_destination" name="fligth_airport_destination" type="text" placeholder="Aeropuerto de destino" maxlength="80" required>
  </div>
  <div class="form-group col-md-6">
    <label for="flight_company_departure">Compañia de regreso</label>
    <input class="form-control" id="flight_company_departure" name="flight_company_departure" type="text" placeholder="Compañia de regreso" maxlength="80" required>
  </div>
  <div class="form-group col-md-6">
    <label for="flight_number_departure">Número de vuelo de regreso</label>
    <input class="form-control" id="flight_number_departure" name="flight_number_departure" type="text" placeholder="Número de vuelo de regreso" maxlength="10" required>
  </div>
  <div class="form-group col-md-6">
    <label for="flight_time_departure">Hora prevista de regreso</label>
    <input class="form-control" id="flight_time_departure" name="flight_time_departure" type="text" placeholder="Hora prevista de regreso" maxlength="5" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-6">
    <label for="fligth_airport_destination">Aeropuerto de destino</label>
    <input class="mb-form-control" id="fligth_airport_destination" name="fligth_airport_destination" type="text" placeholder="Aeropuerto de destino" maxlength="80" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="flight_company_departure">Compañia de regreso</label>
    <input class="mb-form-control" id="flight_company_departure" name="flight_company_departure" type="text" placeholder="Compañia de regreso" maxlength="80" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="flight_number_departure">Número de vuelo de regreso</label>
    <input class="mb-form-control" id="flight_number_departure" name="flight_number_departure" type="text" placeholder="Número de vuelo de regreso" maxlength="10" required>
  </div>
  <div class="mb-form-group mb-col-md-6">
    <label for="flight_time_departure">Hora prevista de regreso</label>
    <input class="mb-form-control" id="flight_time_departure" name="flight_time_departure" type="text" placeholder="Hora prevista de regreso" maxlength="5" required>
  </div>
</div>

Numero de personas

Número de personas *

Código para Mybooking Theme

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

Código para el plugin

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

Alojamiento en destino

Alojamiento en destino *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-12">
    <label for="destination_accommodation">Alojamiento en destino *</label>
    <input type="text"  class="form-control" id="destination_accommodation" name="destination_accommodation" 
    placeholder="Alojamiento en destino" maxlength="80" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-12">
    <label for="destination_accommodation">Alojamiento en destino *</label>
    <input type="text"  class="mb-form-control" id="destination_accommodation" name="destination_accommodation" 
    placeholder="Alojamiento en destino" maxlength="80" required>
  </div>
</div>

Número de matrícula

Matrícula del vehículo *

Código para Mybooking Theme

<div class="form-row">
  <div class="form-group col-md-12">
    <label for="customer_stock_plate">Matrícula del vehículo *</label>
    <input class="form-control" id="customer_stock_plate" name="customer_stock_plate" type="text" placeholder="Número de matrícula" maxlength="15" required>
  </div>
</div>

Código para el plugin

<div class="mb-form-row">
  <div class="mb-form-group mb-col-md-12">
    <label for="customer_stock_plate">Matrícula del vehículo *</label>
    <input class="mb-form-control" id="customer_stock_plate" name="customer_stock_plate" type="text" placeholder="Número de matrícula" maxlength="15" required>
  </div>
</div>

Ejemplos

El formulario a continuación, añade el campo DNI y reemplaza el campo de teléfono alternativo por el de Número de plazas.

Mybooking Theme

Usa este fragmento de código si estás usando Mybooking Reservation Engine junto con Mybooking Theme o has implementado alguna de nuestras plantillas pre-diseñadas.

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

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

    <div class="form-group col-md-6">
      <label for="number_of_adults">Número de plazas *</label>
      <select name="number_of_adults" id="number_of_adults" class="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="section_title complete-section-title">Información adicional</h3>
  <div class="form-row">
    <div class="form-group 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>

Código para Mybooking Plugin

Usa este fragmento si estás usando Mybooking Reservation Engine en un tema de terceros, como por ejemplo Astra, Divi o Generate Press.

<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-4">
      <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-4">
      <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 class="mb-form-group mb-col-md-4">
      <label for="driver_document_id">DNI/NIF/Pasaporte *</label>
	  <input class="form-control" id="driver_document_id" name="driver_document_id" type="text" 
      placeholder="DNI/NIF/Pasaporte" maxlength="50" 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

Más ejemplos de formularios ->

Mybooking | Listado de campos de formulario

Cómo usar este código

Nombre y apellidos

Email de contacto

Teléfono

Nombre del conductor

Dirección del conductor

DNI o Pasaporte

Licencia de conducir

Datos del vuelo de llegada

Datos del vuelo de regreso

Numero de personas

Alojamiento en destino

Número de matrícula

Ejemplos

Mybooking Theme

Código para Mybooking Plugin

Soporte

Developer