How to Create a Non-Selectable Item in an Elementor Dropdown Form Field
Tips
17 Nov 2023
5 Min Read
Today, we’re diving into a common challenge faced by many web designers using Elementor Pro: adding a non-selectable item in a dropdown form field. This feature can be incredibly useful for prompts or instructions within the drop-down, enhancing the user experience. Let’s walk through the steps to achieve this, and don’t forget to check out the screenshots for a visual guide!
Elementor is a powerful page builder for WordPress, offering extensive customisation options. However, sometimes we encounter specific needs that require a bit of extra work. One such need is creating a dropdown in a form with the first option being non-selectable, useful for adding instructions or default text like “Please select an option”.
Step 1: Create Your Form in Elementor
First, let’s start by creating a form in Elementor.
Open your WordPress dashboard, navigate to the page you want to edit, and launch Elementor.
Drag the Form widget onto your page.
Add a Select field to your form where you want the dropdown to appear.
*Make sure you add all the options you need for the select drop-down and have the non-clickable option as the first in the list.
Step 2: Finding the Field ID
Once your select field is in place, you need to find its unique field ID. This can usually be seen in the Advanced tab under the field’s settings in Elementor.
Note: The field ID is crucial for specifically targeting the dropdown in our custom code.
*You will have to add ‘form-field’ to the beginning of the ID for this to work, as you can see in the inspect element panel of your browser.
Step 3: Adding Custom jQuery
Now, we’ll use jQuery to disable the first option in the drop-down. For this, you can add a custom HTML element to your page or use a plugin to insert custom scripts. We used an Elementor Pro custom HTML block and added it to the same container as the form.
Replace your-field-id with the actual ID of your selected field and make sure you prepend ‘form-feild’ to the ID – It should look like the below
You may also need to add a jQuery CDN to the html block if you aren’t already using it on the site, here’s the script tag we use:
It should look like this:
If you want to add more non-clickable select options, just add them below the first, like we did here.
Step 4: Testing Your Form
After adding the jQuery script, test your form to ensure that the first option of the select dropdown is disabled.
Remember to clear your cache and check the form in different browsers to ensure compatibility.
And there you have it! You’ve successfully added a non-selectable item to your Elementor drop-down form field. This small tweak can significantly improve the user experience by providing clear instructions or prompts within your forms.We hope this tutorial was helpful. If you have any questions or need further assistance, feel free to reach out. Happy designing!
Similar Topic
