23

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

Code-

<div class="form-group form-icon-group">
    <i class="fa fa-phone" > </i> [tel* ContactNumber /8 class:form-control placeholder "Contact Number *"]
</div>
<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"]
</div>

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?

2
  • 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 Jan 6, 2016 at 5:39
  • so for drop down we don't have any other choice? Jan 6, 2016 at 5:47

2 Answers 2

-1

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...

<select>
    <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>
</select>

demo

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.

1
  • 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. Sep 21, 2018 at 19:42
118

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.

4
  • Thanks for the help.i already tried first_as_label but as you said it didn't look similar to other placeholder values. Jan 7, 2016 at 0:54
  • 4
    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
    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! 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
    Jan 20 at 23:14

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