Mybooking | Listado de 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 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

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

Nombre y apellidos

Nombre *

Apellidos *

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

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

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

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

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

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

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

<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="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 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 class="mb-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="mb-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 *

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

<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="custom-date-form">
      <div class="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="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="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 *

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

<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="custom-date-form">
      <div class="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="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="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 class="w-100" 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="custom-date-form">
      <div class="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="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="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

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

<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

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

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

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

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

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

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

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

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