{"id":5466,"date":"2022-04-13T13:37:12","date_gmt":"2022-04-13T13:37:12","guid":{"rendered":"https:\/\/simplileap.com\/blog\/?p=5466"},"modified":"2024-10-15T12:14:01","modified_gmt":"2024-10-15T06:44:01","slug":"how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder","status":"publish","type":"post","link":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/","title":{"rendered":"How to disable the first option in select input for contact form 7 | Dropdown Placeholder"},"content":{"rendered":"

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<\/a>, 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.<\/p>\n

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 \u201cfirst_as_label\u201d 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.<\/p>\n

\"\"<\/p>\n

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 \u201cdisabled\u201d attribute to the option does the job, so our aim is to add this attribute to our first option.<\/p>\n

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 \u201cDisabled\u201d attribute to the first option. Anyone who is looking for the solution can follow the below-mentioned steps to achieve the functionality.<\/p>\n

1. Add a unique class to your select tag by adding \u201cclass:myselecttag\u201d so that we can select the element. Save your contact form.<\/p>\n

2. Go to Appearance \u00e0 Theme editor and open file footer.php<\/p>\n

3. Add below snippet before the end of body tag i.e “<\/body>”<\/p>\n

<script><\/em>$(“.<\/em> myselecttag option:first”).attr(“disabled”, “disabled”);<\/em>
\n<\/script><\/em><\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":3,"featured_media":5467,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[33],"tags":[],"class_list":["post-5466","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical"],"acf":[],"yoast_head":"\nHow to disable the first option in select input for contact form 7 | Dropdown Placeholder - Simplileap<\/title>\n<meta name=\"description\" content=\"Steps for add placeholder to contact form 7 dropdown or how to disable the first options in contact form 7 select dropdown in Wordpress.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to disable the first option in select input for contact form 7 | Dropdown Placeholder - Simplileap\" \/>\n<meta property=\"og:description\" content=\"Steps for add placeholder to contact form 7 dropdown or how to disable the first options in contact form 7 select dropdown in Wordpress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\" \/>\n<meta property=\"og:site_name\" content=\"Simplileap\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/simplileap\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-13T13:37:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-15T06:44:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"763\" \/>\n\t<meta property=\"og:image:height\" content=\"664\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Keshav Sharma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@simplileap\" \/>\n<meta name=\"twitter:site\" content=\"@simplileap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keshav Sharma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\"},\"author\":{\"name\":\"Keshav Sharma\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/person\/8ebca1097576486b58e3ece537774b7c\"},\"headline\":\"How to disable the first option in select input for contact form 7 | Dropdown Placeholder\",\"datePublished\":\"2022-04-13T13:37:12+00:00\",\"dateModified\":\"2024-10-15T06:44:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\"},\"wordCount\":372,\"publisher\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg\",\"articleSection\":[\"Technical\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\",\"url\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\",\"name\":\"How to disable the first option in select input for contact form 7 | Dropdown Placeholder - Simplileap\",\"isPartOf\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg\",\"datePublished\":\"2022-04-13T13:37:12+00:00\",\"dateModified\":\"2024-10-15T06:44:01+00:00\",\"description\":\"Steps for add placeholder to contact form 7 dropdown or how to disable the first options in contact form 7 select dropdown in Wordpress.\",\"breadcrumb\":{\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage\",\"url\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg\",\"contentUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg\",\"width\":763,\"height\":664},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/simplileap.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to disable the first option in select input for contact form 7 | Dropdown Placeholder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/simplileap.com\/blog\/#website\",\"url\":\"https:\/\/simplileap.com\/blog\/\",\"name\":\"Simplileap\",\"description\":\"Building Digital Future\",\"publisher\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/simplileap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/simplileap.com\/blog\/#organization\",\"name\":\"Simplileap\",\"url\":\"https:\/\/simplileap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png\",\"contentUrl\":\"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png\",\"width\":512,\"height\":512,\"caption\":\"Simplileap\"},\"image\":{\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/simplileap\",\"https:\/\/x.com\/simplileap\",\"https:\/\/www.instagram.com\/simplileap\/\",\"https:\/\/www.linkedin.com\/company\/simplileap\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/person\/8ebca1097576486b58e3ece537774b7c\",\"name\":\"Keshav Sharma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/simplileap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/26efa3a522938922500a856b7184596d1fff451717cdb3673fe826a01022022f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/26efa3a522938922500a856b7184596d1fff451717cdb3673fe826a01022022f?s=96&d=mm&r=g\",\"caption\":\"Keshav Sharma\"},\"description\":\"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.\",\"sameAs\":[\"https:\/\/simplileap.com\/blog\",\"https:\/\/www.linkedin.com\/in\/keshav-sharma-dev\/\"],\"url\":\"https:\/\/simplileap.com\/blog\/author\/keshav\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to disable the first option in select input for contact form 7 | Dropdown Placeholder - Simplileap","description":"Steps for add placeholder to contact form 7 dropdown or how to disable the first options in contact form 7 select dropdown in Wordpress.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/","og_locale":"en_US","og_type":"article","og_title":"How to disable the first option in select input for contact form 7 | Dropdown Placeholder - Simplileap","og_description":"Steps for add placeholder to contact form 7 dropdown or how to disable the first options in contact form 7 select dropdown in Wordpress.","og_url":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/","og_site_name":"Simplileap","article_publisher":"https:\/\/www.facebook.com\/simplileap","article_published_time":"2022-04-13T13:37:12+00:00","article_modified_time":"2024-10-15T06:44:01+00:00","og_image":[{"width":763,"height":664,"url":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg","type":"image\/jpeg"}],"author":"Keshav Sharma","twitter_card":"summary_large_image","twitter_creator":"@simplileap","twitter_site":"@simplileap","twitter_misc":{"Written by":"Keshav Sharma","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#article","isPartOf":{"@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/"},"author":{"name":"Keshav Sharma","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/person\/8ebca1097576486b58e3ece537774b7c"},"headline":"How to disable the first option in select input for contact form 7 | Dropdown Placeholder","datePublished":"2022-04-13T13:37:12+00:00","dateModified":"2024-10-15T06:44:01+00:00","mainEntityOfPage":{"@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/"},"wordCount":372,"publisher":{"@id":"https:\/\/simplileap.com\/blog\/#organization"},"image":{"@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage"},"thumbnailUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg","articleSection":["Technical"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/","url":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/","name":"How to disable the first option in select input for contact form 7 | Dropdown Placeholder - Simplileap","isPartOf":{"@id":"https:\/\/simplileap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage"},"image":{"@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage"},"thumbnailUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg","datePublished":"2022-04-13T13:37:12+00:00","dateModified":"2024-10-15T06:44:01+00:00","description":"Steps for add placeholder to contact form 7 dropdown or how to disable the first options in contact form 7 select dropdown in Wordpress.","breadcrumb":{"@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#primaryimage","url":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg","contentUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2022\/04\/4567944.jpg","width":763,"height":664},{"@type":"BreadcrumbList","@id":"https:\/\/simplileap.com\/blog\/technical\/how-to-disable-the-first-option-in-select-input-for-contact-form-7-dropdown-placeholder\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/simplileap.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to disable the first option in select input for contact form 7 | Dropdown Placeholder"}]},{"@type":"WebSite","@id":"https:\/\/simplileap.com\/blog\/#website","url":"https:\/\/simplileap.com\/blog\/","name":"Simplileap","description":"Building Digital Future","publisher":{"@id":"https:\/\/simplileap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/simplileap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/simplileap.com\/blog\/#organization","name":"Simplileap","url":"https:\/\/simplileap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png","contentUrl":"https:\/\/simplileap.com\/blog\/wp-content\/uploads\/2020\/11\/android-chrome-512x512-1.png","width":512,"height":512,"caption":"Simplileap"},"image":{"@id":"https:\/\/simplileap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/simplileap","https:\/\/x.com\/simplileap","https:\/\/www.instagram.com\/simplileap\/","https:\/\/www.linkedin.com\/company\/simplileap\/"]},{"@type":"Person","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/person\/8ebca1097576486b58e3ece537774b7c","name":"Keshav Sharma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/simplileap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/26efa3a522938922500a856b7184596d1fff451717cdb3673fe826a01022022f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/26efa3a522938922500a856b7184596d1fff451717cdb3673fe826a01022022f?s=96&d=mm&r=g","caption":"Keshav Sharma"},"description":"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.","sameAs":["https:\/\/simplileap.com\/blog","https:\/\/www.linkedin.com\/in\/keshav-sharma-dev\/"],"url":"https:\/\/simplileap.com\/blog\/author\/keshav\/"}]}},"_links":{"self":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts\/5466","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/comments?post=5466"}],"version-history":[{"count":4,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts\/5466\/revisions"}],"predecessor-version":[{"id":6702,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/posts\/5466\/revisions\/6702"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/media\/5467"}],"wp:attachment":[{"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/media?parent=5466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/categories?post=5466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simplileap.com\/blog\/wp-json\/wp\/v2\/tags?post=5466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}