Resumo de IA
Você estaria interessado em criar um formulário de classificação condicional utilizando menus suspensos? Com o addon Pesquisas e Enquetes, você já está equipado para gerar um formulário que coleta opiniões de visitantes e permite que eles votem em vários aspectos.
No entanto, para fins de nossa documentação, pretendemos projetar um formulário que permita aos usuários priorizar recursos com base em valores numéricos. Dado o sistema numérico para priorização, é essencial evitar números de prioridade duplicados para diferentes recursos escolhidos por nossos visitantes.
Neste tutorial, construiremos nosso formulário de classificação usando um breve trecho de código que elimina um número de prioridade se ele já foi selecionado. Isso garante que possamos obter decisões perspicazes das prioridades que nossos clientes expressam.
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 Nome, um campo E-mail opcional e cinco campos Suspenso, cada um apresentando recursos para classificação.
Para obter assistência na configuração do seu formulário, sinta-se à vontade para consultar este guia útil sobre como criar seu formulário inicial.
Configurando as opções do campo Suspenso
Agora, para nossos campos Suspenso, 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, significando que 1 é a opção menos favorita e 10 é a mais alta.
Você pode, é claro, usar o sistema que melhor funciona para você, seja ele numérico ou de texto.
Selecionando o Estilo do Suspenso
Na aba Avançado do campo Suspenso, por favor, lembre-se de selecionar o estilo Clássico para seus campos. Isso é muito importante, pois o trecho de código funcionará apenas com este estilo.
Criando a lógica de classificação condicional
É hora de adicionar o trecho de código ao seu site. Se precisar de alguma assistência sobre onde e como adicionar trechos de código ao seu site, por favor, confira 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 );
Este trecho de código verificará os campos Suspenso no formulário identificado pelo ID 2552. Assim que uma opção for escolhida em um dos campos, essa opção específica se tornará indisponível para seleção nos campos restantes.
Por favor, certifique-se de atualizar o ID do campo 2552 para corresponder ao ID do seu formulário. Se precisar de assistência para localizar seu ID, por favor, consulte este tutorial sobre como encontrar esses IDs específicos.
Agora, à medida que as opções são selecionadas, você as observará se tornando desabilitadas nos outros campos.
E é isso! Você criou com sucesso um formulário de classificação condicional usando os campos Suspenso 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 de Envio.
Ação de Referência
Perguntas Frequentes
P: Como posso redefinir as opções?
R: Se um usuário mudar de ideia sobre alguma opção, ele simplesmente voltará e fará novas seleções, o que redefinirá esses 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 qualquer menu suspenso até que uma seleção seja feita. Você precisará garantir 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 –Selecione um —.
