Você estaria interessado em criar um formulário de classificação condicional utilizando menus suspensos? Com o complementoSurvey and Polls, você já está equipado para gerar um formulário que coleta as opiniões dos visitantes e permite que eles votem em vários aspectos.
No entanto, para fins de documentação, pretendemos criar um formulário que permita aos usuários priorizar os recursos com base em valores numéricos. Dado o sistema numérico de priorização, é essencial evitar a duplicação de números de prioridade para diferentes recursos escolhidos por nossos visitantes.
Neste tutorial, criaremos nosso formulário de classificação usando um breve trecho de código que elimina um número de prioridade se ele já tiver sido selecionado. Isso garante que possamos tomar decisões criteriosas com base nas prioridades expressas por nossos clientes.
Criando o formulário
Vamos começar estabelecendo um novo formulário e integrando os campos necessários. Nosso formulário consistirá em um campo de Nome, um campo opcional de E-mail e cinco campos suspensos, cada um apresentando recursos para classificação.
Para obter ajuda na configuração de seu formulário, consulte este guia útil sobre como criar seu formulário inicial.
Configuração das opções do campo Dropdown
Agora, para nossos campos suspensos, precisaremos passar por cada um deles e adicionar nosso sistema de classificação. Para fins desta documentação, nossas classificações são baseadas numericamente de 1 a 10, o que significa que 1 é a opção menos favorita e 10 é a mais alta.
Você pode, é claro, usar o sistema que for melhor para você, seja numérico ou de texto.
Selecionando o estilo do menu suspenso
Na guia Advanced (Avançado ) do campo Dropdown, lembre-se de selecionar o estilo Classic para seus campos. Isso é muito importante, pois o snippet só funcionará com esse estilo.
Criação da lógica de classificação condicional
Agora é hora de adicionar o snippet ao seu site. Se precisar de ajuda para saber onde e como adicionar snippets ao seu site, consulte este tutorial.
/**
* WPForms Conditional Rating Form
*
* @link https://wpforms.com/developers/how-to-create-a-conditional-rating-form/
*/
function wpf_dev_conditional_dropdown_options( ) {
?>
<script type="text/javascript">
// only run on dropdown fields inside the form ID 2552
jQuery( 'form#wpforms-form-2552 select' ).on( 'change', function() {
jQuery( 'option' ).prop( 'disabled', false);
jQuery( 'select' ).each(function() {
var val = this.value;
jQuery( 'select' ).not(this).find( 'option' ).filter(function() {
return this.value === val;
}).prop( 'disabled', true);
});
}).change();
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_dropdown_options', 30 );
Esse trecho de código fará a varredura dos campos suspensos no formulário identificado pelo ID 2552. Quando uma opção for escolhida em um dos campos, essa opção específica se tornará indisponível para seleção nos campos restantes.
Certifique-se de atualizar o campo ID 2552 para que corresponda ao ID do seu formulário. Se precisar de ajuda para localizar seu ID, consulte este tutorial sobre como encontrar esses IDs específicos.
Agora, à medida que as opções forem selecionadas, você observará que elas serão desativadas nos outros campos.
E é isso! Você criou com sucesso um formulário de classificação condicional usando os campos suspensos do WPForms. Gostaria de ocultar condicionalmente seu botão de envio com base nas respostas fornecidas em seu formulário? Confira nosso tutorial sobre Como mostrar condicionalmente o botão Enviar.
Ação de referência
PERGUNTAS FREQUENTES
P: Como posso redefinir as opções?
R: Se um usuário mudar de ideia sobre qualquer opção, basta voltar e fazer novas seleções que redefinirão os valores pré-selecionados.
P: A lógica condicional pode ser usada para mostrar e ocultar o menu suspenso?
R: Com certeza! Você pode usar a lógica condicional do WPForms para ocultar todo e qualquer menu suspenso até que uma seleção tenha sido feita. Você precisará se certificar de que, ao adicionar essa lógica, verifique e teste a lógica necessária para aplicar, por exemplo, o Recurso 2 fica oculto desde que o Recurso 1 não seja -Select One-.
