Como Alterar a Ordem das Abas Dentro do Campo Layout

Introdução

Você está usando o campo Layout e gostaria de alterar a ordem de tabulação? Por padrão, a sequência de tabulação para este campo percorre todos os campos do lado esquerdo antes de passar para os do lado direito. Em apenas algumas etapas simples, demonstraremos como personalizar a ordem de tabulação sem esforço usando um trecho de JavaScript. Vamos começar!

Criando o formulário

Para começar, criaremos um novo formulário usando o campo Layout. Se precisar de ajuda com isso, consulte esta documentação útil.

Para fins desta documentação, adicionamos os campos Nome, Email, Telefone e alguns outros dentro do nosso campo Layout.

Adicionando o snippet

Depois que o formulário for criado, você precisará adicionar este trecho ao seu site.

Se precisar de ajuda sobre como e onde adicionar trechos ao seu site, visite 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 trecho encontrará cada elemento do formulário pelo número ID e atribuirá um tabIndex para que, ao tabular pelo formulário, ele apareça na ordem que você definiu no trecho.

Você precisará atualizar cada ID de campo e tabIndex para cada campo em seu formulário. Para encontrar o ID do seu campo, revise esta documentação.

E é tudo o que você precisa para definir a ordem de tabulação dos campos dentro do seu campo Layout. Gostaria de poder ocultar um campo Layout até que uma pergunta específica em seu formulário seja respondida? Dê uma olhada em nosso tutorial sobre Como Mostrar ou Ocultar um Campo de Layout.

Relacionado

Referência de Ação: wpforms_wp_footer_end