How to Set up Your Blog’s Contact Page to Use Contact Form 7

A Contact page is a “must have” element that your blog can’t live without­—it’s right up there with your About page in importance. It encourages more interaction with your readers, and brings about opportunities for advertising and guest posts.

So, a couple of weeks ago, I added a Contact page to The Hobby Blogger. Though it would have been very easy to just post my email address on the Contact page, it also would have made it very easy for ne’er-do-wells to harvest the address and start spamming away.

Solving that problem is easy with a contact form plugin, which let’s your readers send an email to you by filling out a simple form.

Why I chose Contact Form 7

I did a lot of reading trying to find the best form plugin. Out of the plugins available on WordPress.org, Contact Form 7 is the most popular and highly rated. Other free plugins that I saw mentioned frequently in reviews and comment sections are Fast Secure Contact Form, and cforms II.

Formidable Forms seems to be gaining traction, offering a basic free version as well as paid pro package. On the paid side of the spectrum, Gravity Forms is well reputed, but it costs $39 for a single site.

Besides cost, I couldn’t find any major knocks against the above plugins, so I decided to stop wasting time and go with Contact Form 7.

In this post I’ll show you how to:

  • Create a contact form on in WordPress using Contact Form 7.
  • Replace the default spam-preventing Really Simple CAPTCHA with Google’s reCAPTCHA.
  • Add some code to your theme’s functions.php file to keep the Contact Form 7 software from loading on pages that don’t use the form.

Basic setup

Inserting the form on your Contact page is pretty straightforward.

Install plugin

Install CF7 by going to Dashboard > Plugins > Add New and enter “contact form 7” in the search box. Contact Form 7 should be at the top of the search results. Click the “Install Now” link. When the installation finishes, click the “Activate Plugin” link at the bottom of the status page.

Create Contact page

If you haven’t already, go to Dashboard > Pages and create a new page for your contact form.

If your permalinks use the page title for the page URL, edit the Contact page’s permalink to “yoursite.com/contact” in order to make it easier for visitors to enter the URL in their browser’s address bar.

WordPress Contact Page Slug

Insert contact form into Contact page

Follow the tutorial on CF7’s site.

Insert Contact Form 7 In WordPress

Preventing spam with reCAPTCHA

Contact forms are vulnerable to spammers using automated software (aka bots) to fill out and submit contact forms. An effective way to fight this form of spam is to require users to solve a (somewhat) simple puzzle before the submission is accepted.

CAPTCHA, an acronym for Completely Automated Public Turing Test To Tell Computers and Humans Apart, is such a test. It works by creating an image of distorted text that only humans, and not computers (hopefully), can solve by retyping the text in a small form.

CF7 natively supports Really Simple CAPTCHA, but it looks too simple to crack (solve automatically), so I decided to use Google’s reCAPTCHA instead. Admittedly, I don’t if many spammers actually try to crack CAPTCHAS.

Also, the cool thing about reCAPTCHA is that its service helps to digitize books and newspapers–a worthy cause.

In order to use reCAPTCHA with Contact Forms 7, follow the steps below, which include installing and activating two plugins:

  1. Install and activate the WP-reCAPTCHA plugin.
  2. Sign up for reCAPTCHAand create your public and private security keys (you’ll need a Google account).reCAPTCHA Security Keys
  3. Copy the public and private keys from Google reCAPTCHA site, and paste them into WP-reCAPTCHA panel.WP-reCAPTCHA Settings
  4. Uncheck the boxes next to “Enable for comments form” and “Enable for registration form” if you’re not using these features.
  5. Click on the “Save reCAPTCHA Changes” button.
  6. Install and activate the Contact Form 7 reCAPTCHA extension plugin.
  7. Navigate to the “Form” section at the top of the Contact Form 7 settings panel.
  8. Click on the “Generate Tag” dropdown menu and select “reCAPTCHA.”Generate reCAPTCHA Tag for Contact Form 7
  9. Copy the code snippet and paste it into the “Form” box.Contact Form 7 reCAPTCHA Tag
  10. Save the form.

Speed optimizations

