How to Disable the Default Select Placeholder in Elementor Pro Forms

You add a Select field to an Elementor Pro form, mark it Required, and expect visitors to pick something. Instead the dropdown loads with the first real option already selected. People skim the form, leave that field alone, and submit a value they never actually chose. The Required toggle does nothing useful because a value is always present.

I hit this on almost every contact and booking form I build, so I wrote the fix up as a small repo.

Why it happens

An HTML <select> has no native placeholder attribute the way text inputs do. A select always has a selected option, and by default that is the first one in the list. Elementor Pro does not add a placeholder row for you, so the first real choice becomes the default. Marking the field Required only checks that something is selected, and something always is.

The fix

Two steps. First, give the field a real placeholder row. In the Elementor form widget, add the option as placeholder text | with a space after the pipe, so the value is blank. A required select cannot be submitted with a blank value, which restores the point of the Required toggle.

Second, that blank row is still selectable and screen readers still announce it as an option. To hide and disable it, add the CSS class dis-ele-form to the form (Advanced tab, CSS Classes) and run this snippet:

<script>
document.addEventListener('DOMContentLoaded', () => {
    const forms = document.querySelectorAll('.dis-ele-form');

    forms.forEach(form => {
        const selects = form.querySelectorAll('select[required]');

        selects.forEach(select => {
            if (select.options.length > 0 && select.options[0].value.trim() === '') {
                select.options[0].disabled = true;
                select.options[0].hidden = true;
            }
        });
    });
});
</script>

It finds every form with that class, looks at each required select, and if the first option has a blank value it flags that option as disabled and hidden. Now the placeholder shows as the resting state, cannot be picked, and is not read out as a real choice. Reuse the same class on as many forms as you like. To target every Elementor form on the page instead, swap .dis-ele-form for .elementor-form.

Where to put it

I add this through the Code Snippets plugin as a site-wide front-end HTML/JS snippet: Snippets, Add New, paste the block, set it to run everywhere on the front end, and activate. I never touch functions.php for this kind of thing. Code Snippets survives theme and Elementor updates, and I can toggle it off in one click if I ever need to debug. An HTML widget dropped on the page works too if you only need it in one spot.

Still works in 2026

This is plain DOM JavaScript with no dependencies, so it keeps working through Elementor Pro version bumps. If a future release finally ships native select placeholders, you just deactivate the snippet. Nothing to unwind.

The code lives on GitHub: djaysan/elementor-form-disable-select-dropdown-default-placeholder. Stars and forks are welcome, and credit to David Denedo, whose original write-up pointed me at the blank-value approach.

If your Elementor forms are misbehaving in ways a snippet cannot fix, get in touch and I will take a look.