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?

    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

    so for drop down we don't have any other choice?

  • Reigel

    Reigel Correct answer

    5 years ago

    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.

    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.

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM