WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] CF7 won't allow onblur or onfocus (4 posts)

  1. swmagic999
    Member
    Posted 2 years ago #

    I've seen this syntax used before for pre-filling a field, then when the user clicks in the field it goes blank, only to refill field if they press tab.

    <input id="inf_field_FirstName" class="form_text" type="text" name="inf_field_FirstName" onblur="if (this.value == '') {this.value = ' first name';}" onfocus="if(this.value == ' first name') {this.value = '';}" value=" first name" size="7">

    Is this doable in Contact form 7? I can't find any CSS to handle this.

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

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 years ago #

    You can use watermark option like this:

    [text your-firstname watermark "First Name"]

    http://contactform7.com/text-fields/

  3. shanafourde
    Member
    Posted 1 year ago #

  4. Shubham Vijay
    Member
    Posted 1 year ago #

    Contact Form 7 is one of our favorite form plugins because its updated regularly and there are a ton of extensions you can install that make the user-experience that much more rewarding; our favorite is the Database Extension. One feature that people have been asking about for quite some time is the ability to clear the default value of a field onClick or onFocus. This can be done easily by changing a couple lnes of code in the plugin, but remember, when you upgrade Contact Form 7, you’ll need to reapply this change.

    On line 89 in this file:
    /wp-content/plugins/contact-form-7/modules/text.php

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

    With this:

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

    And on line 88 in this file:
    /wp-content/plugins/contact-form-7/modules/textarea.php

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

    With this:
    88 $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>';

    With those 2 tweaks you should be able to clear the default value each time the user clicks the text field or text area.

    [Please post code or markup snippets between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic