Contact Form 7 watermark for select menu

Question

im searching for a way to put a watermark on select fields.

that is not working ->

[select* c_type class:ic watermark "choose type" "a" "b" "c"]

to put a not valid value that fail validation, i had to put include_blank

[select* c_type class:ic include_blank "a" "b" "c"]

but the problem is that i have --- as watermark, thats what i want to change..

Answer 1

After hard searching i found this script that is working and replacing the "---" when targeting to that element this one is changing all the "---"s

function my_wpcf7_form_elements($html) {
    $text = 'Please select...';
    $html = str_replace('<option value="">---</option>', '<option value="">' . $text . '</option>', $html);
    return $html;
}
add_filter('wpcf7_form_elements', 'my_wpcf7_form_elements');

this code, replacing with targeting

function my_wpcf7_form_elements($html) {
    function ov3rfly_replace_include_blank($name, $text, &$html) {
        $matches = false;
        preg_match('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $html, $matches);
        if ($matches) {
            $select = str_replace('<option value="">---</option>', '<option value="">' . $text . '</option>', $matches[0]);
            $html = preg_replace('/<select name="' . $name . '"[^>]*>(.*)<\/select>/iU', $select, $html);
        }
    }
    ov3rfly_replace_include_blank('menu-569', 'Choose language', $html);
    ov3rfly_replace_include_blank('menu-614', 'Choose country', $html);
    return $html;
}
add_filter('wpcf7_form_elements', 'my_wpcf7_form_elements');

hope that will save for some of you a headache (source here)

Answer 2

More recent versions of Contact Form 7 allow the use of first_as_label to create placeholder text that does not validate as an entry if users do not make a selection. Simply make your placeholder text be the first label in the list of options.

[select* food-choice first_as_label "Preferred food?" "Cake" "Pizza" "Burger" "Salad" "Donut"]

Answer 3

Try this:

[select* menu-206 first_as_label "Select doctor" "David Mikaberidze" "Sophio Gelashvili" "Maya Dolidze"]

Answer 4

You can do it with one line of jQuery.

To replace the – - – with the placeholder text I wanted, I first of all gave the fields an ID in the Contact Form 7 options. Following this, I added the following in my themes footer between script tags.

$("#typeofinjury option:first:contains('---')").html('How Were You Injured?');//Replace ---

The code simply looks for the first option inside the dropdown menu which has the ID ‘typeofinjury’. It then replaces it with the text ‘How Were You Injured?’.

The blog post for this solution with screenshots is Here

Answer 5

If you find string replacement unefficient, you could simply use this:

jQuery(function($) {
    $("select option:first").attr('disabled', 'disabled');// Disable the first value/label ---
  });

I also made sure that the first alternative is the "label" i want to use, by adding 'first_as_label' to the shortcode in wcf7, like this:

[select name first_as_label 'label' 'alt1' 'alt2' 'alt3']

By making the first option disabled, wcf7 won't confirm the form until this an enabled alternative is chosen.