How to add placeholder for contact form7 for dropdown? [closed]

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?


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.

Leave a Comment