So ändern Sie die Tabulatorreihenfolge im Layout-Feld

Einleitung

Verwenden Sie das Layout-Feld und möchten die Tabulatorreihenfolge ändern? Standardmäßig durchläuft die Tabulatorsequenz für dieses Feld zuerst alle Felder auf der linken Seite, bevor sie zu den Feldern auf der rechten Seite wechselt. In nur wenigen einfachen Schritten zeigen wir Ihnen, wie Sie die Tabulatorreihenfolge mühelos mit einem JavaScript-Snippet anpassen. Los geht's!

Erstellung des Formulars

Zuerst erstellen wir ein neues Formular mit dem Layout-Feld. Wenn Sie dabei Hilfe benötigen, sehen Sie sich bitte diese nützliche Dokumentation an.

Für diese Dokumentation haben wir die Felder Name, E-Mail, Telefon und einige andere Felder in unser Layout-Feld eingefügt.

Hinzufügen des Snippets

Sobald das Formular erstellt ist, müssen Sie diesen Codeausschnitt auf Ihrer Website hinzufügen.

Wenn Sie Hilfe benötigen, wie und wo Sie Codeausschnitte zu Ihrer Website hinzufügen können, besuchen Sie bitte dieses 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 );

Dieses Snippet findet jedes Element des Formulars anhand der ID-Nummer und weist einen tabIndex zu, sodass beim Durchlaufen des Formulars mit der Tabulatortaste die Reihenfolge angezeigt wird, die Sie im Snippet definiert haben.

Sie müssen jede Feld-ID und jeden tabIndex für jedes Feld in Ihrem Formular aktualisieren. Um Ihre Feld-ID zu finden, lesen Sie bitte diese Dokumentation.

Und das ist alles, was Sie brauchen, um die Tabulatorreihenfolge der Felder in Ihrem Layout-Feld festzulegen. Möchten Sie ein Layout-Feld ausblenden, bis eine bestimmte Frage in Ihrem Formular beantwortet wurde? Sehen Sie sich unser Tutorial So blenden Sie ein Layout-Feld ein oder aus an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end