Contact Form 7 Clear Default Value

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:

$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 ) . '\';" />';

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

Replace this:

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

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

Check out these comments...

  1. Brilliant stuff. Clearly & simply explained. Just what I was looking for too.

  2. john on March 3rd, 2011
  3. Worked perfectly… Thanks for the post!! ;)

  4. Sahus Pilwal on April 16th, 2011
  5. It is unbelievable that this isn’t built into the plugin. Thanks for posting this concise and functional solution. :)

  6. Rachelle on June 28th, 2011
  7. Awesome! This is perfect!

  8. John on August 22nd, 2011
  9. I like this – a lot! It works perfect :)

    Thanks!

  10. Dave on September 2nd, 2011
  11. Thank You! Worked perfectly. Maybe you can help do this with wordpress comment text ant textaareas fields?
    BR//Aivaras.

  12. Lipideco on December 18th, 2011
  13. That’s great and all but how come no websites tell people how to show the field inside the admin? I often wonder why. Remember folks you’ll have to add this
    to make things work the way you want.

  14. Stef on May 8th, 2012
  15. Yep, that’s cool, but there’s a problem: after you sent the message and the “successfully sent green border message appears” the values aren’t reset. You have to reload the page.

  16. Rics on May 14th, 2012
  17. Hey. It doesn’t work for me. The value just stays in the field. Any reason why this happens? Maybe because I’ve got the latest contact form 7?

    Please help. Thanks.

  18. Francdore on June 6th, 2012
  19. Oops. Have multiple wordpress installations and put it on the wrong site. Thanks!

  20. Francdore on June 6th, 2012
  21. Working perfectly…..thanks alot.

  22. Pradip on June 9th, 2012
  23. […] you stick to using Contact Form 7, there’s a way to alter the plugin code to support this feature, but I don’t like to do that because the changes get erased if you update the plugin, which a […]

  24. Make My Blog Pretty | How to make text fields appear and disappear with javascript in Contact Form 7 | Blogs made better by magic fairies on June 20th, 2012
  25. Thank you for this great solution.

  26. Jen on July 31st, 2012
  27. not working for me

  28. vidhoo on August 1st, 2012
  29. Thanks guys! The line numbers are a bit out for the latest version but not by much :) and this still works well. Can’t understand why the author doesn’t add this to the plugin..

  30. Peter on August 3rd, 2012
  31. Thank you very much, this helped me a lot and it really worked!

  32. InDesigner on August 5th, 2012
  33. Absolutely what I needed! I did have one field that wouldn’t clear, and then realized the value I had in there had an apostrophe. When I reworded so it didn’t have an apostrophe, it cleared perfectly. Just documenting in case it helps someone else. Thanks for the great fix!

  34. ohbrooke on September 6th, 2012
  35. Simply awesome!!! it works like a charm.

    thanks,

    Yasir Khan
    Web Developer
    Spellwebdesign.com

  36. yasir on November 13th, 2012
  37. Great!!!!!!!!!!

  38. Maysa on November 19th, 2012
  39. Thanku very much sir…osm job

  40. sukhveer on November 30th, 2012
  41. Perfect! Awesome.

  42. Vishal on January 15th, 2013
  43. Simply, clearly. Thanks a lot!

  44. Filip on March 30th, 2013
  45. It appears that the code has changed in the new version (3.4) and the code on line 89 is no longer used at all (not even located elsewhere in the file). So, it looks like this won’t be helpful anymore. I needed this too!

  46. Chris on May 2nd, 2013
  47. Or

    you could just use the ‘watermark’ shortcode they already provide:

    Makes it all nice and grey, clears when you type, reappears when value is empty etc

    A lot of people seem to be looking for this.

  48. Andrew maney on May 16th, 2013
  49. You can now replace onblur and onfocus with [watermark] directly in the shortcut fields. Example: .

  50. Bogdan on June 24th, 2013

You diggin' our post? Leave a comment and let us know...