Contact Form 7 watermark for select menu

1 Views

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

that is not working ->

Read More
[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..

Post Views: 1

Related posts

Leave a Reply

5 comments

  1. 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"]

  2. 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)

  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

  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.