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?

  • 1
    You can use the placeholder option in the following types of form tags: text, email, url, tel, textarea, number, range, date, and captchar. cf7 placeholder Commented Jan 6, 2016 at 5:39
  • so for drop down we don't have any other choice? Commented Jan 6, 2016 at 5:47

2 Answers 2


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.

  • 4
    This answer really should be removed, accepted or not it's incorrect, and it isn't like it's a very old answer, it was supplied on the same day as the correct one was. Commented Sep 21, 2018 at 19:42

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.

  • Thanks for the help.i already tried first_as_label but as you said it didn't look similar to other placeholder values. Commented Jan 7, 2016 at 0:54
  • 5
    This is a decent solution. And it does work properly - the form doesn't send if you try using the first option. To format the first option, just target the select box (i.e. .wpcf7 select[name="menu-70"] { color:#aaa; }. Then you can make the options darker by targeting the options (i.e. .wpcf7 select[name="menu-70"] option { color:#333; }. The first option is highighted on focus, so unless you want to change this part, the solution works great.
    – Rob Myrick
    Commented Sep 16, 2016 at 17:05
  • 1
    I'm not entirely sure why anyone would want a select option to look like a placeholder unless I am missing something a simple --Select an option-- is what most people expect to see. Thank you very much for saving me from looking through the documentation myself! Commented Sep 21, 2018 at 19:40
  • Now this option does not work on mac. The style is applied from the select. Options are just a representation of the content. The text. They are not the styled element.
    – neoswf
    Commented Jan 20, 2022 at 23:14
  • This should be the accepted answer! Great!
    – markzzz
    Commented Apr 4, 2023 at 12:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.