WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Placeholder for HTML5 (5 posts)

  1. Jesse Friedman
    Member
    Posted 3 years ago #

    I really want to add the attribute placeholder to my input fields. I tried adding placeholder:"website" to the tag but this actually just gets replaced with the "value" field. Here's an example:

    in the plugin
    [text text-159 placeholder:'website']

    outputs
    <span class="wpcf7-form-control-wrap text-159"><input name="text-159" value="website" class="wpcf7-text" size="40" type="text"></span>

    I would really appreciate some help with this.

  2. pryley
    Member
    Posted 3 years ago #

    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');
    	});
    }
  3. toxicriptide
    Member
    Posted 3 years ago #

    Thank you thank you pryley! Worked like a charm.

  4. Michael Benson
    Member
    Posted 3 years ago #

    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="http://thatbenson.com/sweet/wp-content/plugins/contact-form-7/scripts.js?ver=2.4.6"></script>
    		<script type="text/javascript" src="http://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>
  5. kandesigner
    Member
    Posted 2 years ago #

    Thank you so much pryley. works perfect

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic