Contact Form 7 WordPress Plugin with CAPTCHA

I received a question on the post I wrote about styling the Contact Form 7 WordPress Plugin that asked “did you happen to come across the captcha? How do you integrate it?”. Contact Form 7 has built in support for the Really Simple CAPTCHA Plugin and it’s rather easy to integrate and style.

In this post I’m going to show you what’s needed to get the Really Simple CAPTCHA Plugin working and how to style it so it looks like it belongs in my previous post about styling the Contact Form 7 Plugin.

The Really Simple CAPTCHA WordPress Plugin

The first thing you need to do is install the Really Simple CAPTCHA Plugin. I’m assuming you’ve already installed the Contact Form 7 WordPress Plugin and have styled it according to my earlier post. If not, install it and read this post. If you already have the Contact Form 7 installed and styled continue reading.

1. Login to your WordPress installation.
2. Go to “Plugins” and click “Add New”.
3. Type “Really Simple CAPTCHA” into the search form and click “Search Plugins”.
4. When the page reloads find “Really Simple CAPTCHA” in the list of plugins and click on “Install Now”.
5. Click “OK” when you’re asked “Are you sure you want to install this plugin?”.
6. Once the page reloads click “Activate Plugin”.

After the Really Simple CAPTCHA installs and the page reloads it’s time to add it to your contact form.

Add the Really Simple CAPTCHA to a Contact Form 7 form

1. Under “Contact” click “edit”.
2. When the page reloads click on “Generate Tag”.
3. Once you click on “Generate Tag” a drop-down menu will appear.
4. Click on “CAPTCHA”. Here’s the confusing part. After you click “CAPTCHA” a bunch of fields and two shortcodes are generated. At the bottom of all this confusion you’ll see 2(two) brown boxes, these are your Shortcodes. At a glance they look the same, but they are not. The first shortcode starts with captchac, and it created the CAPTCHA. The second starts with captchar and It creates the field that you type the CAPTCHA into. You need both Shotcodes.
5. You should see something like this. [captchac captcha-758] and [captchar captcha-758]
6. Write down the number that’s generated. In this case it’s “758”, but your number may be different (I’m not sure if the number matters, just make sure it’s the same).
7. If you’ve used my post on styling the Contact Form 7 this next part should be pretty easy. Just above the < li id=”submit” > add this code: (make sure you replace “758” with the number you wrote down).

   <p class="captchac">[captchac captcha-758]</p>

8. Right below the line you just added add this code (Again replace 758 with the number you wrote down):

   <li class="captchar"><span class="text">Enter the Above Text</span><span class="required">(*)</span>[captchar captcha-758]</li>

9. Click “Save”. You now have a CAPTCHA in your form. Go to your Contact page and check it out, but continue reading because you’re not finished. It looks good, but there’s one problem, if you click on the text area to type in the CAPTCHA the form is beneath the “Enter the Text Above” label.
10. No problem though, we can fix this pretty easily with a bit of CSS. Locate the CSS style that you used to style the Contact Form 7 plugin in your CSS file.
11. Below the Contact Form 7 style we’ll add some style for the CAPTCHA. We want to get rid of the bottom margin on the CAPTCHA so it doesn’t look so out of place with the rest of the form. Add this

    #contact p.captchac{ clear:left; margin:0; }

12. Now we need to adjust the text indent on the CAPTCHA input form. After the CSS you just added, add this

    #contact li.captchar .wpcf7-form-control-wrap input{ text-indent:130px; }

13. Double check your contact form and make sure it looks ok. If it does, your all set, if not leave a comment below and I’ll try to help you as much as I can.