Building a Contact Page In WordPress With Contact Form 7
For most websites, getting users to the contact page is a primary mission.
Building a Contact page in WordPress with the Contact Form 7 plugin makes that process easy.
Contact Form 7 is the most popular contact form plugin on the WordPress plugin repository, with over 5 million active installations.
Today I will show you how I set up and customize my contact forms with this plugin to make them more effective.
Building a Contact Page
After you install and activate Contact Form 7, you will see it has its own module on the backend navigation. When you hover on the Contact link, you have two options: Contact Forms and Add New. The Contact Forms link takes you to your saved forms. Let’s set up a New Contact Form.
The area at the top is the title of your contact form. You can change this to something easy to remember, so you can differentiate it from your other forms later.
There are some basic inputs and labels set up already: Name, Email, Subject, Message, and then a Send button. The parts of this form in square brackets, such as [text* your-name]
, are shortcodes. The important thing to know is they will be rendered as HTML when added to your Contact page. The first part of each shortcode is the name
of the input. These will be used to collect information and build the email. Any shortcodes with an asterisk are required fields, and the contact form will not be submitted if these are not filled out.
To the right of the form builder is a menu for adding additional input fields. Most of these are self-explanatory.
For now we will add a drop down with three choices, each one on a separate line. Check the appropriate box if you want a blank line at the top of the drop-down, or it you want it to be a required field. Copy and paste the shortcode into the form, add the appropriate label, and save the form.
Below the form builder, are two columns for building the emails. The one on the left is what the user is sending to you, the one on the right is what you will receive. Notice that the shortcode names are used to build these email headers and messages.
On the left, change the email address to the one you want to receive the contact form at. On the right, simply add any shortcodes that you added to your contact form. In this case, I am going to add our drop down value, [menu-415]
. You must add anything information you want to receive from the contact form here, or it will not be added to the email.
Copy the contact form shortcode into your page and Save Draft.
Adding Some Polish to Our Contact Form
Before I publish this contact form, I want to make some small changes. I’m going to replace the p
tags with label
tags, to make this form more semantic for search and accessible for screen readers. Adding id:id-value-here
to each input shortcode will add an id
attribute in the rendered HTML. Make sure the id
of the input and the for
attribute of the label
match.
<label for="name">Your Name <span class="req">*</span></label><br />
[text* id:name your-name]
<label for="email">Your Email <span class="req">*</span></label><br />
[email* id:email your-email]
<label for="subject">Subject</label><br />
[text id:subject your-subject]
<label for="choice"></label><br />
[select id:choice menu-415 "Yes" "No" "Maybe"]
<label for="message">Message</label><br />
[textarea id:message your-message]
<p>[submit "Send"]</p>
I’m also going to replace the required statements with an asterisk. You can tell users the field is required in whatever way you feel is most appropriate.
This is how our contact form is looking so far. Nothing fancy, completely functional. Let’s add some CSS to make the form look a little better.
/* To make our Asterisks stand out */
.req {
color: red;
}
/* Styling the Submit button */
.wpcf7-submit {
background-color: green;
border-radius: 9px;
color: #fdfdfd;
font-size: 1.125em;
padding: .5em 1.25em;
}
/* Making all the inputs look the same */
form input, textarea, select {
background-color: #e7dff3;
-moz-box-shadow: inset 0 1px 5px #f2d4a2;
-webkit-box-shadow: inset 0 1px 5px #f2d4a2;
border: 2px inset;
box-shadow: inset 0 1px 5px #f2d4a2;
color: #333;
display: block;
max-width: 90%;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
/* Highlight input currently in use */
form input:focus, textarea:focus, textarea#comment:focus, select:focus, select:active {
background-color: #fcfcfa;
box-shadow: 0 0 5px #db5f15;
outline: none;
}
Customizing Error and Success Messages
The bottom part of the contact form builder allows you to customize the error, validation, and success messages as well. I like to tailor each of these to reflect the tone and voice of the specific website.
You can also style the backgrounds of these response messages with CSS to fit the color tone of the particular site. I add these to my main style sheet, so they won’t be overwritten when the Contact Form 7 plugin is updated.
/* Styling the Warning message */
.wpcf7 .wpcf7-form div.wpcf7-validation-errors {
background: rgba(224, 203, 43, .35);
width: 77%;
}
/* The warning and success messages */
.wpcf7 div.wpcf7-response-output {
background: rgba(35, 125, 15, .25);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.3125em;
line-height: 1.3em;
margin: 2em 0.5em 2em 0;
max-width: 20em;
padding: 1em 0.5em;
}
/* The error message */
span.wpcf7-not-valid-tip {
background: rgba(240, 114, 114, .35);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
color: #e01a1a;
font-size: .775em;
left: 0;
padding: .125em;
position: relative;
top: 120%;
width: 40%;
}
As you can see, you can build a contact page for your website, and with some extra effort, you can customize it to fit your site. I hope this gives you some ideas for places to start.
Hi! This is very helpful but where do I enter the CSS to make my asterisks red? I have been reading things for hrs and trying all kinds of different things but nothing is working to turn the asterisk red in my contact form 7 plugin. I tried to enter the tags in just as you suggested but when I try to add .req {
color: red;
}
It doesn’t do anything. I changed all the tags back to the way they looked before so I don’t mess anything up. ANY suggestions you could give me would be really helpful! THANK YOU!!!!! This is what I have of now:
Your Name *
[text* id:name your-name]
Title
[text your-title]
Company
[text your-company]
Your Email *
[email* your-email]
Subject *
[text* your-subject]
Your Message *
[textarea* your-message]
[file file-532]
[submit “Send”]
Im not sure why but the tags didn’t come through when I sent it the first time
Your Name *
[text* id:name your-name]
Title
[text your-title]
Company
[text your-company]
Your Email *
[email* your-email]
Subject *
[text* your-subject]
Your Message *
[textarea* your-message]
[file file-532]
[submit “Send”]
well its still not working! I don’t know why i can’t copy and paste it. ugh! Im giving up for tonight. Sorry for sending so many comments!
Hi Jenn:
Many comments sections block certain HTML tags as a security measure. Sorry about the confusion.
To set up the asterisks, you have to add them to the label for each Required input. You must then wrap the asterisks in a span tag with a class of “req”. When finished, it should look something like this:
The CSS can be added to your style.css file under Appearance > Editor
Hi John,
Thanks for sharing. Have you tried CF7 styling with Ninja Kick Form? http://code.tutsplus.com/tutorials/mini-guide-to-contact-form-7–wp-25086
Actually it doesn’t allow to make styling with it, just three themes included. But design looks good. Maybe it could be helpful for “noob users”. 🙂
Hi Peter:
I haven’t had a chance to use the Ninja Kick Form yet. From the Code Canyon page, it looks pretty, but with any plugin, there is going to be some learning curve for novices with problems that are not standard.
NKF looks like it speeds up the process of making a sidebar contact form look great. I’d have to work with it myself to form a final opinion, though.
The CodeTuts link is worth a look — it covers a few things I might use in the future.