Official website of Jesse Friedman
  • Home
  • Articles
  • About Jesse Friedman
  • Inventor
  • Innovator
  • Speaker
  • Author
  • Writer
  • Contact Jesse Friedman
  • Home
  • Articles
  • How to Make Mad Lib Contact Forms in WordPress

How to Make Mad Lib Contact Forms in WordPress

on November 17, 2011

Share this:

  • Twitter
  • Facebook
  • LinkedIn
  • Reddit
  • Pinterest

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.

Related

css form html web design wordpress
Previous Verizon Wireless 4G LTE Coming to Providence Tomorrow Next Adobe Creative Suite Subscription Model

5 Comments for “How to Make Mad Lib Contact Forms in WordPress”

  • Jay says:
    June 15, 2012 at 3:41 pm

    Does the email that is generated keep all the text around the forms or is it just the fields that get emailed?

    Reply
  • jesse friedman says:
    June 16, 2012 at 3:47 pm

    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.

    Reply
    • Jay says:
      June 20, 2012 at 10:13 am

      Thanks for the insight. Could you post a snippet of what you use? And what template to change?

      Reply
  • Max says:
    July 2, 2015 at 5:03 am

    Dont forget to use a htaccess redirect for your old links! Seem not to work anymore.

    Reply
  • gilesdday says:
    October 11, 2017 at 9:16 pm

    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;
    }

    Reply

Leave a Reply Cancel reply

Your email address will not be published.

Subscribe to Jesse.blog, just the good stuff, no spam. Ever.

Join 3,724 other subscribers

Follow @professor

Jesse Friedman

1643 Warwick Ave
Suite 122
Warwick, RI 02889

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Privacy Policy
Connect
  • Twitter
  • Facebook
  • Instagram
  • LinkedIn
Details
  • About
  • Contact
  • Terms and Conditions
  • Privacy Policy
Jesse Friedman
  • Home
  • Inventor
  • Innovator
  • Speaker
 
  • Author
  • Writer
  • Articles
  • Other Jesse Friedman’s
Menu
  • Home
  • Articles
  • About Jesse Friedman
  • Inventor
  • Innovator
  • Speaker
  • Author
  • Writer
  • Contact Jesse Friedman