OptinSkin Fix For Internet Explorer and Firefox

by

Did you know the OptinSkin Plugin is likely confusing 45% of your visitors and causing them not to sign up for your email list?  At least that was the case for me.

But don’t worry, it’s easy to fix.  And when the change is made, OptinSkin is still a very cool plugin to build your email list or encourage sharing on posts.

The reason your visitors are confused is because Firefox and Internet Explorer do not show the “First Name” and “Email” text field placeholders within the sign-up form.  OptinSkin uses HTML 5 which is not fully supported by these browsers yet.  If 45% of your visitors use these browsers (like mine do), they will just see blank fields and have no idea what to enter into them.  Here’s an example:

OptinSkin Issue screenshot

How to fix OptinSkin so that placeholder values show up in Firefox and internet Explorer

Please note that changing these files incorrectly is an easy way to screw up your blog, so I must provide a disclaimer that I hold no responsibility should things go horribly wrong while you make changes, and for goodness sake, do a backup first!

The “fix” below, will cause the gray placeholder text (for first name and email fields) to appear in IE and Firefox (as well Chrome) for OptinSkin forms.  You’ll need to modify the script to include each OptIn skin number you use on your site.

Thesis Instructions

If you use the Thesis theme (like I do), you’ll need to add the following code anywhere in your custom_functions.php file.

function insert_script() { ?>

<script>

// Determines if placeholder is supported or not.

jQuery(function() {

jQuery.support.placeholder = false;

test = document.createElement(‘input’);

if(‘placeholder’ in test) jQuery.support.placeholder = true;

});

// Adds placeholder support for non-supported browsers

jQuery(function() {

if(!jQuery.support.placeholder) {

var active = document.activeElement;

jQuery(‘#3_name, #3_email‘).focus(function () {

if (jQuery(this).attr(‘placeholder’) != ” && jQuery(this).val() == jQuery(this).attr(‘placeholder’)) {

jQuery(this).val(”).removeClass(‘hasPlaceholder’);

}

}).blur(function () {

if (jQuery(this).attr(‘placeholder’) != ” && (jQuery(this).val() == ” || jQuery(this).val() == jQuery(this).attr(‘placeholder’))) {

jQuery(this).val(jQuery(this).attr(‘placeholder’)).addClass(‘hasPlaceholder’);

}

});

jQuery(‘#3_name, #3_email‘).blur();

jQuery(active).focus();

jQuery(‘form:eq(0)’).submit(function () {

jQuery(‘#3_name.hasPlaceholder, #3_email.hasPlaceholder’).val(”);

});

}

});

</script>

<?php }

add_action(‘wp_head’, ‘insert_script’);

The text in red are the field names that must be changed.  The list of name and email fields for any OptIn skins should be added here, separated by comma values.

To find the field names, pull up one of your webpages, right click to view source, and search within the HTML for where the plugin is displayed.  It should looks something like this:

<input type=”text” name=”name” id=”3_name” placeholder=”enter your name”

That’s it!

This next section only applies to non-Thesis themes.

Instructions for Themes Other than Thesis

If you do not use the Thesis theme, you’ll need to add the following code to the head section of any page template that will contain an Optin skin.  Start here and do not bother with the code from the previous section.

<script>

// Determines if placeholder is supported or not.

jQuery(function() {

jQuery.support.placeholder = false;

test = document.createElement(‘input’);

if(‘placeholder’ in test) jQuery.support.placeholder = true;

});

// Adds placeholder support for non-supported browsers

jQuery(function() {

if(!jQuery.support.placeholder) {

var active = document.activeElement;

jQuery(‘#3_name, #3_email‘).focus(function () {

if (jQuery(this).attr(‘placeholder’) != ” && jQuery(this).val() == jQuery(this).attr(‘placeholder’)) {

jQuery(this).val(”).removeClass(‘hasPlaceholder’);

}

}).blur(function () {

if (jQuery(this).attr(‘placeholder’) != ” && (jQuery(this).val() == ” || jQuery(this).val() == jQuery(this).attr(‘placeholder’))) {

jQuery(this).val(jQuery(this).attr(‘placeholder’)).addClass(‘hasPlaceholder’);

}

});

jQuery(‘#3_name, #3_email‘).blur();

jQuery(active).focus();

jQuery(‘form:eq(0)’).submit(function () {

jQuery(‘#3_name.hasPlaceholder, #3_email.hasPlaceholder’).val(”);

});

}

});

</script>

The text in red are the field names that must be changed.  The list of name and email fields for any Optin skins should be added here, separated by comma values.

To find the field names, pull up one of your webpages, right click to view source, and search within the HTML for where the plugin is displayed.  It should looks something like this:

<input type=”text” name=”name” id=”3_name” placeholder=”enter your name”

That’s it!

Thanks to Larry from Empty Cabin Media for help with this code.

GD Star Rating
loading...
OptinSkin Fix For Internet Explorer and Firefox, 4.3 out of 5 based on 6 ratings