Modificar el formulario de la reserva

En el paso de Completar la reserva (check-out) en el proceso de reserva se inserta un formulario básico que solicita únicamente los datos de contacto del cliente, sin embargo algunos clientes prefieren un formulario más completo para poder agilizar su operativa.

Es posible extender el formulario básico usando un plugin para WordPress y añadiendo los campos extra necesarios mediante código HTML muy sencillo.

Para extender el formulario nececesitarás lo siguiente:

• El plugin gratuito Head Footer Code Manager (incluido en MybookingCloud)
• El código HTML personalizado para el formulario

1. Preparar el plugin
2. Crear el código
3. Añadir el código
4. Traducir el formulario

Preparar el plugin HFCM

Si tu web está instalada en un proveedor externo deberás instalar el plugin como cualquier otro. Entra en tu WordPress y desde el dashboard o escritorio ves a Plugins > Añadir nuevo. en la caja de bçusqueda escribe el nombre del plugin y haz clic en el botón [Instalar]. Cuando finalice la instalación clica en [Activar] para completar el proceso.

En los sitios web alojados en MybookingCloud el plugin Head Footer Code Manager está instalado y activo por lo que solo necesitas crear tu código personalizado e insertarlo en el plugin.

Crear el código personalizado

Para crear un formulario personalizado debes escribir el código que genera los campos extra y se conecta con el API de Mybooking. Para ello puedes descargar e instalar el editor gratuito Visual Studio Code.

1. Abre el editor de código y pega el siguiente código en él:

<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-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>
  <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="tel"
        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="tel" 
      placeholder="Teléfono alternativo" maxlength="15">
    </div>
  </div>
  
  <!-- CODIGO PERSONALIZADO -->

  <!-- Reservation : payment -->
  <div id="payment_detail"></div>

</script>

2. Sustituye la sección <— CÓDIGO PERSONALIZADO —> por los campos HTML que deseas añadir
3. Selecciona todo el código y añádelo a tu web con el plugin HFCM

Añadir un código personalizado con HFCM

Una vez tienes tu código personalizado ahora puedes añadirlo a tu web mediante el plugin Head Footer Code Manager.

1. Entra en el escritorio de tu sitio web y dirígete a HFCM > Añadir nuevo
2. Dale un nombre al nuevo fragmento de código, como por ejemplo Formulario Completar ES
3. En Visualización en el sitio escoge la opción Páginas específicas
4. En la nueva sección Listado de páginas que aparece escoge la página donde está el checkout
5. En la sección Fragmento de código/Código pega tu código personalizado y guarda los cambios

Traducir el formulario

Si estás trabajando en un sitio multilingüe tendrás que crear una versión del formulario para cada idioma que haya en el sitio web.

1. En el editor de código, duplica el código que creaste para el español y renómbralo para reflejar el nuevo idioma
2. En la cabecera del código sustituye la primera linea por la correspondiente al idioma que vas a traducir:

<-- Castellano -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_es">
<-- Catalán -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_ca">
<-- Inglés -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_en">
<-- Alemán -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_de">
<-- Francés -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_fr">
<-- Italiano -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_it">
<-- Ruso -->
<script type="text/tmpl" id="script_renting_complete_form_tmpl_ru">

3. Ahora debes traducir los textos que se encuentran entre las etiquetas <label></label> y entre las comillas de placeholder=" "

En los idiomas como el catalán, el francés, el inglés y el italiano, los apóstrofes deben remplazarse por su entidad HTML o el formulario no funcionará:

<-- 
La siguiente linea fallará
-->
<label>Customer's adress</label>

<-- 
Debes sustituir ' por &#39;
-->
<label>Customer&#39;s adress</label>

Preguntas frecuentes

He personalizado mi formulario pero no funciona ¿Qué puedo hacer?

Si después de guardar los cambios de tu formulario personalizado este se sigue mostrando con los campos por defecto, puedes probar algunas de las siguientes acciones:

• Comprueba que has asignado el fragmento de código a la página correcta
• Revisa que el fragmento está activado en HFCM > Todos los fragmentos de código
• Asegúrate de que la cabecera del idioma es la adecuada
• Borra la cache de tu navegador pulsando las teclas CTRL y R simultaneamente

Si nada de esto funciona contacta con soporte@mybooking.es.

He traducido mi formulario pero sigue saliendo el básico ¿Que sucede?

Revisa tu código y asegúrate de que no has dejado ninguna ' sin remplazar

Ya no salen las opciones de pagar y solicitar ¿Cómo lo arreglo?

Es posible que falte el módulo de pago en tu código. Comprueba que tu código finaliza con las siguientes líneas:

<!-- Reservation : payment -->
  <div id="payment_detail"></div>

</script>