Résumé IA
Seriez-vous intéressé par la création d'un formulaire d'évaluation conditionnel utilisant des menus déroulants ? Avec le module complémentaire Sondages et enquêtes, vous êtes déjà équipé pour générer un formulaire qui recueille les opinions des visiteurs et leur permet de voter sur divers aspects.
Cependant, à des fins de documentation, nous visons à concevoir un formulaire permettant aux utilisateurs de prioriser les fonctionnalités en fonction de valeurs numériques. Compte tenu du système numérique de priorisation, il est essentiel d'empêcher les numéros de priorité en double pour différentes fonctionnalités choisies par nos visiteurs.
Dans ce tutoriel, nous allons construire notre formulaire d'évaluation à l'aide d'un bref extrait de code qui élimine un numéro de priorité s'il a déjà été sélectionné. Cela garantit que nous pouvons tirer des décisions éclairées des priorités exprimées par nos clients.
Création du formulaire
Commençons par créer un nouveau formulaire et intégrer les champs nécessaires. Notre formulaire comprendra un champ Nom, un champ E-mail facultatif et cinq champs Déroulant, chacun présentant des fonctionnalités à évaluer.
Pour obtenir de l'aide dans la configuration de votre formulaire, n'hésitez pas à consulter ce guide utile sur la création de votre premier formulaire.
Définition des options du champ déroulant
Maintenant, pour nos champs Déroulant, nous devrons passer par chacun d'eux et ajouter notre système d'évaluation. Aux fins de cette documentation, nos évaluations sont basées numériquement sur une échelle de 1 à 10, 1 étant l'option la moins favorite et 10 la plus élevée.
Vous pouvez, bien sûr, utiliser le système qui vous convient le mieux, qu'il soit numérique ou textuel.
Sélection du style du champ déroulant
Dans l'onglet Avancé du champ Déroulant, veuillez vous souvenir de sélectionner le style Classique pour vos champs. Ceci est très important car le snippet ne fonctionnera qu'avec ce style.
Création de la logique d'évaluation conditionnelle
Il est maintenant temps d'ajouter le snippet à votre site. Si vous avez besoin d'aide pour savoir où et comment ajouter des snippets à votre site, veuillez consulter ce tutoriel.
/**
* 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 );
Ce snippet de code analysera les champs Déroulant dans le formulaire identifié par l'ID 2552. Une fois qu'une option est choisie dans l'un des champs, cette option particulière deviendra indisponible pour la sélection dans les champs restants.
Veuillez vous assurer de mettre à jour l'ID de champ 2552 pour qu'il corresponde à l'ID de votre formulaire. Si vous avez besoin d'aide pour localiser votre ID, veuillez vous référer à ce tutoriel sur la recherche de ces ID spécifiques.
Maintenant, à mesure que les options sont sélectionnées, vous les verrez se désactiver dans les autres champs.
Et voilà ! Vous avez créé avec succès un formulaire d'évaluation conditionnel à l'aide des champs Déroulant de WPForms. Souhaitez-vous masquer conditionnellement votre bouton de soumission en fonction des réponses fournies dans votre formulaire ? Consultez notre tutoriel sur Comment afficher conditionnellement le bouton de soumission.
Action de référence
FAQ
Q : Comment puis-je réinitialiser les options ?
R: Si un utilisateur change d'avis sur une option, il lui suffit de revenir en arrière et de faire de nouvelles sélections, ce qui réinitialisera les valeurs présélectionnées.
Q: La logique conditionnelle peut-elle être utilisée pour afficher et masquer la liste déroulante ?
R: Absolument ! Vous pouvez utiliser la logique conditionnelle de WPForms pour masquer toutes les listes déroulantes jusqu'à ce qu'une sélection soit faite. Vous devrez vous assurer que lorsque vous ajoutez cette logique, vous vérifiez et testez la logique nécessaire à appliquer, par exemple la fonctionnalité 2 est masquée tant que la fonctionnalité 1 n'est pas –Sélectionnez une option —.
