Menu

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 Back to Guides

Alright, everyone! Today is the last day for you to play our Mad iPad Giveaway contest and get registered to win a tricked out iPad. For those of you that have already played (thanks!), I thought I'd take some time to share 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 showing up 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 contest came out of 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 web page is flick your finger up or down on the screen.

Looking at that sentence, I looked at all the nouns an adjectives and realized that if I replaced some of the words like iPad, web page, finger and screen, that it could be a pretty 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 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 Contest

I made all of the fields required (so 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 contest to automatically turn the form on and off at the right time.

If you want to run a contest like ours, you might want to make it so you check off 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 get a list of the API Field IDs associated with each field. You can find this information in the Code Manager. It'll contain a list of your forms along with a table containing the fields and their IDs. Using that info and our Templating documentation, you can contstruct the templating tags needed to display 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}. That means from the entry for that form display the data for 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 I can use that style them differently and pop them out on the confirmation page using CSS. I can then use that text and insert them in text 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 emphasize the words that were entered by the user, you can stylize 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 on custom CSS.

Reporting

Once you're all done, 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 contest.

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!

Back to Guides


Don't have a Wufoo Account?

Wufoo makes creating HTML online forms fast, easy, and fun. No coding required.

Wufoo Signup Screen