The question:
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?
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 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>
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.
Method 2
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.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0