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