Mad Libs style forms

In the short while since this site launched, I’ve had basically two kinds of email. The first is the kind I was secretly hoping for, expressing interest in my Magic in Type project. But the second caught me totally by surprise. I’ve actually had several people ask how I created that “Mad Libs” style fill-in-the-blank contact form.

It’s such a simple little thing but it seems to have struck a chord with several website visitors. It feels a little strange to write a whole post about it (as it’s not in any way groundbreaking)… but enough people have inquired, that I thought it might be nice to write up the process.

The motivation

I spend my day working for a huge global company with email at the center of our communication universe. Email is a way of life in our business, it just sort of comes with the territory. This, in and of itself, is not a problem for me. The problem is that a vast majority of people in this universe have no idea how to send an effective email. I may go into more specifics on this another time… but for now let’s call this enough information to understand why I styled my contact form this way.

I really just wanted a nice way to guide the hand of anyone writing an email from the website.

… and so, this fill-in-the-blank paragraph style form was born.

Write your prose

I thought I’d write the form like I write an email. With a structure that I like.

1. Tell me what you’re going to tell me (Subject)
2. add some detail about what you’re telling me (Body)
3. tell me how to reply to you, or find out more about you
4. say thanks, and send

You, of course, could make this say anything you want. Of course I know that this can be used for other types of forms. But for this example I’ll stick to the ‘contact me’ type form.

Simplest way to start is just write an email like you’d want to get it. Whatever the data is you’re collecting, just imagine someone saying it to you out loud, and lay out the paragraph that way.

Hi Rustin,
I’d like to talk to you about [something really cool].

[This is the really cool thing I’d like to talk to you about and I was hoping you might have something cool to say back to me.]

You can contact me by email at [foo@bar.com] or visit my website at [bar.com].

Thank you,
Fake Person

[ ] denotes the bits I’d like the user to fill in

The markup

Now we need to take that paragraph, and turn it into a form.

<form action="#" method="post">
<p>Hi Rustin,</p>
<p>I'd like to talk to you about <input type="text" name="your-subject" value="" size="40" />.</p>

<p><em>(Now tell me a bit more. Be as specific as you like.)</em><br />
<textarea name="your-message" cols="40" rows="10"></textarea></p>

<p>You can contact me by email at <input type="text" name="your-email" value="" size="40" /> or visit my website at <input type="text" name="your-website" value="" size="40" />.</p>

<p>Thank you,<br />
<input type="text" name="your-name" value="" size="40" /></p>
</form>


I just replaced the items I had in brackets with an appropriate form field.

The style

This is where we make the text fields look like blanks with a dotted underline.

First make sure the text entered in the boxes has the look you want.

input, textarea {font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; font-size: 1em; color: #000;}


Next, lets tell the browser what the empty text boxes should look like.

input {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px dashed #9EA6AA;
}
textarea {border: 1px dashed #9EA6AA;}


And finally we specify what should happen when the curser goes into the text box. I like to have the dashed underline turn solid.

input:focus{
border-top: none;
border-left: none;
border-right: none;
border-bottom: 1px solid #000;
outline: 0;
}
textarea:focus {border: 1px solid #000; outline: 0;}


Ready to roll

Really.. it’s as simple as that. I sort of wish there was some awesome magic making this happen, some secret I could let you in on. But all-in-all this is one of the simpler items that went in to creating this site.

Feel free to link over to the example and view source to see it in action.

I hope you’re able to use this technique in your projects. Feel free ask any questions you might have in the comments.