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

Elatia

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)

Elatia

$select = str_replace('<option value="">---</option>', '<option value="" disabled selected>' . $text . '</option>', $matches[0]); Awesome hack – Vaisya

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

Arabinose

wow. It works. But in validation error it does not highlight as red. Any suggestions. – Upraise

Works like a charm! – Frye

@Upraise don't forget to give " * " like this [select* name ... ... ] – Aftertime

Answer 3

Try this:

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

Errant

This should be accepted as the answer as it's directly related to Contact Form 7 – Parliamentarianism

Answer 4

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.

Hite

Answer 5

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

Miscue

although i found the answer 2 months ago, it might be shorter way for someone else. – Elatia

$("#typeofinjury option:first:contains('---')").html('How Were You Injured?').attr('disabled', true); try this its work as actual placeholder and user cant select 1 value also I always use this – Decay

Answer 6

You can use the following code to validate the email field domains in WordPress Contact forms 7

add_filter('wpcf7_validate_email*', 'custom_email_validation', 20, 2);
add_filter('wpcf7_validate_email', 'custom_email_validation', 20, 2);
function custom_email_validation($result, $tag) {
    $name = $tag->name;
    $value = $_POST[$name];
    if ('***field-name***' == $name) {
        $allowed_domains = array('gmail.com', 'yahoo.com');
        $email_parts = explode('@', $value);
        $email_domain = array_pop($email_parts);
        if (!in_array($email_domain, $allowed_domains)) {
            $result->invalidate($tag, 'Please enter a valid email address.');
        }
    }
    return $result;
}

Vories