Gostaria que os seus formulários de várias páginas avançassem automaticamente quando os utilizadores fazem selecções? Com um simples fragmento de código, pode criar uma experiência de formulário mais suave, passando 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 selecções do utilizador.
Criação da estrutura do formulário
Em primeiro lugar, é necessário 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 que utilizam 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 o nosso guia sobre a criação de formulários de várias páginas.
Adicionar o CSS de avanço automático
Uma vez que pretendemos que o formulário passe automaticamente para a página seguinte com base em qualquer seleção, vamos adicionar CSS para ocultar os botões Seguinte neste formulário. Para isso, copie este CSS para o seu site.
form#wpforms-form-1000 button.wpforms-page-button {
visibility: hidden;
}
Não se esqueça de substituir 1000 com o 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.
Adicionando o JavaScript de avanço automático
De seguida, adicione este fragmento de código para ativar o avanço automático da página. Se precisar de ajuda para adicionar snippets de código, consulte o nosso tutorial sobre como adicionar snippets de código.
O script funciona direcionando o seu formulário específico utilizando o ID do formulário (substitua 1000 com o seu ID), ouvindo cliques nas entradas Image Choice e accionando o Seguinte clique automaticamente quando é feita uma seleção.
Opções de personalização
Pode modificar esta 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 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);
Utilização com Elementor Popups
Se o seu formulário estiver dentro de um popup Elementor, utilize esta 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 já está! Agora pode passar automaticamente para a página seguinte com base na resposta ao campo do formulário. A seguir, gostaria de saber como saltar páginas inteiras com base nas respostas do utilizador? Confira nosso tutorial sobre como ignorar quebras de página ao usar lógica condicional para obter mais detalhes.