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

outils :

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

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

<!-- disable first dropdown option -->
<script>
    // Get the entire dropdown via ID
    let selectionDropdown = document.getElementById("select-id");
    // Now get its options
    let selectionOptions = selectionDropdown.getElementsByTagName("option");
    // Disable the first one. Make sure that you set the first one as the "read-only" option in the 
    // Webflow-UI
    selectionOptions[0].disabled = true;
</script>

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

3. Publiez et testez le résultat

Bonus : Si vous avez plusieurs select

1. Utilisez ce custom code

<script>
    // Fonction pour désactiver la première option d'un sélecteur donné par son ID
    function disableFirstOption(selectId) {
        let dropdown = document.getElementById(selectId);
        if (dropdown) {
            let options = dropdown.getElementsByTagName("option");
            if (options.length > 0) {
                options[0].disabled = true;
            }
        }
    }

    // Désactiver la première option des sélecteurs "select-id" et "source"
    disableFirstOption("select-id");
    disableFirstOption("source");
</script>

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

disableFirstOption("select-id");

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

Photo de l'auteur
Sandro D.
Mis à jour le
8/10/2024
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
Accueil
>
Gemeos Académie
>
Comment désactiver la première option d'un input select dans Webflow
Illustration croce
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs pratiques

Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail