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

‍

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