Contact Form 7 is one of the most popular WordPress plugins. In fact, it’s been downloaded over a million times from the WordPress plugin repository. Why? It works, it’s dependable, and did I mention it’s FREE? Its only drawback, in my opinion, is that it can be a little intimidating to create anything more than the basic contact form, if you haven’t worked much with HTML. This tutorial will show you how to use CF7 to create a very simple questionnaire, like the one I use on my site for potential web design clients, with radio buttons, checkboxes, and text fields. You’ll be able to create one for yourself, even if you don’t know the first thing about HTML.
Here we go! I’ll assume you’re familiar with WordPress and know how to download and install plugins. If you need more complete documentation and instructions on getting started, you’ll find it by clicking “View details” on your plugins screen.
First, A Word to the Wise:
Be careful with plugins. If you need the functionality, by all means, find a plugin and use it. Not all of us are programmers, after all, and that’s what plugins are for! Before you click that install button, though, check a couple of things:
- When was the plugin last updated? If you get a warning saying “This plugin hasn’t been updated in two years,” you might want to find another.
- How many times has it been downloaded? Higher numbers are usually better.
- Check the support forum. Is it an echo chamber of unanswered questions? If so, be aware that you might be on your own if you run into problems with it.
Take a guess how most malicious code finds its way into WordPress sites. According to WP Mayor, a prominent blog on WordPress, plugins were responsible for 22% of hacked WP sites in 2013. If you’re curious, you can read more here. It might surprise you to know that passwords were only the culprit in 8% of the hacked sites. This is why I’m warning you. Don’t go downloading plugins like a drunken
We’ll also be adding one more plugin, an extension of Contact Form 7, called Contact Form 7 Skins. As you might guess from the title, these are simple “skins,” or templates, for more complex uses than the default contact form. When you install and activate it, they’ll automatically show up below the editing screen for your contact forms.
To begin a new form, simply select “Add New” from the “Contact” menu item on the left side of your dashboard screen. By default, you’ll see the text and markup for a basic contact form in the editor. Select your template, and that default contact form will be replaced by the template’s text and markup.
I chose “Event” because it was the best fit for my questionnaire. There are radio buttons (those round dots that you click to make an either/or choice), dropdown selections, checkboxes, and text fields (single-line and larger text area). Just what I was looking for!
Part 1: Entering your Questions in the Questionnaire
What you see below is the input that showed up on my editing screen after I selected the “Event” template. You can delete the fields you don’t need, and swap their text for yours, in the fields you want to keep.
I kept the standard name and email fields, because I wanted those at the top of my questionnaire. At the top of the editor are the types of fields you can choose to insert into your form–text, email, URL, tel, etcetera. In my first field, “Name” is the text that shows up just before that text entry field on the questionnaire, so your visitor knows what to enter in that field. After the “Email” field, I clicked the “Checkboxes” tab at the top, then entered my own three choices to replace the default “Option 1,” “Option 2,” and “Option 3.” Below that, I set up radio buttons and another text field.
Easy, peasy, and you don’t even need to know HTML! If you’re curious, though, those <li> and </li> are tags that surround lists in html. The <ol></ol> tags that enclose the <li> elements mean this is an ordered (numbered) list. The <br /> tags give you line breaks.
(If you’d like to pick up some basic html, though, you should check out this beginner reference from the Mozilla Developer Network. It isn’t really necessary if you’re only building very basic WordPress sites, but there are times it comes in handy.)
If you’re familiar with CSS and would like to style your elements, it’s easy to assign classes or id’s to these fields. When you click on an element that you’d like to appear in your page, simply assign a class or id where indicated on the pop-up, and style away!
Part 2: Configuring the Email You’ll Receive
There are really only a couple of things you need to know to make sure that all the data entered into your questionnaire form actually shows up in each email you receive.
- The questionnaire template fields do NOT automatically show up in the body of your message. You have to add them, but it’s very easy.
- The tags at the top match the fields you created for your questionnaire, but the syntax is just a little different. (For instance, this: <li> Name [text cf7s-name] </li><br /> from your template is the same as this: [cf7s-name] under the “Mail” tab.
Go to the fields at the top, and enter those in your “Message Body,” like this:
When your visitors submit their questionnaires, they should show up in your email with all the data they entered.
As you can see, working with the CF7 templates is within just about anyone’s skill set. With the options for adding the forms into posts, pages, or text widgets, along with the ease of assigning classes for CSS styling, this is a flexible and extremely useful tool. Imagine all the uses you could find for one of these babies in a text widget on your home page or in your sidebar!
If you found this post helpful, feel free to leave a comment or share. Now go get your form on!