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.

Contact Form 7 Plugin with Captcha
Contact Form 7 WordPress Plugin with Captcha

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.
Contribute
If you use Contact Form 7 think about contributing a buck or two so it can keep growing. I don’t make any money from this link, but I use the plugin so it’s worth saying.

19 Comments

  1. Posted July 1, 2011 at 5:36 am | Permalink

    Works a treat. Cheers

  2. Posted July 15, 2011 at 11:43 am | Permalink

    Nice post Finally I integrate this.

    Thanks for sharing us.

  3. Posted September 10, 2011 at 6:30 pm | Permalink

    Thanks so much for the info on styling Contact Form 7! Super-helpful.

  4. gulflee
    Posted November 8, 2011 at 11:26 pm | Permalink

    good tutorial, but i found ie7 not showing captcha text in

  5. Posted November 17, 2011 at 8:38 am | Permalink

    Thanks for these awesome fixes, they have really helped!

    So, I’ve done all the styling and included the captcha code from contact form 7 as well as the css fix listed above. Everything looks perfect except that you can’t type in the textarea to input the captcha code.

    Did I miss something?

  6. Posted January 16, 2012 at 10:11 pm | Permalink

    I am using Contact form 7 plugin with Captcha in my website. As a test I tried sending myself an email using the contact form. The message came up that the email was successfully sent; but I never received it in the designated email account.
    Please guide me?

    • Jerry
      Posted February 17, 2012 at 3:33 pm | Permalink

      I’m having the same problem as Daniel. Please assist.

    • Posted February 23, 2012 at 8:02 pm | Permalink

      I’m not sure why you’re having this problem. You may want to contact the plugin developer.

  7. john
    Posted February 23, 2012 at 6:23 pm | Permalink

    I would like to change the font color of the text that pops up after the send button is pressed. I need it to be a lighter color. I looked through the css code but can’t find where I would make the change. Any help is appreciated. Thank you.

  8. Posted February 27, 2012 at 8:00 am | Permalink

    thanks you so much for these! It helped a lot! Keep up the good work!

  9. farhan shah
    Posted June 27, 2012 at 8:03 am | Permalink

    Assalam o Alikum.It really great works.i integrates this.

    Thanks Alot.

  10. farhan shah
    Posted June 27, 2012 at 8:35 am | Permalink

    when i click the send button.it’s start the loading and does’t stop.plz help.

  11. Mark
    Posted August 1, 2012 at 7:32 pm | Permalink

    Eric,

    The styling looks fine and all appears as if it should work but any time I attempt to test the contact form, I receive a validation error and also the Captcha response always says the code I put in is incorrect. I get both of the following messages with every attempt:

    “Your entered code is incorrect”

    “Validation errors occurred. Please confirm the fields and submit it again.”

    Also, once I hit the send button, I’m relocated to the bottom of the screen on the same page. I have to scroll up to find out that the attempt failed.

    Any suggestions?

  12. Mark
    Posted August 1, 2012 at 8:04 pm | Permalink

    Eric,

    I found the problem by starting over and realizing I left a step out. That step was #8 above. I didn’t change the 3-digit number after I pasted the code into the Form. Spent to much time focused on the style sheet. With the symptom I mentioned in my last comment, perhaps this will help someone else that duplicates my mistake.

    All is well now. Now it’s off to the style sheet to make cosmetic changes to the contact form.

    Thanks for all the work and information!

  13. Joey
    Posted November 21, 2012 at 4:30 am | Permalink

    I installed the form and captcha

    but after this (at this point i got lost) “Add the Really Simple CAPTCHA to a Contact Form 7 form” as i can not “contact” “generate tag” etc…

  14. claudia monica
    Posted December 2, 2012 at 11:25 am | Permalink

    hi eric
    thank you for taking your time to share your codings.
    they are exceptional.
    I am quite new in codings and I am having a hard time to fix my contact form.
    check the link: http://grupoopus.com/gowp/?page_id=50

    I wonder why I have the blue dots.
    I also would like to have nicer Select File and Send buttoms.
    And finally, I would like to have the captcha show in bold red, maybe a little bigger.

    can you help me, pleeeeaaaaase?

    thank you.

    claudia

  15. Posted March 22, 2013 at 10:21 am | Permalink

    Thanks, this post was just what i needed to add the captcha code to the contact form. Quick and easy.

    Thanks again!
    Chris

  16. Jakob
    Posted December 3, 2013 at 3:41 pm | Permalink

    Hi

    Excellent style!
    Works perfectly in my responsive theme:-)

    I am a newbie so I have a problem making “attach file” or “file upload” functionality…
    I can easily generate the code in contact form 7, and it shows up correctly, the message is sent correctly, but the mail has no attachment upon arrival. Anyone maybe able to help me out here?

One Trackback

  • [...] Style the Contact Form 7 WordPress Plugin By Eric Hansel | Published: May 5, 2011 Contribute If you use Contact Form 7 think about contributing a buck or two so it can keep growing. I don’t make any money from this link, but I use the plugin so it’s worth saying. Want to use CAPTCHA? Contact Form 7 WordPress Plugin with CAPTCHA [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>