How to deactivate the first option of an input select in Webflow

Why deactivate the first option of an input in Webflow?

1. Force the user to make a conscious choice

By disabling the first option, which can be an instruction like “Please select an option”, you are forcing the user to make an explicit choice rather than leaving a default value submitted. This ensures that the user does not miss the selection stage.

2. Avoid Accidental Submissions

A default option could be submitted accidentally if the user is not paying attention. By disabling this first option, you reduce the risk of erroneous or incomplete submissions.

3. Guide the user and increase your conversion rate

This improves the user experience by providing a clear indication that the user should select an option from those offered. This can reduce confusion and increase the quality of the data submitted.

‍

What do I do in Webflow?

1. Add this custom code to your 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. Add the “select-id” ID to your select

‍

3. Publish and test the result

Bonus: If you have multiple selects

1. Use this 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>

‍

You can add as many selects as you want, just add

disableFirstOption (“select-id”);

By updating the ID with the ID of your new select

‍