I love Mad Libs, they are so much fun. I remember as kids we’d worry about getting into trouble because we’d always fill the blanks with colorful expletives. There’s something fun about “filling in the blank” whether it be Mad Libs or a game or in this case a form.
I decided to put a Mad Libs style form on this site because of two reasons. One, I thought it’d be a fun styling challenge and two I’ve heard that they convert better. There are a few articles out there referencing this, most are referring to Jeremy Kieth’s Huffduffer Sign-up Form shown below.
[note]”Mad Libs” Style Form Increases Conversion 25-40% – Luke Wroblewski [/note]
Now I am not asking people to sign up for a service so creating a narrative around filling out a contact form may not increase conversion. In fact it may inhibit it. If I’ve gotten people to the point where they want to send me information or request a quote and they find this form style difficult then it can have a negative effect. However I’m willing to try and see how it goes.
If you’re interested in how I did it, I’m using the Contact Form 7 plugin for WordPress. Below is a screenshot of the Contact Form 7 settings so you can see how it looks. I combined the “placeholder” attribute with some css to create the desired effect.
If you’re using a “Mad Libs” type form on your site I’d love to see how you do it and know if it actually converts better for you.
Jesse Friedman has been building websites for 18 years, and exclusively with WordPress since 2006. Since then Jesse has written several books, taught 100’s of students as a professor, and organized dozens of local meetups along with a few WordCamps.
Jesse has spoken at tech conferences around the world including SXSW, HOW, Future events and many more. Jesse has consulted for a wide array of companies from small agencies to multi-billion dollar international companies.
Today Jesse is a proud team member of Jetpack at Automattic, where he spends his time growth hacking and building strategic partnerships.
Does the email that is generated keep all the text around the forms or is it just the fields that get emailed?
Hi Jay
This is something you can do easily by passing the wrapped content in your php. I prefer to see the wrapped content in my emails so I get the full context.
Thanks for the insight. Could you post a snippet of what you use? And what template to change?
Dont forget to use a htaccess redirect for your old links! Seem not to work anymore.
This is the css code i used.
.wpcf7-form-control-wrap {
display: inline-flex;
}
.wpcf7-text {
background-color:transparent !important;
color:black !important;
border-bottom:dashed 2px !important;
border-left:none !important;
border-top:none !important;
border-right:none !important;
}
.wpcf7-text::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: white;
}
.wpcf7-text::-moz-placeholder { /* Firefox 19+ */
color: white;
}
.wpcf7-text:-ms-input-placeholder { /* IE 10+ */
color: white;
}
.wpcf7-text:-moz-placeholder { /* Firefox 18- */
color: white;
}