Clearing Default Field Values on Gravity Forms

Last updated: Tuesday February 25th 2014
Reading time: 3 minutes

Clearing Gravity Forms default values on click

I have recently started using the WordPress Gravity Forms plugin since I started at Toast Design as a Web Designer at the start of the year. It is a great plugin! I used to only use Contact Form 7 for web forms but now I can’t see myself using anything other than Gravity Forms. One issue that I have come across is clearing the default field values of  field on click.

While it isn’t a feature in Gravity Forms by default it is fairly easy to rectify with a little bit of jQuery code. The below script will remove any default value from input fields and textareas on click, and if you haven’t changed it, will restore it if necessary.

You can add the script below to your themes header.php file if you want it to be available for all of your forms, or can create a new page template, associate it with the page the form is on and include the script there. Note: This snippet requires that the jQuery library is already loaded in your theme to function properly.

The code

<script type="text/javascript">

jQuery(document).ready(function() {

	jQuery.fn.cleardefault = function() {
	return this.focus(function() {
		if( this.value == this.defaultValue ) {
			this.value = "";
		}
	}).blur(function() {
		if( !this.value.length ) {
			this.value = this.defaultValue;
		}
	});
};
jQuery(".clearit input, .clearit textarea").cleardefault();

});

</script>

Defining the Fields

Once you’ve included the script in your page header, it’s easy to define which fields you want to clear. Simply open up the form in the Gravity Forms admin area, navigate to the field you want to “clear”, click on the Advanced tab and add the CSS Class Name “clearit”. Save the form and go and test it!

clear-values-on-gravity-form-on-click

That’s all there is to it.

Of course, you could tweak the script and change the class name to suit your preference. If you still can’t get it working leave a comment below and I will try and get back to you as soon as I can.

Ps. You may have forgot to call in the  jQuery library as mentioned above.

Not working? Try adding this…

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery","1.3.2");
</script>
About the author
Laurence

I am a 27-year-old WordPress web designer and SEO consultant based in Banbury, Oxfordshire, UK. I have designed and maintained sites with over 20,000 pages on large corporate websites, smaller small business sites, and tiny personal websites and blogs. I provide freelance WordPress web design services in my evenings and weekends and also work full time for a local design agency in Banbury. You can connect with me on Twitter, Facebook and on Google+.