Comment créer une visibilité conditionnelle pour des champs de formulaire dans Webflow

Introduction

Pour concevoir des formulaires Webflow interactifs et personnalisés, la visibilité conditionnelle est l'une des fonctionnalités clés à avoir dans votre boîte à outils. Imaginez pouvoir afficher ou masquer des champs de formulaire en fonction des choix de l'utilisateur, créant ainsi une expérience fluide et personnalisée.

Dans cet article, on va vous montrer comment ajouter cette fonctionnalité avancée à votre site. Même si ça peut sembler un peu complexe, ne vous inquiétez pas, on vous guide étape par étape pour intégrer de la visibilité conditionnelle à vos formulaire le plus simplement possible dans Webflow avec un peu de code personnalisé.

Préparez-vous à créer des formulaires interactifs qui réagissent intelligemment aux actions de vos utilisateurs. On commencera par explorer les bases de la visibilité conditionnelle, puis on vous guidera à travers chaque étape, du paramétrage initial dans Webflow jusqu'à l'implémentation du code personnalisé qui fait tout fonctionner. C’est parti !

Principe de visibilité conditionnelle

La visibilité conditionnelle est un principe qui peut s’avérer assez utile dans la conception de formulaires. Elle vous permet de contrôler quels champs de formulaire sont visibles en fonction des actions ou des choix précédents de l’utilisateur. Cette approche dynamique peut améliorer l'expérience utilisateur en simplifiant le formulaire et en le rendant plus complet, seulement si c’est nécessaire.

Pourquoi c’est important ?

Imaginez un formulaire de contact avec des champs qui ne sont pertinents que si l'utilisateur sélectionne une option particulière ou remplit certaines conditions.

Par exemple, vous pourriez avoir un champ "Secteur d’activité" avec plusieurs options, dont une option “Autre”. Si l'utilisateur choisit "Autre", vous souhaiterez peut-être afficher un champ de texte supplémentaire pour qu'il puisse préciser son secteur. En revanche, si l'utilisateur a déjà désigné un secteur d’activité, ce champ de texte supplémentaire est superflu et peut induire en erreur.

C'est typiquement dans ce genre de situation que la visibilité conditionnelle peut être intéressante. Elle vous permet de montrer les éléments pertinents au bon moment, évitant ainsi de la confusion en simplifiant le processus pour l'utilisateur. Cette fonctionnalité est aussi particulièrement utile dans des formulaires plus longs et complexes où la présentation de l’information est cruciale.

Maintenant qu’on comprend l'importance de la visibilité conditionnelle, passons à la section suivante pour apprendre comment l'implémenter dans Webflow.

Préparez votre formulaire dans Webflow

Bon, avant de plonger dans l'ajout de code personnalisé, la première étape pour créer une visibilité conditionnelle efficace dans Webflow consiste à bien préparer votre formulaire. Suivez ces étapes pour vous assurer que tout est en ordre avant d'ajouter la magie du code :

1. Créez votre formulaire dans Webflow :

Si vous n'avez pas encore créé votre formulaire, c'est le moment de le faire. Créez le formulaire et ajoutez lui tous les champs nécessaires (y compris les champs que vous prévoyez de masquer). Si vous avez des champs de sélection, assurez vous de bien ajouter toutes vos options.

2. Paramétrez le formulaire

Chaque champ de formulaire doit avoir un identifiant unique (ID) pour être ciblé via le code personnalisé. Assurez-vous d'attribuer des IDs appropriés à chaque champ. Attribuez aussi un ID au Div Block qui sera affiché ou masqué (l’élément qui contient le champ et son label). Vous en aurez besoin lorsque vous écrirez le code de visibilité conditionnelle.

Une fois que votre formulaire est prêt dans Webflow, vous êtes prêt à passer à l’étape suivante : l'ajout du code personnalisé qui gérera la visibilité conditionnelle des champs. Dans la section suivante, on vous guide donc à travers le processus de codage pour rendre votre formulaire réactif aux choix de l'utilisateur.

Ajoutez le code de visibilité conditionnelle

Maintenant que votre formulaire est prêt dans Webflow, il est temps d'ajouter le code personnalisé qui activera la visibilité conditionnelle de vos champs. Suivez attentivement ces étapes pour intégrer cette fonctionnalité à votre projet :

1. Accédez au code personnalisé de votre page

Depuis le Designer, ouvrez les paramètres de la page contenant le formulaire que vous souhaitez améliorer avec la visibilité conditionnelle, puis descendez jusqu’à l’onglet Custom code.

2. Collez le code de visibilité conditionnelle

Collez le code suivant dans la balise Head :

<script>

// Get the elements 
window.onload = function() {
  var trigger = document.getElementById("trigger");
  var conditional = document.getElementById("conditional");
  var wrapper = document.getElementById("wrapper");
// Hide the wrapper by default
  wrapper.style.display = "none";

// Show the wrapper if the condition is met
  trigger.addEventListener("change", function() {
    if (trigger.value === "show") {
      wrapper.style.display = "block";
      conditional.required = true; 
    } else {
      wrapper.style.display = "none";
      conditional.required = false;
    }
  });
};

</script>

Ce code JavaScript permettra de gérer la visibilité conditionnelle des champs de votre formulaire en fonction des choix de l'utilisateur.

3. Personnalisez le code selon vos besoins

Le code que vous avez collé est une base générale. Vous pouvez maintenant le personnaliser en fonction des IDs de vos champs et des choix spécifiques que vous avez configurés dans votre formulaire.

Voici les modifications à faire :

1. Remplacez “trigger” (1) par l’ID du champ qui gère la visibilité conditionnelle.
2. Remplacez “conditional” (2) par l’ID du champ qui sera affiché ou masqué.
3. Remplacez “wrapper” (3) par l’ID du Div Block qui sera affiché ou masqué (champ + label).
4. Remplacez “show” (4) par la valeur du champ trigger qui déclenchera l’affichage du champ caché.

Seuls ces quatre éléments sont à modifier, comme dans l’exemple suivant (lignes 6, 7, 8, 15) :

Les lignes 7, 17, 20 de l’exemple du dessus sont optionnelles. Elles permettent de rendre le champ obligatoire s’il est affiché mais facultatif s’il est masqué.

4. Publiez votre site Webflow

Une fois que vous avez ajouté le code personnalisé, assurez-vous de publier votre site Webflow pour que les modifications soient effectives (code personnalisé oblige, elle ne le seront pas dans le Designer). N’oubliez pas de tester le formulaire pour vous assurer qu’il n’y a aucune erreur.

Une fois que vous avez suivi ces étapes, votre formulaire Webflow devrait être équipé d'une fonctionnalité de visibilité conditionnelle. Les champs se montreront et se cacheront de manière fluide en fonction des choix de l'utilisateur, offrant ainsi une expérience utilisateur améliorée.

Conclusion

Félicitations, vous avez désormais les outils pour ajouter une visibilité conditionnelle aux formulaires de vos sites Webflow !

Rappelez-vous que la visibilité conditionnelle n'est pas seulement une question de technique, mais aussi de conception. Elle vous permet de créer des formulaires intelligents et réactifs qui s'adaptent aux besoins de vos utilisateurs pour améliorer leur expérience.

Pour aller plus loin, aller découvrir ces autres articles :

• Comment retirer la flèche d'un dropdown select sur webflow ?
• 7 codes personnalisés CSS utiles pour améliorer vos projets Webflow
• La review design de notre portfolio par Ran Segall‍