How to add placeholder for contact form7 for dropdown?

I tried adding placeholder similar to the given for ContactNumber for my drop down Outlet but it doesn't appear.


<div class="form-group form-icon-group">
    <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Contact Number *"]
<div class="form-group form-icon-group">
<i class="fa fa-food" > </i> [select Outlet id:outlet class:form-control "-- Select Outlet--" "Pasir Ris" "Thomson"]

Tried adding first_as_label "Preferred outlet?" so this displays as ordinary drop down values.

Rest all of the fields do show the placeholder,any other way to give placeholder for drop down?


to answer the question: this is not possible.

AFAIK, (HTMLwise) there's no way to add a placeholder to select tags.

A lot of devs I know however tend to use disabled selected combination for the option...

    <option value="" disabled selected>Select your option</option>
    <option value="ydasdas">ydasdas</option>
    <option value="dasda">dasda</option>
    <option value="ydagfdsdas">ydagfdsdas</option>
    <option value="ewefsdf">ewefsdf</option>


I have checked CF7's source code (version 4.3.1), and there's no easy way we can achieve this html format.

You can go the hard way by removing wpcf7_add_shortcode_select action on wpcf7_init and add yours instead.

Contrary to what the accepted answer suggests, it actually is possible and built into Contact Form 7. Here's the actual list of options [select] holds. Pretty much you would define the first option to be the placeholder using first_as_label:

[select* Test first_as_label "Placeholder" "Option 1" "Option 2"]

While it won't traditionally look like a placeholder, if it's required the user won't be able to select the placeholder and send the form - this forces the user to select any of the other options.

Similar questions

wordpress contact form7 conditional emailing
In WORD PRESS, How to use contact form 7 for conditional emailing , for example when the user fills the form and submits, then the query form and email should be sent to the department selected by user in drop down in the form !
shortcode for sitelogo and siteurl in wordpress? (contact form7)
hi there I'm new to wordpress and I can see that the plugin contact form 7 has a shortcode to output fields. But I was wondering how do I output shortcode of the site's logo and home url? I read that it has something to do with functions.php, but I get more confused when I see the samples. Can anyone explain to me how I could achieve what I need? T...
How to capture POST data with contact form7
I have this hook in my functions.php: I want to post the values when the form is sent. I have a field like this: [textarea your-message]. How do i capture the POST data from this? for example when the form is sent i want to echo the post value of [textarea your-message] in myfunction(){}
WordPress Contact form7 plugin anchor tag issue
In word press when I specify the html anchor tag in email message body i.e When we deploy it on production the email body which contains anchor tag, It deletes all message box. Note: If we don't enter the anchor tag, Its working perfectly.
wordpress contact form7, one form redirect to multiple thank you page based on is_page
I am looking for a solution on wordpress contact form7. either a plugin or in PHP code. I am not looking for JavaScript solution. as I have already found JavaScript solution. Again: I am looking for either plugin or PHP code. I want to use one form (CF7) and it will redirect to multiple thank you pages based on from which page the form submitted. B...
after submission contact form7 data insert into different database table
My website in wordpress. I want to send automatically contact form 7 value to different database table. For example one is wordpress database table & another one is php database table. how i can fixed this issue?

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.