Avançar Automaticamente para a Próxima Página em Formulários de Várias Páginas

Gostaria que os seus formulários de várias páginas avançassem automaticamente quando os utilizadores fizessem seleções? Com um simples excerto de código, pode criar uma experiência de formulário mais fluida, avançando automaticamente para a página seguinte quando os utilizadores selecionam as suas respostas. Esta melhoria reduz os cliques e torna os seus formulários mais intuitivos de preencher.

Este guia irá mostrar-lhe como avançar automaticamente os seus formulários de várias páginas com base nas seleções do utilizador.

Criação da Estrutura do Seu Formulário

Primeiro, precisará de um formulário de várias páginas com campos de formulário e quebras de página.

Para efeitos deste tutorial, estamos a criar um formulário de folha de brindes, haverá três campos de Escolha Múltipla utilizando Escolhas de Imagem. Cada seleção incluirá uma Quebra de Página.

Se precisar de ajuda para criar um formulário de várias páginas, consulte o nosso guia sobre criação de formulários de várias páginas.

Adicionar o CSS de Avanço Automático

Como queremos que o formulário avance para a página seguinte automaticamente com base em qualquer seleção, vamos adicionar CSS para ocultar os botões Seguinte neste formulário. Para conseguir isto, copie este CSS para o seu site.

form#wpforms-form-1000 button.wpforms-page-button {
    visibility: hidden;
}

Lembre-se de substituir 1000 pelo ID do seu formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso guia sobre como encontrar IDs de formulários e campos.

Adicionar o JavaScript de Avanço Automático

Em seguida, adicione este excerto de código para ativar o avanço automático de página. Se precisar de ajuda para adicionar excertos de código, consulte o nosso tutorial sobre adicionar excertos de código.

O script funciona tendo como alvo o seu formulário específico utilizando o ID do formulário (substitua 1000 pelo seu ID), ouvindo cliques em entradas de Escolha de Imagem e acionando automaticamente o clique no botão Seguinte quando uma seleção é feita.

Opções de Personalização

Pode modificar esta funcionalidade para ter como alvo perguntas específicas ajustando o seletor jQuery, adicionar condições para quando avançar ou redirecionar para páginas diferentes com base nas respostas.

Aqui está um exemplo que avança apenas quando "Sim" é selecionado:

function wpf_dev_conditional_next_page() {
    ?>
    <script type="text/javascript">
    jQuery(function() {
        jQuery( "ul#wpforms-1000-field_25 li input" ).click(function() {
            if (jQuery(this).val() === "Yes")
                jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
            else
                location.assign( "https://myexamplesite.com/home" );
        });
    });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 30);

Utilizar com Popups Elementor

Se o seu formulário estiver dentro de um popup Elementor, utilize esta versão modificada em vez disso:

function wpf_dev_automatic_next_page_elementor_popup() {
    ?>
    <script type="text/javascript">
    jQuery( document ).on( 'elementor/popup/show', function( event, popup ) {
        jQuery( "form#wpforms-form-3241 ul.wpforms-image-choices input" ).click(function() {
            jQuery(this).closest( '.wpforms-page' ).find( '.wpforms-page-next' ).click();
        });
    });
    </script>
    <?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_automatic_next_page_elementor_popup', 30);

E é tudo! Agora pode avançar para a página seguinte automaticamente com base na resposta ao seu campo de formulário. Em seguida, gostaria de aprender a saltar páginas inteiras com base nas respostas dos utilizadores? Consulte o nosso tutorial sobre saltar quebras de página ao usar lógica condicional para mais detalhes.

Artigo de Referência

wpforms_wp_footer_end