Cómo cambiar el orden de tabulación dentro del campo de diseño

Introducción

¿Estás usando el campo de Diseño y te gustaría cambiar el orden de tabulación? Por defecto, la secuencia de tabulación para este campo recorre todos los campos del lado izquierdo antes de pasar a los del lado derecho. En unos sencillos pasos, te mostraremos cómo personalizar el orden de tabulación sin esfuerzo utilizando un fragmento de JavaScript. ¡Empecemos!

Creación del formulario

Para empezar, crearemos un nuevo formulario usando el campo de Diseño. Si necesitas ayuda con esto, consulta esta útil documentación.

Para el propósito de esta documentación, hemos añadido los campos Nombre, Email, Teléfono y algunos otros dentro de nuestro campo de Diseño.

Añadir el fragmento

Una vez creado el formulario, necesitarás añadir este fragmento a tu sitio.

Si necesitas ayuda sobre cómo y dónde añadir fragmentos a tu sitio, visita este tutorial.

/**
* Change tab order inside layout field
*
* @link https://wpforms.com/developers/how-to-change-the-tab-order-inside-the-layout-field/
*/

function wpf_dev_change_layout_field_tab_order( ) {
?>
 
<script type="text/javascript">
 
    jQuery(function($){
 
		// form ID 2771 and field ID 10 - name field
        document.getElementById("wpforms-2771-field_10").tabIndex = 1;
		// form ID 2771 and field ID 27 - email field
		document.getElementById("wpforms-2771-field_27").tabIndex = 2;
		// form ID 2771 and field ID 26 - phone field
		document.getElementById("wpforms-2771-field_26").tabIndex = 3;
		// form ID 2771 and field ID 43 - dedicated to field
		document.getElementById("wpforms-2771-field_43").tabIndex = 4;
		// form ID 2771 and field ID 30 - book delivery left field
		document.getElementById("wpforms-2771-field_30").tabIndex = 5;
		// form ID 2771 and field ID 36 - book delivery right field
		document.getElementById("wpforms-2771-field_36").tabIndex = 6;
		
    });
 
    </script>
 
<?php
}
 
add_action( 'wpforms_wp_footer_end', 'wpf_dev_change_layout_field_tab_order', 30 );

Este fragmento encontrará cada elemento del formulario por su número de ID y asignará un tabIndex para que, al tabular por el formulario, aparezca en el orden que has definido en el fragmento.

Necesitarás actualizar el ID de cada campo y el tabIndex para cada campo de tu formulario. Para encontrar el ID de tu campo, revisa esta documentación.

Y eso es todo lo que necesitas para establecer el orden de tabulación de los campos dentro de tu campo de Diseño. ¿Te gustaría poder ocultar un campo de Diseño hasta que se responda a una pregunta concreta de tu formulario? Echa un vistazo a nuestro tutorial sobre Cómo mostrar u ocultar un campo de diseño.

Relacionado

Referencia de acción: wpforms_wp_footer_end