How to Create Your Own Mad Lib Form with Wufoo

Use Wufoo to create your own Mad Lib forms and share it with friends.

Not already signed up for Wufoo? Let's get started!

By: Kevin Hale

Alright, everyone! Today is the last day for you to enter our Mad iPad Giveaway competition and get registered to win a pimped up iPad. For those of you who have already entered (thanks!), I thought I'd take some time to share with you how we created the fun Mad Lib part using the various features in Wufoo. The Mad Lib form uses a number of our features and showcases just how versatile Wufoo's system is for designing really creative data collection experiences.

Pick a Story

This is probably the most difficult part about creating a Mad Lib form. Like most things that are funny, you have to have a good handle on the punchline. In a Mad Lib, that means revealing a funny story that's the result of unexpected words occurring in a fairly simple story. If you're looking for some inspiration, there's a great set of ideas that can be found over at It's a Mad Libs World! The inspiration for our Mad Lib in the competition came from an excerpt I saw from a press release about the iPad:

With the iPad, navigation has never been easier or more intuitive because you use the most natural pointing device there is: your finger. All you have to do to scroll through a webpage is flick your finger up or down on the screen.

Looking at that sentence, I looked at all the nouns and adjectives and realised that if I replaced some of the words, such as iPad, webpage, finger and screen, it could be quite a funny story. With that in hand, I wrote a fake press release for an innovative company coming out with a new revolutionary product and created a list of all the key nouns and adjectives that I wanted the user to replace with their own words.

Design the Form

With the list of words I needed from the user, I quickly designed a form in Wufoo asking for those words.

WufooiPad2

Make the email field not allow duplicates for the Mad Lib Competition

I made all of the fields required (so that our story doesn't have any gaps), and I also asked for an email address on the first page of the form so that I could email a copy of the completed story to the user as a keepsake.

Use form scheduling for the competition to automatically turn the form on and off at the right time.

If you want to set up a competition like ours, you may want to tick the No Duplicates validation for the email address field so that only one unique entry can be submitted at a time and also use our Form Scheduling feature to set the start and end dates for when the form is active and collecting entries.


Templating

Getting the API Field IDs for Templating

The feature that makes the Mad Lib form just work is Wufoo's Templating system. It allows you to take the data sent by the user and send it back to them on a confirmation page, inside a confirmation email and even in a payment receipt and invoice.

To use templating in Wufoo, you'll first have to obtain a list of the API Field IDs associated with each field. You can find this information in the Code Manager. It will contain a list of your forms along with a table containing the fields and their IDs. Using that information and our Templating documentation, you can construct the templating tags that are needed for displaying the data on the confirmation page. For example, if I want to display what the user entered for the Fruit field, I find the field ID for that field, which is 115, and then use that to create the proper template tag, which is {entry:Field115}. This means from the entry for that form display the data for the field with an ID of 115. So using that, I mapped the fields and their appropriate tags into the story I wrote earlier like so:

{entry:Field115} Releases New Revolutionary {entry:Field116}

{entry:Field115} today introduced {entry:Field116}, a revolutionary device for browsing {entry:Field123}, enjoying {entry:Field117}, watching {entry:Field119}, playing {entry:Field120}, reading {entry:Field122}, and much more. The {entry:Field126} Multi-Touch screen on {entry:Field116} lets you see {entry:Field125} as they were meant to be seen — one {entry:Field124} at a time. With {entry:Field116}, navigation has never been easier or more intuitive. Because you use the most natural pointing device there is: your {entry:Field127}. All you have to do to scroll through a {entry:Field124} is flick your {entry:Field127} up or down on the screen. At just {entry:Field134} inches thick and {entry:Field135} pounds, {entry:Field116} is thinner and lighter than any {entry:Field128}. Unlike {entry:Field139}, which is {entry:Field130} for {entry:Field131} people, {entry:Field116} is {entry:Field136} done right.

Inserting the templating for Mad Lib in Confirmation Message

Please note that I also wrapped each template tag in some bold tags so that I can use that to style them differently and pop them out on the confirmation page using CSS. I can then use that text and insert them in text that I want to show on the Confirmation page. Because I also wanted to let the user get a copy of the entry when they left, I also set up the confirmation email to use the same templated info.

Wufoo iPad Email

Custom CSS

If you want to make your Mad Lib story a little more fancy and emphasise the words that were entered by the user, you can stylise those bold tags around the template tags with some custom styles. In Wufoo, you can use our Theme Designer to attach your own CSS style rules in an external stylesheet. I uploaded a CSS file to Amazon S3 called contest.css with the following CSS rule to highlight those tags.

.confirm b{
border-bottom:2px solid #ccc;
padding-bottom:3px;
color:#000;
}

Now, when the user submits the form, the confirmation page will underline and highlight the users' words like so:

WufooiPad4

You can learn more about using your own CSS Stylesheet in our documentation about custom CSS.

Reporting

Once you've finished, you can even create a report that will show the most popular answers for each word you asked for the Mad Lib. Here's a link to our report for the Mad Lib competition.

MadLib Report

And that's it! The form doesn't take very long to create and our users seem to be getting a kick out of making their own revolutionary product announcements. Please give it a try and enjoy making your own Mad Libs!