レイアウトフィールド内のタブ順序を変更する方法

はじめに

レイアウトフィールドを使用しており、タブの順序を変更したいですか？デフォルトでは、このフィールドのタブシーケンスは、右側のフィールドに移動する前に、すべての左側のフィールドを順番に進みます。簡単な数ステップで、JavaScriptスニペットを使用してタブ順序を簡単にカスタマイズする方法を説明します。始めましょう！

フォームの作成

まず、レイアウトフィールドを使用して新しいフォームを作成します。これについてサポートが必要な場合は、こちらの便利なドキュメントをご覧ください。

このドキュメントの目的のために、名前、メールアドレス、電話番号、およびその他のいくつかのフィールドをレイアウトフィールド内に配置しました。

スニペットの追加

フォームが作成されたら、このスニペットをサイトに追加する必要があります。

スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

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

このスニペットは、ID番号でフォームの各要素を見つけ、tabIndexを割り当てるため、フォーム全体をタブで移動すると、スニペットで定義した順序で表示されます。

フォームの各フィールドについて、フィールドIDとtabIndexを更新する必要があります。フィールドIDを見つけるには、こちらのドキュメントを確認してください。

これで、レイアウトフィールド内のフィールドのタブ順序を設定するために必要なすべてが完了しました。フォームの特定の質問に回答されるまで、レイアウトフィールドを非表示にできるようにしたいですか？レイアウトフィールドの表示または非表示方法に関するチュートリアルをご覧ください。

関連

アクション参照: wpforms_wp_footer_end