A significant issue with Contact Form 7 is that it loads its JavaScript and stylesheet code on every one of your pages, regardless of whether or not they have a form. This has the potential to slow your site down. If fact, after installing CF7 my Google Page Speed Score went from 80 down to 77.

I should mention that the score isn’t a measure of how fast your site loads; it’s an indication of how well your site is optimized for speed. A low score means that there’s room for improvement. A perfect score of 100 means you’ve implemented every possible optimization.

Anyway, about a month ago, Jimmy Pena posted an elegant solution in a comment on WPBeginner. It’s a modification of WPBeginner’s method, but Jimmy’s is better because it’s more computationally efficient.

All you have to do is paste this code at the end of your theme’s functions.php file:

// Deal with Contact Form 7 JS and CSS loading on every page
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {
    // automatically deregister the wpcf7 js script
    wp_deregister_script( 'contact-form-7' );
    if ( is_page('contact') ) {
        // load the script only on the contact page
        wp_enqueue_script( 'contact-form-7' );
    }
}

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );
function my_deregister_styles() {
    // automatically deregister the wpcf7 style
    wp_deregister_style( 'contact-form-7' );

    if ( is_page('contact') ) {
        // load the style only on the contact page
        wp_enqueue_style( 'contact-form-7' );
    }
}

The first code block takes care of the JavaScript, and the second block deals with the CF7’s stylesheet.

See where the code says 'contact_form_name'? Whatever is between the quote marks should match what you entered earlier for the Contact page’s slug.

Contact Page Slug for Optimization Code


Update 8/28/13: Jason Mathes of avgjoegeek.net had a great question: what if you have a contact form on multiple pages? How do you modify the code above so that the JavaScript and CSS is loaded on those pages?

In that case, you have to specify an array of page slugs in each of the two “if” statements. So if you have contact forms on your About, Contact, and Services pages, and they have the slugs “about”, “contact”, and “services”, respectively, the two “if” statements change from:

if ( is_page('contact') ) {

to

if ( is_page( array( 'about', 'contact', 'services' ) ) ) {

End update

Once you’ve finished the draft of your contact page, test the form by sending an email from a preview version of your new Contact page. If you receive the email, your contact form is ready to go, and you can publish your new Contact page.

Now you’ve given your readers (and potential advertisers) a safe and hassle-free way to get in touch with you.

Leave a comment telling us what you use for your contact form.

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Hi, Bryan

    This obviously is great article about WordPress plugin that works. I also use Contact Form 7 for my contact page. It looks good and professional.

  2. Was any one of you ever contacted through the contact form?

    Not me.
    Through comments and message system of YouTube, e-mail, whatever else channel that is open, but not even once through the contact form of the blog, despite the count of about 300 readers per day. Besides, it looks exactly like yours, excerpt that it also provides ability to attach the file.

  3. Nice article Bryan, that you well explained to setup contact form for a WordPress blog. I’m also using Contact Form 7. Its just very easy to use. I didn’t got time to check all of its features though. Does it have option to create Drop-Down option to allow users to choose for what topic they are contacting us?

  4. Well done!

    I’m using contact form 7 plugin. Have not faced any issue with it yet! :D

  5. Thank you thank you!!! I finally got it working. I have to send the plugin developer some coffee money

    • Bryan Kerr says:

      Sure thing, Sean. Double-check your sidebar widths. I’m looking at your site on Chrome on a Snow Leopard Mac and the right side of the captcha is cut off.

  6. Hi,
    I have followed the same procedure as mentioned by you for using reCaptcha..
    I am getting a problem.. as soon as i click on send button a spinning (processing) thing appears and it doesn’t stops.. any suggestion on the same??

  7. how to set blogspot please tell me?

  8. Hey Brian,
    Can I get Contact Form 7 to send a customer to another page on my website automatically once they have filled in their details. If so how?

    Thanks,
    Mike

  9. Hi,
    Nice tutorial on how to add contact form in WordPress blog using Contact form 7.
    Thanks,

  10. Bryan – hope all is well with you! I have a question about the script you have on here. How would I implement it to only run on a few different pages instead of just the one? I have multiple contact forms setup on About/Contact/Services etc… so it wouldn’t work for me to be able to use it. – Thanks!

Speak Your Mind

*