Gravity Forms Mad Lib Style Form Demo

View Live Demo  Download Demo Files

Mad Whatsit?

I've seen an increasing number of questions on the Gravity Forms support forums and Twitter about "Mad Lib" style forms. You remember "Mad Libs" don't you? "Add a noun here.. a verb here..an adjectve there.." and it was fun. At least it was fun when I was 10 years old. As it turns out, some Mad Libs may also be profitable if you're using web forms to gather leads.

There are a handful of interesting studies out there about increasing conversion rates by using Mad Lib style forms. Earlier this year, Luke Wroblewski wrote a short post on Mad Lib form conversion rates based on at least one of these studies. A few notable sites are like VaultPress and Crowd Favorite are using Mad Lib forms and if they're not improving their conversion rates, are at least generating some buzz because people warm up to the informal styling.

So, with that said, I sat down this morning to see just how hard it would be to make a simple Mad Lib style form from a standard Gravity Form. As it turns out, it wasn't that that difficult.. no jQuery or scripting needed, just creative usage of the available fields and some new CSS rules got it done. Within about 15 minutes, I had the basic form laid out and working nicely.

Building the Form

To pull this off, I used a combination of the inline HTML fields that were introduced in version 1.3, some simple text fields and select (drop down) fields. Most Mad Lib forms are pretty simple, so I chose to stick with those kind of fields for my demo. I won't guarantee trying to use the "complex" predefined fields like the full name field, address field, etc. are going to be a walk in the park but if you're looking for short and sweet, you're in luck.

Starting out, it seemed like a good idea to make a new form. Once I had the shiny new form in place, I started by applying a custom CSS class to the form itself and called it "madlibform".. pretty creative huh? I decided to add this additional class in order to use better CSS specificity and prevent other forms from inheriting properties from my CSS. Better specificity also makes it easier to override other styles that your form may inherit from your theme. Besides that, just saying specificity is fun...say it like 10 times fast if you can. You know you will when no one's around. (Note: For the purpose of my demo, I put my CSS inline, but if I HAD put it in with my other styles, this was the only way to go.)

Once that was done, I began to construct the form.. click, drag, configure... lather, rinse and repeat. I used the "HTML" fields to add the textual content in small pieces before and after individual inputs. I've seen a few people attempt this kind of form using the field labels themselves for the text. The problem with this is that the field labels have all sorts of CSS rules already applied to them and you have to work twice as hard to first override the inherited styles, then to format the labels to work the way you want. Why work that hard? That's the whole point of a nifty form plugin.. less work right? On the HTML fields, the only option I needed was to "disable default margins".

Now that the "HTML" fields were in place, I added the inputs. As I mentioned earlier, I avoided using the "complex" or grouped fields like the "name" and "address" fields. There's really no need for those in such a simple form format IMHO. So, I added the fields and for each input I also added a custom CSS class name. This time, I got all crazy and named them "madlibstyle".

If you're expecting much more for this part, you're gonna be disappointed. All there was to do was to finish up by adding some confirmation text (I used the standard confirmation text with a little HTML to polish it up). Of course, you can redirect to a page, or do whatever you want, but for my demo, I took the easy way out. You could go ahead and set up your notification emails at this point, or wait and do it later when you're finished submitting ten thousand tests.

Here's an admin screenshot to give you a better idea of exactly how the final form is laid out.

The CSS

Well, now we're to the meat and potatoes of this whole thing.. the magical, mystical CSS. I've seen a few people take a stab at this with varying degrees of success.. mostly very little. To begin with, it's helpful to understand how the Gravity Forms markup is structured. I could go into it in depth but that's not the focus here today. If you're a Gravity Forms customer, you can refer back to our handy, dandy visual guide (member's only link *) for more complete information.

In a nutshell, Gravity Forms are laid out in a nested list format. Each input, it's associated labels, descriptions, etc. are contained inside of a parent <li> element. This is great for most forms that are arranged vertically on the page. For our purposes today, that's not really ideal. We could try to float the containing list items, but that get's to be a huge pain really quickly because of sizing differences, clearing the floats and all that frustrating stuff that comes from working with them. Floats work well for some things but today I decided to go with my old friends "display:inline-block" and "width:auto".

/* make all the list items display inline */
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.gfield_html,
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle {
	display:0;
	display:inline-block;
	zoom:1;
	display:inline;
	width:auto!important;
	height:40px;
	line-height:40px;
	margin-right:5px;
}
	
/* hide the labels, descriptions & validation messages */
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle label,
body #gform_wrapper_2.gform_wrapper form.madlibform div.gfield_description,
body #gform_wrapper_2.gform_wrapper form.madlibform div.validation_message {
	display:none;
}

If you look at this closely, you'll see that with the "inline:block" rule, I'm simply telling the containing, structural list items - <li>'s to behave like inline elements. (note: inline-block isn't supported the same way in many browsers, so you have to use a few hacks to get cross browser support) I'm also setting a consistent height and line height for everything. The "width:auto" overrides the defaults, adjusts the container width to fit the enclosed content and lets everything flow inline nicely. You will notice that even with better specificity, there are still times you have to use the "!important" declaration to override other inheritance. I continued on hiding the labels, description text and validation message as I wouldn't be needing them for this layout. Once these rules were added, I was about 75% there.. the Mad Lib style form was taking shape. Just a few tweaks to margins, heights, etc and the new form was looking good.

For the demo, I wanted to go ahead and style the validation errors, put some nice styles on the form title, wrapper, button, etc. There were a few minor challenges, mostly with inheritance from other styles and a couple of browser inconsistencies (not at all uncommon when styling forms) but it wasn't that troublesome.

Go Fish

So, here's the point where I "teach you to fish". This demo just scratches the surface and was intended to give you something for inspiration. Yes Virginia, Mad Lib style forms ARE possible with Gravity Forms. There's no silver bullet script or CSS file to download though, you'll still have to hand craft your own form. I've zipped up the entire WordPress page template I used for this demo with all the styles inline, the CSS by itself and the exported form XML so you can download it, set it up on your server to scrutinize, deconstruct, play with and hopefully learn from.

Get Started

View Demo CSS  Download Demo Files

More Reading/Resources

* Gravity Forms owners get full access to support forums, documentation, downloads & additional resources.

About Kevin Flahaut

Kevin Flahaut

Kevin is a a partner at Rocketgenius, Gravity Forms developer, Webby Award nominated designer and front end developer.

He's also a Star Wars fan (not the lame prequels), native Texan, digs Apple products, loves Public Broadcasting, nature, science & travel shows, loathes reality TV, enjoys cooking & wine tastings, loves to joke around & relive his childhood (via eBay). He also tries not to take life too seriously if he can avoid it.

Twitter: @kflahaut
email:

2 Responses to "Gravity Forms Mad Lib Style Form Demo"
  1. Moshe says:

    Great tutorials - please keep these coming.

  2. Jay says:

    This rocks - thanks for sharing!!