Comment modifier l’ordre de tabulation dans le champ Mise en page

Introduction

Vous utilisez le champ Mise en page et souhaitez modifier l’ordre de tabulation ? Par défaut, la séquence de tabulation de ce champ parcourt tous les champs du côté gauche avant de passer à ceux du côté droit. En quelques étapes simples, nous vous montrerons comment personnaliser l’ordre de tabulation sans effort à l’aide d’un extrait de code JavaScript. Commençons !

Création du formulaire

Pour commencer, nous allons créer un nouveau formulaire en utilisant le champ Mise en page. Si vous avez besoin d’aide pour cela, veuillez consulter cette documentation utile.

Pour les besoins de cette documentation, nous avons ajouté les champs Nom, E-mail, Téléphone et quelques autres champs dans notre champ Mise en page.

Ajout du snippet

Une fois le formulaire créé, vous devrez ajouter cet extrait de code à votre site.

Si vous avez besoin d’aide sur comment et où ajouter des extraits de code à votre site, veuillez visiter ce tutoriel.

/**
* 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 );

Cet extrait de code trouvera chaque élément du formulaire par son numéro d’ID et lui attribuera un tabIndex afin que, lors de la tabulation dans le formulaire, il apparaisse dans l’ordre que vous avez défini dans l’extrait de code.

Vous devrez mettre à jour l’ID de chaque champ et le tabIndex pour chaque champ de votre formulaire. Pour trouver l’ID de votre champ, veuillez consulter cette documentation.

Et c’est tout ce dont vous avez besoin pour définir l’ordre de tabulation des champs dans votre champ Mise en page. Souhaitez-vous pouvoir masquer un champ Mise en page jusqu’à ce qu’une question particulière de votre formulaire reçoive une réponse ? Consultez notre tutoriel sur Comment afficher ou masquer un champ de mise en page.

Articles associés

Référence d’action : wpforms_wp_footer_end