No WordPress site is complete without a contact form. Of course, you could always provide your e-mail ID on the website for people to get in touch with you, but this isn’t ideal for several reasons. In the first place, you will attract a huge amount of spam. Spiders and bots are constantly on the lookout for e-mail addresses just like this. In fact, we previously looked at Project Honeypot – a project that attempts to present an attractive target for spidies by deliberately creating a “bull’s-eye” just like this. As a result, you sometimes see website administrators using workarounds like inserting an image with their e-mail ID or using letters to describe punctuation marks like “dot” to fool potential spammers. But why go to all this trouble? Here’s how to setup a contact form in WordPress with inbuilt protection against spammers.
Basic Form with Validation
The simplest plug-in that gets the job done is called Contact Form with Captcha. If you’re looking for a quick and easy way to insert contact capabilities without much flexibility or customization, this is the plug-in for you. It uses the well-known Google’s reCAPTCHA framework for validation with the added benefit that the efforts go towards a better digitization of physical books. So you can be sure that your efforts are going towards a good cause!
For this plug-in to work, you need to enter two details:
Your reCAPTCHA id;
Your admin email.
Sign-up for the former here. You can insert the contact form on any post, page, or even widget using the simple shortcode [cfwc]. As I mentioned earlier, this is a plug-in to quickly get you up and running. It doesn’t have any sophisticated options are even the ability to change the form fields. For that, we use the Contact Form 7 plug-in instead.
Using Contact Form 7
Contact Form 7 is quickly becoming the de facto standard for contact forms in WordPress due to its customizable interface and its integration with captcha plug-ins if desired. After downloading and installing it, head over to the menu item in the dashboard and you will see that a default “Contact form 1” has already been created for you. Click that, and let’s see how to customize it.
The first half deals with the actual form fields. You can insert and remove them by placing “tags” generated on the right-hand side. So for example if you want to create a new field called “Telephone Number”, hit the “Generate tag” button and fill out the options. After you’re done, copy the generated tag as shown in the screenshot below to the HTML box on the left. Make sure to place it in the position you want. Using the other tags as examples, you can edit the HTML to make it look however you want.
The bottom half of the configuration screen is devoted to the e-mail message that you receive from someone who tries to contact you. You can place the generated tag in the bottom field so that it will appear in the notifications.
Contact Form 7 doesn’t automatically include captcha capabilities. Rather, it relies on the Really Simple CAPTCHA plugin to derive this functionality. It was originally developed to work only with Contact Form 7, but now provides its functionality to any add-on. Once installed, the “Generate tag” button includes an additional option for displaying a captcha.
Between these two plug-ins, all of your contacts needs should be solved. If you’re just looking for basic functionality, the first will do nicely. But if you have specialized requirements and need greater flexibility and customization, Contact Form 7 is hard to beat.
- PREVIOUS ENTRY: Improving Responsive Wordpress Themes with Mobify.js
- NEXT ENTRY: Anatomy of a Basic Wordpress Theme Structure