Gostaria que seus formulários de várias páginas avançassem automaticamente quando os usuários fizessem seleções? Com um simples snippet de código, você pode criar uma experiência de formulário mais suave, passando automaticamente para a próxima página quando os usuários selecionarem suas respostas. Esse aprimoramento reduz os cliques e torna o preenchimento de seus formulários mais intuitivo.
Este guia mostrará como avançar automaticamente os formulários de várias páginas com base nas seleções do usuário.
Criação da estrutura do formulário
Primeiro, você precisará de um formulário de várias páginas com campos de formulário e quebras de página.
Para os fins deste tutorial, estamos criando um formulário de folha de brindes. Haverá três campos de múltipla escolha usando opções 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 nosso guia sobre a criação de formulários de várias páginas.
Adição do CSS Auto-Advance
Como queremos que o formulário passe automaticamente para a próxima página com base em qualquer seleção, adicionaremos CSS para ocultar os botões Next nesse formulário. Para isso, copie este CSS em seu site.
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
Lembre-se de substituir 1000 com o ID do seu formulário. Se precisar de ajuda para encontrar o ID do formulário, consulte nosso guia sobre Como localizar IDs de formulários e campos.
Adição do JavaScript Auto-Advance
Em seguida, adicione este snippet de código para ativar o avanço automático da página. Se precisar de ajuda para adicionar trechos de código, consulte nosso tutorial sobre como adicionar trechos de código.
O script funciona direcionando seu formulário específico usando o ID do formulário (substitua 1000 com sua ID), ouvindo cliques nas entradas do Image Choice e acionando o Próximo clique automaticamente quando uma seleção é feita.
Opções de personalização
Você pode modificar essa funcionalidade para direcionar 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 somente quando "Yes" é 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 Elementor Popups
Se seu formulário estiver dentro de um pop-up do Elementor, use essa versão modificada:
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 passar para a próxima página automaticamente com base na resposta ao campo do formulário. Em seguida, gostaria de saber como ignorar páginas inteiras com base nas respostas do usuário? Confira nosso tutorial sobre como ignorar quebras de página ao usar a lógica condicional para obter mais detalhes.