Estaria interessado em criar um formulário de classificação condicional utilizando menus pendentes? Com o complementoSurvey and Polls, já está equipado para gerar um formulário que recolhe as opiniões dos visitantes e lhes permite votar em vários aspectos.
No entanto, para efeitos de documentação, pretendemos conceber um formulário que permita aos utilizadores atribuir prioridades às caraterísticas com base em valores numéricos. Dado o sistema numérico de atribuição de prioridades, é essencial evitar a duplicação de números de prioridade para diferentes caraterísticas escolhidas pelos nossos visitantes.
Neste tutorial, vamos construir o nosso formulário de classificação utilizando um breve fragmento de código que elimina um número de prioridade se este já tiver sido selecionado. Isso garante que possamos tomar decisões criteriosas com base nas prioridades expressas por nossos clientes.
Criar o formulário
Vamos começar por criar um novo formulário e integrar os campos necessários. O nosso formulário será composto por um campo Nome, um campo Email opcional e cinco campos Dropdown, cada um apresentando caraterísticas para classificação.
Para obter ajuda na criação do seu formulário, pode consultar este guia útil sobre a criação do seu formulário inicial.
Definir as opções do campo pendente
Agora, para os nossos campos suspensos, precisamos de passar por cada um deles e adicionar o 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.
Pode, naturalmente, utilizar o sistema que melhor lhe convier, quer seja numérico ou de texto.
Selecionar o estilo do menu pendente
No separador Avançadas do campo Dropdown, não se esqueça de selecionar o estilo Clássico para os seus campos. Isso é muito importante, pois o snippet só funcionará com esse estilo.
Criar a 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 );
Este snippet de código procurará campos Dropdown no formulário identificado pelo ID 2552. Quando uma opção é escolhida num dos campos, essa opção específica fica indisponível para seleção nos restantes campos.
Certifique-se de que actualiza o campo ID 2552 para corresponder ao ID do seu formulário. Se precisar de ajuda para localizar o seu ID, consulte este tutorial sobre como encontrar estes IDs específicos.
Agora, à medida que as opções são selecionadas, pode observá-las a ficarem desactivadas nos outros campos.
E é isso! Você criou com sucesso um formulário de classificação condicional usando os campos WPForms Dropdown. Você 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
FAQ
P: Como é que posso repor as opções?
R: Se um utilizador mudar de ideias em relação a qualquer opção, basta voltar atrás e fazer novas selecções, o que reporia os valores pré-selecionados.
P: A lógica condicional pode ser utilizada para mostrar e ocultar o menu pendente?
R: Com certeza! Pode utilizar a lógica condicional do WPForms para ocultar todo e qualquer menu pendente até que seja feita uma seleção. É necessário certificar-se de que, ao adicionar essa lógica, verifique e teste a lógica necessária para aplicar, por exemplo, o Recurso 2 está oculto desde que o Recurso 1 não seja -Selecione um -.
