[Plugin: Contact Form 7] erase fields onFocus

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

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

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

your wellcome ??

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

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!

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: https://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>';

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

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

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>';

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

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?

https://1.debtmediators.com.au