How to add placeholder for contact form7 for dropdown?

by

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>

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.

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

Leave a Comment