[Plugin: Contact Form 7] Placeholder for HTML5

This adds support for html5 placeholder option (replaces the need for watermark).

To use: [text* your-name placeholder “enter your name”]

Add the following code into text.php and textarea.php just above the line that saysif ( wpcf7_script_is() && $value && preg_grep( '%^watermark$%', $options ) ) {):

Placeholder code:

$ph_att = '';

if ( $value && preg_grep( '%^placeholder$%', $options ) ) {
	$ph_att .= sprintf( ' %s', $value );
	$value = '';
}

if ( $ph_att )
	$atts .= sprintf( ' placeholder="%s"', trim( esc_attr( $ph_att ) ) );

—

Use the following jquery script for older browsers that don’t support html5 placeholder:

// Check if browser supports HTML5 input placeholder
function supports_input_placeholder() {
	var i = document.createElement('input');
	return 'placeholder' in i;
}

// Change input text on focus
if (!supports_input_placeholder()) {
	$(':text').focus(function(){
		var self = $(this);
		if (self.val() == self.attr('placeholder')) self.val('');
	}).blur(function(){
		var self = $(this), value = $.trim(self.val());
		if(val == '') self.val(self.attr('placeholder'));
	});
} else {
	$(':text').focus(function(){
		$(this).css('color', '#000');
	});
}

Thank you thank you pryley! Worked like a charm.

I’ve tried to use the placeholder attribute as well, but using the Javascript above just brings about a Javascript error and doesn’t work in browsers that don’t support it. Any ideas where I am going wrong?

Here is how the code looks in my ./header.php file:

<script type="text/javascript" src="https://thatbenson.com/sweet/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.6"></script>
		<script type="text/javascript" src="https://thatbenson.com/sweet/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52"></script>

		<script type="text/javascript">

// Check if browser supports HTML5 input placeholder
function supports_input_placeholder() {
	var i = document.createElement('input');
	return 'placeholder' in i;
}

// Change input text on focus
if (!supports_input_placeholder()) {
	$(':text').focus(function(){
		var self = $(this);
		if (self.val() == self.attr('placeholder')) self.val('');
	}).blur(function(){
		var self = $(this), value = $.trim(self.val());
		if(val == '') self.val(self.attr('placeholder'));
	});
} else {
	$(':text').focus(function(){
		$(this).css('color', '#000');
	});
}

		</script>

Thank you so much pryley. works perfect