We all have used the contact form 7 WordPress plugin which is one of the most popular plugins to add forms in any WordPress website, and there are a lot of other plugins which are made around it to even further extend its functionality. In recent times we have used it multiple times but there is one issue with contact form 7 which we come across almost every time we use a dropdown list.
In order to add a dropdown menu contact form 7 provides a select tag with a feature to add options to show in the dropdown, but what if you have a requirement to add a placeholder for the dropdown or a disabled first option. For this Contact form 7 official documentation provides an option “first_as_label” which basically removes value attributes from the first option and until some other option is selected the form will not be submitted if the field is a required field.
We researched a lot and found solutions that can be implemented on almost any website to make your first option in the dropdown, a disabled option. In HTML just adding the “disabled” attribute to the option does the job, so our aim is to add this attribute to our first option.
A small JavaScript snippet can do this by first selecting the dropdown element by searching it by class name or ID and then adding a “Disabled” attribute to the first option. Anyone who is looking for the solution can follow the below-mentioned steps to achieve the functionality.
1. Add a unique class to your select tag by adding “class:myselecttag” so that we can select the element. Save your contact form.
2. Go to Appearance à Theme editor and open file footer.php
3. Add below snippet before the end of body tag i.e “</body>”
<script>$(“. myselecttag option:first”).attr(“disabled”, “disabled”);
</script>
4. And save your file.Now your users cannot select the first option from the dropdown. If on your website you have multiple forms with dropdown, just give different class names to each of them and use the same code snippet by updating the class name.
Co-Founder Simplileap
Passionate Full Stack Developer with an unwavering enthusiasm for technology and a relentless drive for continuous learning with more than 10 years of experience in Web Development, SEO and Software Development. Committed to pushing boundaries, I thrive in dynamic environments where I can leverage my expertise in front-end and back-end development to create innovative solutions. With a strong foundation in various programming languages and frameworks, I am dedicated to staying updated with the latest industry trends and incorporating them into my work.
