gravity_forms
Gravity Forms automatic labels in fields that disappear and reappear upon focus/blur

Apologies for the long title, I was not sure how to best explain this after writing some jQuery to solve a problem that I could not find in the gravity Forms help forum.

The Problem

Although Gravity Forms provides nice options and CSS control to make your form labels show top/left/right, there is no option to have the label display INSIDE the form field, disappear when clicked on, and then only reappear if the user leaves the field with no value in it, else, leave and process the users values.

There are a number of simple steps and prerequisites involved in this:

  • A slight modification to your Gravity Forms form.
  • Some updates to your style.css
  • You need jQuery (1.5.1 used for this example, but this is pretty basic so should work on earlier and newer versions)
  • You need to include a chunk of javascript AFTER jQuery is called. (usually done in a custom.js or include.js file in the footer.php of your theme, or in the header.php BELOW wp_head() so that jQuery is called first).

So, first things first, your Gravity Forms form

Have a look at the screenshot below, you will notice the following:

  • A default value applied to the ‘default value’ field. This will of course be what is displayed inside the form field before and after focus.
  • A CSS class of clear_field applied to the field. This will tell jQuery which fields to clear and which to leave alone if you wish. (This part could be modified to not include a class and target more specific fields with jQuery and the GF field IDs, but this example seemed to be the most versatile to just use on future sites).

That is it for the GF page, ..now the CSS file:

#field_1_1 label, #field_1_2 label, #field_1_3 label, #field_1_7 label, #gform_wrapper_1 .gfield_label{display: none;}

This is pretty simple, I have just hidden all of the specific labels I do not want to show. Again this could be done more effectively with a single call, however in this field there are radio buttons which require their labels to show, so simply hiding all would not be suitable in this instance.
I have a strong feeling that this will be the same case for many developers as you will not wish to hide everything, so add your overides here.

And now into the JS file:

As I said earlier, mine is a simple js file called custom.js which live in my theme folder and is included in my footer. It contains the following…

// CLEAR FORM FIELDS OF LABEL ON FOCUS THEN ADD BACK ON BLUR IF EMPTY (class of 'clear_field' must be added to form field) //

$(document).ready(function(){
	$(".clear_field input").focus(function () {
		var origval = $(this).val();
		$(this).val("");
		//console.log(origval);
		$(".clear_field input").blur(function () {
			if($(this).val().length === 0 ) {
				$(this).val(origval);
				origval = null;
			}else{
				origval = null;
			};
		});
	});
});

This states that any field covered by the ‘clear_input’ class (applied in fact to the parent div for the field/label) should upon focus have its original value (origval) stored, then the field cleared.

Then upon blur (leaving the field) if the field is empty, replace with the original value, else, do nothing.

Both final lines after the blur if statement in fact clear the origval var by declaring it null. This is required to prevent values being left behind and errors caused by the user jumping fields.

And that is it.

Leave a comment...

9 comments

  1. apsolut says:

    i think its great solution,
    i was using this in couple of projects for wordpress..
    but then i realise that with this solution to put name inside the input boxes – there is no required fields anymore..so anyone can post anything ;] any solutions ?

  2. mog says:

    There are a couple of solutions for that, …firstly that you check for the original ‘label’ value and don’t validate if the field value is that, ….or you check against field length, …or, ..better still, ..try not to require too much info other than email addresses which can easily be verified against the labels. It is a compromise, ..but it depends on the project.

  3. This is cool, simple and hopefully as easy to do as your post shows. Going to try this soon. This is not only sleek, but it also saves you space when designing your forms. It unclutters the form too.

  4. mog says:

    occasionally you have to make allowances when it comes to validation of write some extra validation clauses, …just remember always that your user can submit your form with these values ;)

  5. I have a quick question… In the post you say:
    “Have a look at the screenshot below, you will notice the following:”

    But there is no screenshot. Am I missing something or did you mean just the code? For some reason this isn’t working for me and I’m wondering if looking at the screenshot you talk about would help.

    Thanks!

  6. mog says:

    You are indeed, ..but it has never been updated …I do not think I ever actually put it is there. I have a small version from the post thumbnail i just added quickly, ..but it is now just another reason to redo my website, …it is getting embarrassing, ..i wanted to do it in September 2011 and have not touched it since, ..but have been so busy. [hangs head in shame]. I hope you can see from the screenshot. …squint ;)

  7. Martin says:

    thanks so much for this, totally saved my ass for a project…thanks!!!!

  8. apsolut says:

    thank you @MOG , gravity is still the best solution (+fastest)

This site is not up to date. I really should take it down and make a new one as I have been busy with a lot of cool projects and clients recently, but currently do not have the time to rebuild it.

So, it stays here, but please note it has not been updated in a while and if you need to get in contact with me please just email me directly at mog@mogmachine.com or phone me on +44 (0)7960 214407.

Thanks,

Marcus (mog)