Siete interessati a creare un modulo di valutazione condizionale che utilizzi i menu a discesa? Con l'addonSurvey and Polls, siete già attrezzati per generare un modulo che raccoglie le opinioni dei visitatori e permette loro di votare su vari aspetti.
Tuttavia, per i nostri scopi di documentazione, intendiamo progettare un modulo che consenta agli utenti di assegnare priorità alle funzionalità in base a valori numerici. Dato il sistema numerico per la definizione delle priorità, è essenziale evitare la duplicazione dei numeri di priorità per le diverse caratteristiche scelte dai nostri visitatori.
In questa esercitazione, costruiremo il nostro modulo di valutazione utilizzando un breve frammento di codice che elimina un numero di priorità se è già stato selezionato. In questo modo, potremo prendere decisioni utili in base alle priorità espresse dai nostri clienti.
Creazione del modulo
Iniziamo creando un nuovo modulo e integrando i campi necessari. Il nostro modulo sarà composto da un campo Nome, un campo Email opzionale e cinque campi a tendina, ognuno dei quali presenterà caratteristiche di valutazione.
Per assistenza nell'impostazione del modulo, consultate questa utile guida alla creazione del modulo iniziale.
Impostazione delle opzioni del campo a discesa
Ora, per i nostri campi a discesa, dovremo esaminare ciascuno di essi e aggiungere il nostro sistema di valutazione. Ai fini di questa documentazione, le valutazioni sono numeriche, da 1 a 10, il che significa che 1 è l'opzione meno gradita e 10 è la più alta.
Naturalmente, è possibile utilizzare il sistema più adatto alle proprie esigenze, che sia numerico o testuale.
Selezione dello stile del menu a tendina
Nella scheda Avanzate del campo a discesa, ricordarsi di selezionare lo stile Classico per i campi. È molto importante, perché lo snippet funzionerà solo con questo stile.
Creazione della logica di valutazione condizionale
Ora è il momento di aggiungere lo snippet al vostro sito. Se avete bisogno di assistenza su dove e come aggiungere gli snippet al vostro sito, consultate questo 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 );
Questo frammento di codice esegue la scansione dei campi a discesa all'interno del modulo identificato dall'ID 2552. Una volta scelta un'opzione da uno dei campi, quella particolare opzione diventerà non disponibile per la selezione nei campi rimanenti.
Assicurarsi di aggiornare l'ID del campo 2552 in modo che corrisponda all'ID del modulo. Se avete bisogno di assistenza per individuare il vostro ID, consultate questo tutorial per trovare questi ID specifici.
A questo punto, man mano che le opzioni vengono selezionate, si noterà che vengono disattivate negli altri campi.
Ed ecco fatto! Avete creato con successo un modulo di valutazione condizionale utilizzando i campi a discesa di WPForms. Volete nascondere in modo condizionato il pulsante di invio in base alle risposte fornite nel modulo? Consultate il nostro tutorial su Come mostrare in modo condizionato il pulsante di invio.
Azione di riferimento
FAQ
D: Come posso reimpostare le opzioni?
R: Se l'utente cambia idea su una qualsiasi opzione, può semplicemente tornare indietro ed effettuare nuove selezioni, azzerando così i valori preselezionati.
D: È possibile utilizzare la logica condizionale per mostrare e nascondere il menu a tendina?
R: Assolutamente! È possibile utilizzare la logica condizionale di WPForms per nascondere tutti i menu a tendina finché non viene effettuata una selezione. Dovrete assicurarvi che quando aggiungete questa logica, verifichiate e testate la logica necessaria per applicare, ad esempio, la caratteristica 2 è nascosta finché la caratteristica 1 non è -Seleziona uno-.
