Design

4 min

Comment désactiver la première option d'un input select dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment et pourquoi désactiver la première option d'un input select dans Webflow.

Avantage	Description
Choix conscient	Empêche la soumission de la valeur par défaut
Meilleure qualité des données	Évite les soumissions accidentelles
UX améliorée	Indique qu'une sélection est requise

Pourquoi désactiver la première option d'un input dans Webflow ?

1. Obliger l'utilisateur à faire un choix conscient

En désactivant la première option, qui peut être une instruction comme "Veuillez sélectionner une option", vous forcez l'utilisateur à faire un choix explicite plutôt que de laisser une valeur par défaut être soumise. Cela assure que l'utilisateur ne passe pas à côté de l'étape de sélection.

2. Éviter les soumissions accidentelles

Une option par défaut pourrait être soumise accidentellement si l'utilisateur ne prête pas attention. En désactivant cette première option, vous réduisez le risque de soumissions erronées ou incomplètes.

3. Guides l'utilisateur et augmenter votre taux de conversion

Cela améliore l'expérience utilisateur en fournissant une indication claire que l'utilisateur doit sélectionner une option parmi celles proposées. Cela peut réduire la confusion et augmenter la qualité des données soumises.

‍

Comment faire dans Webflow ?

1. Ajoutez ce custom code dans votre page

‍

2. Ajoutez l'ID "select-id" à votre select

‍

3. Publiez et testez le résultat

bon à savoir

Alternative sans JavaScript : ajoutez la première option avec la valeur '' (vide) et activez l'attribut required. Le formulaire HTML5 ne se soumettra pas si la valeur est vide, sans code supplémentaire.

Bonus : Si vous avez plusieurs select

1. Utilisez ce custom code

‍

Vous pouvez ajoutez autant de select que souhaité, il vous suffit d'ajouter

‍

bon à savoir

disableFirstOption("select-id");

‍

En mettant à jour l'ID avec l'ID de votre nouveau select