Como Alterar a Ordem das Abas Dentro do Campo Layout

Introdução

Está a usar o campo Layout e gostaria de alterar a ordem de tabulação? Por defeito, 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 alguns passos simples, demonstraremos como personalizar a ordem de tabulação sem esforço usando um trecho de JavaScript. Vamos começar!

Criação do formulário

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

Para efeitos desta documentação, adicionámos os campos Nome, Email, Telefone e alguns outros dentro do nosso campo Layout.

Adição do trecho de código

Depois de o formulário ser criado, terá de 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 de ID e atribuirá um tabIndex para que, ao tabular pelo formulário, ele apareça na ordem que definiu no trecho.

Terá de atualizar cada ID de campo e tabIndex para cada campo no seu formulário. Para encontrar o ID do seu campo, reveja esta documentação.

E é tudo o que 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 no seu formulário seja respondida? Dê uma vista de olhos ao nosso tutorial sobre Como Mostrar ou Ocultar um Campo de Layout.

Relacionado

Referência de Ação: wpforms_wp_footer_end