Blog: WordPress
Tin Can telephone

Building a Contact Page In WordPress With Contact Form 7

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

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.

Contact Form 7 UI

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.

Contact Form 7 Title

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.

Contact Form 7

To the right of the form builder is a menu for adding additional input fields. Most of these are self-explanatory.

Contact Form 7 Generate Tag

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.

Contact Form 7 DropDown

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.

Contact Form 7 Mail Headers

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.

Building a Contact Page With Contact Form 7

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.

Contact Form 7 Code Changes


<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.

Building a Contact Page With Contact Form 7


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

Building a Contact Page With Contact Form 7

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.

Contact Form 7 Messages

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.

Contact Form 7 Messages


/* 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.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown SEO.

6 comments on “Building a Contact Page In WordPress With Contact Form 7

  1. 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”]

  2. 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”]

  3. 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!

  4. 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:

    
    <p>Your Name <span class="req">*</span>
    [text* id:name your-name]</p>
    
    <p>Title
    [text your-title]</p>
    
    <p>Company
    [text your-company]</p>
    
    <p>Your Email <span class="req">*</span>
    [email* your-email]</p>
    
    <p>Subject <span class=">*</span>
    [text* your-subject]</p>
    
    <p>Your Message <span class="req">*</span>
    [textarea* your-message]</p>
    
    [file file-532]
    
    [submit "Send"]
    

    The CSS can be added to your style.css file under Appearance > Editor

  5. 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.

Join the Conversation

Your email address will be kept private. Required fields marked *.