Come Modificare l'Ordine delle Schede all'Interno del Campo Layout

Introduzione

Stai usando il campo Layout e desideri modificare l'ordine di tabulazione? Per impostazione predefinita, la sequenza di tabulazione per questo campo attraversa tutti i campi sul lato sinistro prima di passare a quelli sul lato destro. In pochi semplici passaggi, ti mostreremo come personalizzare l'ordine di tabulazione senza sforzo utilizzando uno snippet JavaScript. Iniziamo!

Creazione del modulo

Per iniziare, creeremo un nuovo modulo utilizzando il campo Layout. Se hai bisogno di assistenza, dai un'occhiata a questa utile documentazione.

Ai fini di questa documentazione, abbiamo aggiunto i campi Nome, Email, Telefono e alcuni altri campi all'interno del nostro campo Layout.

Aggiunta dello snippet

Una volta creato il modulo, dovrai aggiungere questo snippet al tuo sito.

Se hai bisogno di assistenza su come e dove aggiungere snippet al tuo sito, visita questo 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 );

Questo snippet troverà ogni elemento del modulo tramite il numero ID e assegnerà un tabIndex in modo che, durante la tabulazione nel modulo, appaia nell'ordine definito nello snippet.

Dovrai aggiornare ogni ID di campo e tabIndex per ogni campo nel tuo modulo. Per trovare l'ID del tuo campo, esamina questa documentazione.

E questo è tutto ciò che ti serve per impostare l'ordine di tabulazione dei campi all'interno del tuo campo Layout. Vorresti poter nascondere un campo Layout finché non viene risposta una particolare domanda nel tuo modulo? Dai un'occhiata al nostro tutorial su Come mostrare o nascondere un campo Layout.

Correlati

Riferimento Azione: wpforms_wp_footer_end