### [Comment afficher conditionnellement le bouton de soumission](https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/) **Publié le :** 17 février 2021 **Auteur :** Umair Majeed **Extrait :** Ce tutoriel vous montrera comment afficher conditionnellement le bouton de soumission en fonction des réponses à vos questions de formulaire. **Contenu :** Voulez-vous afficher ou masquer automatiquement le bouton de soumission en fonction des réponses aux champs de votre formulaire ? Avec un simple extrait de code, vous pouvez contrôler la visibilité du bouton de soumission de votre formulaire à l'aide de la logique conditionnelle. Ce guide montre comment ajouter un extrait de code et configurer la logique conditionnelle pour contrôler la visibilité de votre bouton de soumission. ## Configuration du formulaire Pour commencer, ouvrez le constructeur de formulaire en [créant un nouveau formulaire](https://wpforms.com/docs/creating-first-form/) ou en modifiant un formulaire existant. Pour cet exemple, nous allons créer un formulaire de don avec un champ à choix multiples proposant des options Oui/Non. Tous les autres champs supplémentaires du formulaire ne seront révélés que si **Oui** est sélectionné à l'aide de la logique conditionnelle. Le bouton de soumission apparaîtra uniquement lorsque **Oui** sera sélectionné, et les utilisateurs seront redirigés vers une page de remerciement si **Non** est sélectionné. **Remarque :** Notez l'ID de votre formulaire, car vous en aurez besoin lors de l'ajout de l'extrait de code. Si vous avez besoin d'aide pour trouver ces ID, consultez notre guide sur [comment trouver les ID de formulaire et de champ](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). ### Configuration de la logique conditionnelle Avant d'ajouter le code du bouton de soumission, nous devons configurer la logique conditionnelle pour les autres champs de votre formulaire. Ces champs doivent rester masqués jusqu'à ce que l'utilisateur sélectionne « Oui » dans le champ à choix multiples. Pour ce faire, ouvrez les paramètres de chaque champ et configurez la logique conditionnelle pour afficher le champ lorsque votre champ à choix multiples est égal à **Oui**. Cela garantit que ces champs restent masqués par défaut et n'apparaissent que lorsque nécessaire. **Remarque :** Si vous avez besoin d'aide pour comprendre le fonctionnement de la logique conditionnelle dans WPForms, veuillez consulter notre [guide détaillé sur la logique conditionnelle](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/). ## Création de la page de remerciement Étant donné que notre formulaire offre aux utilisateurs un choix Oui/Non, nous voulons offrir une bonne expérience même lorsque « Non » est sélectionné. Au lieu de simplement masquer le bouton de soumission, nous redirigerons les utilisateurs vers une page de remerciement dédiée. Pour ce faire, créez une nouvelle page dans WordPress et nommez-la **Remerciements** (ou tout autre nom de votre choix). C'est là que les utilisateurs qui sélectionnent « Non » seront automatiquement redirigés. Notez le chemin d'URL de la page, car vous en aurez besoin pour la redirection dans notre extrait de code. ## Ajout de l'extrait de code L'extrait de code suivant contrôlera la visibilité de votre bouton de soumission en fonction des réponses du formulaire : Ce script utilise d'abord CSS pour masquer le bouton de soumission lors du chargement initial de la page. Ensuite, il configure un écouteur d'événements JavaScript qui surveille les modifications apportées aux options du champ à choix multiples de votre formulaire. Lorsqu'un utilisateur sélectionne « Oui », le script ajoute une classe CSS qui rend le bouton de soumission visible. S'il sélectionne « Non », le script le redirige automatiquement vers votre page de remerciement. **Remarque :** Si vous avez besoin d'aide pour ajouter des extraits de code à votre site, veuillez consulter notre tutoriel sur [l'ajout d'extraits de code](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/) en toute sécurité. ## Personnalisation du code Vous devrez personnaliser plusieurs valeurs clés dans l'extrait de code pour votre formulaire spécifique : - Aux **lignes 12** et **16**, localisez le sélecteur CSS `#wpforms-form-1000` et remplacez `1000` par l'ID réel de votre formulaire. - À la **ligne 30**, dans le sélecteur jQuery `form#wpforms-form-1000`, remplacez `1000` par l'ID de votre formulaire une fois de plus. - À la **ligne 33**, vous trouverez le chemin d'URL de redirection `/thank-you`. Mettez-le à jour pour qu'il corresponde au chemin d'URL réel de votre page de remerciement. - Par exemple, si vous avez nommé votre page « Merci », vous la changeriez en `/merci`. ## Test de votre implémentation Une fois que vous avez ajouté et personnalisé l'extrait de code, il est essentiel de tester minutieusement la fonctionnalité : - Commencez par charger votre formulaire et vérifiez que le bouton **Soumettre** est masqué par défaut. - Ensuite, sélectionnez **Non** dans votre formulaire et confirmez que vous êtes immédiatement redirigé vers votre page de remerciement. - Testez ensuite le chemin « Oui » : sélectionnez **Oui** et vérifiez que non seulement le bouton de soumission apparaît, mais que tous vos champs masqués conditionnellement deviennent également visibles. - Enfin, complétez et soumettez le formulaire avec **Oui** sélectionné pour vous assurer que l'ensemble du processus fonctionne comme prévu. - ## Foire aux questions #### Q : Cela peut-il être utilisé pour un champ de texte sur une seule ligne ? R : Absolument ! Voici un extrait de code qui fonctionne avec un champ de texte sur une seule ligne. ``` /** * Afficher conditionnellement le bouton de soumission * * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/ */ add_action( 'wp_head', function () { ?> **Catégories :** Extension **Tags :** Javascript, JS, PHP ---