Resumo de IA
Gostaria de criar um formulário de classificação condicional utilizando menus suspensos? Com o complemento Pesquisas e Inquéritos, já está equipado para gerar um formulário que recolhe opiniões dos visitantes e lhes permite votar em vários aspetos.
No entanto, para fins de documentação, pretendemos conceber um formulário que permita aos utilizadores priorizar funcionalidades com base em valores numéricos. Dado o sistema numérico para priorização, é essencial evitar números de prioridade duplicados para diferentes funcionalidades escolhidas pelos nossos visitantes.
Neste tutorial, construiremos o nosso formulário de classificação utilizando um breve trecho de código que elimina um número de prioridade se este já tiver sido selecionado. Isto garante que podemos obter decisões perspicazes das prioridades que os nossos clientes expressam.
Criação do formulário
Vamos começar por estabelecer um novo formulário e integrar os campos necessários. O nosso formulário consistirá num campo Nome, um campo Email opcional e cinco campos Suspenso, cada um apresentando funcionalidades 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 o seu formulário inicial.
Definir as opções do campo Suspenso
Agora, para os nossos campos Suspenso, teremos de percorrer cada um deles e adicionar o nosso sistema de classificação. Para efeitos desta documentação, as nossas classificações são baseadas numericamente de 1 a 10, significando que 1 é a opção menos favorita e 10 é a mais alta.
Pode, claro, usar o sistema que melhor lhe convier, seja ele numérico ou de texto.
Selecionar o Estilo do Suspenso
No separador Avançadas do campo Suspenso, lembre-se de selecionar o estilo Clássico para os seus campos. Isto é muito importante, pois o trecho de código funcionará apenas com este estilo.
Criar 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, 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 trecho de código irá verificar os campos Suspenso no formulário identificado pelo ID 2552. Assim que uma opção for escolhida num dos campos, essa opção específica ficará 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 o seu ID, por favor, consulte este tutorial sobre como encontrar estes IDs específicos.
Agora, à medida que as opções são selecionadas, observará que elas ficam desativadas nos outros campos.
E é tudo! Criou com sucesso um formulário de classificação condicional usando os campos Suspenso do WPForms. Gostaria de ocultar condicionalmente o seu botão de envio com base nas respostas fornecidas no seu formulário? Consulte o nosso tutorial sobre Como Mostrar Condicionalmente o Botão de Envio.
Ação de Referência
FAQ
P: Como posso redefinir as opções?
R: Se um utilizador mudar de ideias sobre quaisquer opções, basta regressar e fazer novas seleções, o que irá repor esses valores pré-selecionados.
Q: Pode a Lógica Condicional ser usada para mostrar e ocultar a lista pendente?
R: Absolutamente! Pode usar a Lógica Condicional do WPForms para ocultar todas e quaisquer listas pendentes até que uma seleção seja feita. Terá de garantir que, ao adicionar esta lógica, verifica e testa a lógica necessária para aplicar, por exemplo, a Funcionalidade 2 está oculta desde que a Funcionalidade 1 não esteja – Selecione Uma —.
