WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
erase fields onFocus (13 posts)

  1. s.reynolds
    Member
    Posted 4 years ago #

    I am trying to erase the the form fields when you click on them so the value displays then erase on focus.

    Currently I have the input fields working by editing the modules/text.php file but i cant for the life of me get the textfield work with on focus.

    this is what i have in the textarea.php

    $html = '<textarea name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . ' onfocus="if(this.value==\'';

    $html = $html . esc_attr( $value ) . '\') this.value=\'\';" onblur="if(this.value==\'\') this.value=\'' . '\';" </textarea>';

    it almost works, apart for some reason it adds this tag ">" just before the closing textarea like this

    <textarea onblur="if(this.value=='') this.value='';" onfocus="if(this.value=='Your Message') this.value='';" rows="4" cols="15" class="wpcf7-validates-as-required" id="mf_message" value="Your Message" name="your-message"></textarea>

    I dont know too much about php but I dont know why it adds this tag and I think this is why its not working.

    Any thoughts?

    Cheers

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Wiki Chaves
    Member
    Posted 4 years ago #

    Hi,

    I've edited mudules/text.php and replaced Line 89 with this

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . 'onfocus="if(this.value==\'';
    $html = $html . esc_attr( $value ) . '\') this.value=\'\';" onblur="if(this.value==\'\') this.value=\'' . '\';" </textarea>';

    Cheers,
    Wiki

  3. Wiki Chaves
    Member
    Posted 4 years ago #

    I've made a small corretion to this, to return the original value in case somebody leave the input blank.

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . 'onfocus="if(this.value==\'';
    $html = $html . esc_attr( $value ) . '\') this.value=\'\';" onblur="if(this.value==\'\') this.value=\'' . esc_attr( $value ) . '\';" </textarea>';

    wiki

  4. vmercader
    Member
    Posted 4 years ago #

    THAAAAAAAAAAAAANK.... YOUUU..... The Original poster forgot to thank you, but I'll do it for him.... thank you.

  5. Wiki Chaves
    Member
    Posted 4 years ago #

    your wellcome :)

  6. theresacambria
    Member
    Posted 4 years ago #

    I've been trying to accomplish this for quite some time, so I feel the need to repeat - @wiki THANK YOU!

  7. theresacambria
    Member
    Posted 4 years ago #

    I applied the second bit of code that Wiki provided to the textarea.php file, but changed the input type to textarea instead of just text to accommodate a "Comments" box.

    The onfocus/onblur functionality works like a charm but now the field only allows one line of text in the middle of the box, instead of multiple lines starting at the top of the box.

    Here is the code I used plus a little of what comes just before it and just after:

    if ( ! empty( $content ) )
    			$value = $content;
    	}
    // Default value disappears onfocus, reappears onblur if still empty
    $html = '<input type="textarea" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . 'onfocus="if(this.value==\'';
    $html = $html . esc_attr( $value ) . '\') this.value=\'\';" onblur="if(this.value==\'\') this.value=\'' . esc_attr( $value ) . '\';" </textarea>';
    
    	$validation_error = '';
    	if ( is_a( $wpcf7_contact_form, 'WPCF7_ContactForm' ) )

    Any help would be much appreciated!

  8. vmercader
    Member
    Posted 4 years ago #

    Oh, and, using the idea that Wiki provided, I've modified it a little bit and came up with this (applied to text.php):

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . ' onblur="if (this.value == \'\') {this.value = \'' . esc_attr( $value ) . '\';}" onfocus="if (this.value == \'' . esc_attr( $value ) . '\') {this.value = \'\';}" />';

    you can see this code applied on this website: http://www.talyst.com

    For textarea.php, use:
    $html = '<textarea name="' . $name . '"' . $atts . ' onblur="if (this.value == \'\') {this.value = \'' . esc_html( $value ) . '\';}" onfocus="if (this.value == \'' . esc_html( $value ) . '\') {this.value = \'\';}">' . esc_html( $value ) . '</textarea>';

  9. theresacambria
    Member
    Posted 4 years ago #

    Thank you, vmercader. Thats exactly what was needed for the textarea.

  10. s.reynolds
    Member
    Posted 4 years ago #

    Perfect! sorry for the late reply.

    know one commented on my post for some time so i forgot about it.

    I eventually used some javascript to clear the text onfocus but recently had some issues with it so came back here and this was exactly was I was looking for.

    Thanks so much Wiki Chaves and vmercader.

    I hope they add this functionality to future updates, would be nice.

    Cheers

  11. mihirx
    Member
    Posted 4 years ago #

    first, thanks Wiki Chaves and vmercader :)

    In contact-form-7.2.3.1

    in /wp-content/plugins/contact-form-7/modules/text.php

    replace this: (line 86)

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . ' />';

    with this:

    $html = '<input type="text" name="' . $name . '" value="' . esc_attr( $value ) . '"' . $atts . ' onfocus="if(this.value==\'';
    
    $html = $html . esc_attr( $value ) . '\') this.value=\'\';" onblur="if(this.value==\'\') this.value=\'' . esc_attr( $value ) . '\';" />';

    in /wp-content/plugins/contact-form-7/modules/textarea.php

    replace this: (line 85)

    $html = '<textarea name="' . $name . '"' . $atts . '>' . esc_html( $value ) . '</textarea>';

    with this:

    $html = '<textarea name="' . $name . '"' . $atts . ' onblur="if (this.value == \'\') {this.value = \'' . esc_html( $value ) . '\';}" onfocus="if (this.value == \'' . esc_html( $value ) . '\') {this.value = \'\';}">' . esc_html( $value ) . '</textarea>';

    Instead of replacing, you can comment the code by adding // at the beginning of the code. For e.g.:

    // $html = '<textarea name="' . $name . '"' . $atts . '>' . esc_html( $value ) . '</textarea>';

  12. mihirx
    Member
    Posted 4 years ago #

    I thot I wud help newbies like me by specifying exactly wht to replace wid wht, I was about to mess up.

  13. BrisBenjamin
    Member
    Posted 3 years ago #

    I've been using the default value as a work around to get the field label to appear in the text field to save space. I've now got it clearing when clicked.
    My issues is now that these fields are required by if people just click send the default value get used. Is there a way around this?

    http://1.debtmediators.com.au

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic