Movendo Automaticamente para a Próxima Página em Formulários de Múltiplas Páginas

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

Este guia mostrará como avançar automaticamente seus formulários de várias páginas com base nas seleções do usuário.

Criando a Estrutura do Seu Formulário

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

Para este tutorial, estamos criando um formulário de folha de brindes, haverá três campos de Múltipla Escolha usando 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, revise nosso guia sobre criação de formulários de várias páginas.

Adicionando o CSS de Avanço Automático

Como queremos que o formulário avance para a próxima página automaticamente com base em qualquer seleção, adicionaremos CSS para ocultar os botões Avançar neste formulário. Para conseguir isso, 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, confira nosso guia sobre como encontrar IDs de formulário e campo.

Adicionando o JavaScript de Avanço Automático

Em seguida, adicione este trecho de código para habilitar o avanço automático de página. Se precisar de ajuda para adicionar trechos de código, revise nosso tutorial sobre adição de trechos de código.

O script funciona visando seu formulário específico usando 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 Avançar quando uma seleção é feita.

Opções de Personalização

Você pode modificar essa funcionalidade para segmentar 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);

Usando com Popups do Elementor

Se o seu formulário estiver dentro de um popup do Elementor, use 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 é isso! Agora você pode avançar para a próxima página automaticamente com base na resposta do campo do seu formulário. Em seguida, você gostaria de aprender a pular páginas inteiras com base nas respostas do usuário? Confira nosso tutorial sobre pular quebras de página ao usar lógica condicional para mais detalhes.

Artigo de Referência

wpforms_wp_footer_end