Building a Contact Page In WordPress With Contact Form 7

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. 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 building a contact page for your website is not too challenging, and with some extra effort, you can customize it to fit your site. I hope this gives you some ideas for places to start.

Tags: , , , , ,
Anonymous

John Locke is a web consultant, front-end developer, and web designer from Sacramento, California. In addition to helping clients reach their business goals, he runs several side projects of his own.

6 Comments

  1. Jenn Jenn says:

    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. Jenn Jenn says:

    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. Jenn Jenn says:

    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!

    • John Locke John Locke says:

      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:
      NOTE: The span tags will need to be angle brackets, <> , not square brackets, [ ]. I just wanted to illustrate.

      Your Name [span class="req"]*[/span]
      [text* id:name your-name]

      Title
      [text your-title]

      Company
      [text your-company]

      Your Email [span class="req"]*[/span]
      [email* your-email]

      Subject *
      [text* your-subject]

      Your Message [span class="req"]*[/span]
      [textarea* your-message]

      [file file-532]

      [submit "Send"]

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

  4. Peter Peter says:

    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”. :)

    • John Locke John Locke says:

      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 is kept private. Required fields marked *

*
*