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

Tools:

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

Author photo
Sandro D.
Updated on
24/6/2024
Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
How to deactivate the first option of an input select in Webflow
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time