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