Building Custom Contact Forms in WordPress

An easy to use and understand contact form is a must for any site.  Not only does it allow to connect with readers on a blog site, but potential customers may look elsewhere for a product if you can’t answer their questions.
In this post I’ll be showing you how to get started using Contact Form 7 plugin to create custom contact forms on your site.  I’ve tried both Jetpack and Contact Form 7, and I personally prefer Contact Form 7.  CF7 is an easy to use and flexible plugin, but I find that the documentation can be a bit confusing.  Hopefully I can clear some of that up within this post.


Getting Started

 
Firstly, download the plugin and install it either from the website here: https://wordpress.org/plugins/contact-form-7/
or through the plugin area of your admin.

Once the plugin is downloaded, navigate to your admin sidebar and find the “contact” option.

Contact-Form-Admin

 

By default, there will be a simple contact form created by the plugin. You can use this as a template for your own contact form, or you can create a new one from scratch.

default-form

 

In this example, the default template is going to be a great start for my site.  I do, however, need to add a phone number option, a selection for the best time to call my prospective customer, and a simple math question.  The math question will help to prove that they are indeed human, and not a spam bot.


Adding Custom Fields

 

Open the contact form, and lets get started editing it.

To add a phone number, click the Tel button:

phone-number-button

You can set some placeholder text if you like, but I’ll be leaving it blank and adding a label to it.

generate-phonenumber

 

The added tel input should look something like this.  Take note of the “label” that’s wrapped around the tel input.  This is how your contact form fields are named.  This method works only for items that have a single property:

<label> Phone Number
 [tel tel-51] </label>

 

Next, let’s add an option for our visitor to select a best contact time.  Click the “checkboxes” button:

checkbox-button

Then configure the settings as such:

checkform-fields

This is what the end result should look like in the form configuration screen:

Best Time to Contact
[checkbox checkbox-718 label_first "Morning" "Midday" "Afternoon"]

 

Note the “label_first” part of the shortcode.  When using a property with multiple selection options, wrapping the elements with the default <label></label> html will not work.  It was a bit confusing for me at first to understand how to properly label a checkbox, but clicking the “Put a label first, a checkbox last” option will add the label_first to your checkboxes.

 

Finally, I’d like to add a random simple math question to help prevent spam.  To do so, first click the “quiz” button:

quiz-button

 

Within the editor, not all of the options within the plugin are immediately apparent.

math-quiz-fields

Add the math question by setting the title to “random-math-quiz.”  The plugin documentation doesn’t specifically outline how to add this, but I was able to figure it out.  The math should look like this when configured properly.

[quiz random-math-quiz "12+8=?|20" "22-9=?|13" "10+9=?|19"]

 

The final contact form text side should look like this.

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

 <label> Your Message
    [textarea your-message] </label>

<label> Phone Number
    [tel tel-51] </label>

<label> Best Time to Contact </label>
[checkbox checkbox-718 label_first "Morning" "Midday" "Afternoon"]

[quiz random-math-quiz "12+8=?|20" "22-9=?|13" "10+9=?|19"]

[submit "Send"]

Form Placement

 
After you’re happy with the configuration of your contact form, you need to place it on your site.  To do this, simply copy the form shortcode, and place it in any text editor on your site:

copy-shortcode-1

 

copy-shortcode-2

 

copy-shortcode-in-editor

And when output on a page, it should look like this:

(no one responds to this form)

Your Name *

Your Email *

Subject

Your Message *