Internet Explorer 7 and 8 Watermark Text

Can you share the URL?

https://clientdemo.5ivefold.com/v2

As IE7 and IE8 don’t support HTML5 placeholder, the fallback javascript (watermark) should work, but seemingly it isn’t working correctly. I’m inspecting it.

Hi do you have an update on the issue?

Just ran into this issue too, hoping for a quick solution!

Had a call this morning that form field watermarks weren’t working on our site in IE. Don’t know which version, haven’t been able to replicate thus far. I assume this is the same problem… any updates?

Hello, i’m also seekink for an update on this issue?
Hope someone has a quick solution.

Also having the same issue. I believe it worked fine in IE till the recent update to 3.4. Another site I use it on, is still on Contact Form 7 version 3.1 and it works A-OK in Windows IE.

Works in Windows Firefox, OS X Firefox, Safari and Chrome, but not IE.

If this helps, comparing that previous version’s css to the current, it appears that the 3.1 version isn’t adding the watermark to the class field of the input box.

previous version:
class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required wpcf7-use-title-as-watermark watermark”

current version:
class=”wpcf7-form-control wpcf7-text wpcf7-validates-as-required”

And rolling back to that previous version of 3.1 has the watermarks working perfectly in IE again.

Hi which file are you editing? Thanks.

I ended up rolling back to 3.1.

Hi Takayuki,

Could you please get this error fixed. It looks like it does have to do with the new placeholder code for HTML5 and seems to be in the script.js file.

Thanks!

I used a conditional IE.js file to execute the below code:

$(function () {
    //Assign to those input elements that have 'placeholder' attribute
    $('input[placeholder]').each(function(){
        var input = $(this);
        $(input).val(input.attr('placeholder'));

        $(input).focus(function(){
            if (input.val() == input.attr('placeholder')) {
               input.val('');
            }
        });

        $(input).blur(function(){
           if (input.val() == '' || input.val() == input.attr('placeholder')) {
               input.val(input.attr('placeholder'));
           }
        });
    });
});

Make sure you include the code AFTER jQuery, so if you’re loading your scripts in your footer, place your conditional IE statement after wp_footer();

<?php wp_footer(); ?>

<!--[if lt IE 9]>
    <script src="<?php bloginfo('template_url');?>/assets/js/IE.js"></script>
<![endif]-->

Hello SimonMacFadyen, thank you for posting your resolution. It helped me a great deal!

Internet Explorer 7 and 8 Watermark Text missing

I still have same problems today, i have WORDPRESS 3.7.1 and CONTACT FORM 3.5.4 !!!