Some of the first articles I wrote for this blog showed you how to build a website using WordPress. As I’ve found out over the last year, many people have followed those articles and are now running successful blogs of their own. In fact, I just received an email from a reader that used the information I provided in those articles to create her own blog. She also followed another article of mine that listed some of the WordPress plugins I’m using on this site. One of the plugins she chose to use is a plugin called “Contact Form 7” which provides you with a simple feedback form for your contact page.
Providing your visitors with an easy to use feedback form is a double-edged sword. Not only does it provide an easy way for your site visitors to contact you, it also makes it easy for bots (automated programs) to fill your inbox full of spam as the reader above recently found out. Over the weekend, she received over 500 emails from her site, all of which turned out to be junk mail and she wanted a way to keep this from happening again. So, she sent me an email explaining the situation and asked if I had any tricks that could help her. Lucky for her, I’ve already ran into this problem before and had a solution; a solution I’m going to share with you now.
It’s called “CAPTCHA”. For an explanation of what CAPTCHA is and what it can do for you, be sure to checkout my article that shows you how to create CAPTCHA using PHP (http://www.prodigyproductionsllc.com/articles/web-design/php-captcha-script/). The technique described in this article only works with the Contact Form 7 WordPress plugin. But, CAPTCHA is available for all other web applications and tools. Just do a quick Google search for “CAPTCHA” and the name of your tool or programming language to find information suited for your environment. If you’re not using the Contact Form 7 plugin for WordPress, but would like to, you can download it from http://contactform7.com. In order for this technique to work, you will also need to download and install the “Really Simple CAPTCHA” plugin from http://ideasilo.wordpress.com/2009/03/14/really-simple-captcha/
Once you have the Contact Form 7 (CF7) plugin downloaded and installed, log into your admin console and click on the “Contact” link in the menu on the left. This will take you to the CF7 settings page. At the top of the page, you’ll see the code you’ll copy and paste into the page that you want your CF7 form to appear in. Just below that, you’ll see a section called “Form” which will contain the HTML code for your CF7 form. To the right of that HTML form, you’ll see a button that says “Generate Tag”. Click that button to drop down a menu. Scroll down and click on “CAPTCHA”. When you do that, you’ll see another form appear labeled “CAPTCHA” which will contain several form fields. Don’t worry about entering anything in any of these fields at this time as those are all optional and we won’t be using them at this time.
At the bottom of this form, you should see 2 brown boxes with text in them. At first, the text appears to be the same. But, I promise you it’s not. Take a second look and you’ll notice that the first box has captchac where the second box has captchar (notice the ending “c” and “r”). These are the 2 fields you’ll need to copy into your form’s HTML which is the form to the left of the CAPTCHA form. The first box contains the code needed to generate an image that contains the random CAPTCHA string. The second box contains the code needed to allow the user to enter the text from the image into the contact form.
Copy the text from each brown box and paste it into the form on the left. I added mine to the end of my form, just above the “send” button. In the code for the image, you’ll notice that I added an extra parameter for “size” and passed it “l” (lowercase L) which tells the plugin to generate my CAPTCHA text as “large” so that it’s easier to read. You can also pass “s” for the size which will draw your text “small”. In the code for the input field, you’ll notice that I added some extra text for “4/4”. This tells the plugin to draw my input field just big enough for the 4 characters from my image to be typed into. You can change these parameters manually in the code or you can change them using the CAPTCHA form on the right as shown here.
That’s it. All you have left to do now is click the “Save” button at the top-right and your feedback form is now ready to block spammers. After you’ve saved your changes, go ahead and click on your contact form to test it out. If everything worked accordingly, you should see an extra input field with your CAPTCHA image above it. When you click the “send” button, the form should not validate and a message should appear next to your CAPTCHA input field. Here is what the code looks like for the Contact Us form for this site.
<p>Your Name (required)<br />
[text* your-name] </p>
<p>Your Email (required)<br />
[email* your-email] </p>
[text your-subject] </p>
<p>Your Message<br />
[textarea your-message] </p>
<p>[captchac captcha-561 size:l]
<span>Enter the Above Text</span><span>(*)</span>[captchar captcha-561 4/4]
If you run into any problems, let me know in the comments below and I’ll try to help you out. Or, you can always head over to the Contact Form 7 website and ask for help there. Now go block those spammers!
PayPal will open in a new tab.