HOW TO ADD A CONTACT FORM WITH CAPTCHA TO YOUR WORDPRESS BLOG

If you wish to use a contact form that is hosted on your WordPress installation then you should go for the Contact Form7 plugin. Contact Form7 plugin does not come with it’s own Captcha verification system so you are going to be using another plugin for that. This plugin is called Really Simple CAPTCHA plugin. I will be showing you in this tutorial how to install the two plugins, integrate them and configure to work on your WordPress installation.

Download the plugins I mentioned above and upload it via your wordpress admin panel by clicking Plugins > Add New > Upload > Install Now. You can also upload via FTP if you wish.

Activate these plugins after you have installed and go to your Setting, then Contact Form7 to configure its settings.

How to configure the Contact Form:

When you get to the form settings page, you will see a form there by default named “Contact Form1″.
You should rename this by clicking on the the name and change it to whatever name you like. For this tutorial I will be using “ContactUsForm”

CONTACT US FORM FORM WORDPRESS 1

The HTML code for this default form has already been set in the box below the Form name with the basic information you need already coded in it. This is very useful for some of us who don’t really get it good when it comes to coding. I will advise that you leave the for the way it is for now.

The information coded in this Contact form code is the following:

Your Name (required)
Your Email (required)
Subject
Your Message
Send Button

If you look at the code very well, you will see these texts coded in the HTML tags.

CONTACT US FORM FORM WORDPRESS 2
Like I said earlier, leave the form code as it is. Now all we just need to add to it is the Captcha.

How to Integrate the Captcha to your Contact Form:

Just beside the box containing the Form HTML code, you will see another box where you can generate additional tags for your form (Generate Tag dropdown box). From the “Generate Tag” dropdown box on the right, choose “CAPTCHA” and a form will appear below it.

CONTACT US FORM FORM WORDPRESS 3

Change the name to “Captcha” and tick the “Large” Image size box. Copy the tags generated over to your contact form. Copy and paste the code below into your contact form, just before the submit button code:

<p>[captchac Captcha size:l]</p>
<p>Enter The Code Shown Above : <br/>
[captchar Captcha]
</p>

What you have to do now is to input the e-mail you want the e-mail to be sent to. The e-mail you wish to receive the contact form emails with. Click Save.
Enter the email address you wish to receive the contact form emails to and click save. You are now done with setting up the form. What you do next is to set up the page where you want the form to show by pasting the form code into it. Copy the name of your Form at the top :

[contact - form 1 " ContactUsForm "]

Next Create a Page for Your Contact Form

Go to “Pages” > “Add New”.  Name the page “Contact Us” or as you desire, switch from the WYSIWYG editor to the HTML editor, copy the Form code and paste it there. Remember to save it.

CONTACT US FORM FORM WORDPRESS 4

YOUR CONTACT FORM IS NOW READY ON YOUR CONTACT PAGE.

CONTACT US FORM FORM WORDPRESS 4

START USING YOUR CONTACT FORM.

YOU CAN TRY IT OUT BY SENDING AN EMAIL TO YOURSELF VIA THE FORM.

Don't keep this to yourself, Share it with your friends with the Buttons below.

If you don't want to miss anything on Cynamix please like us on Facebook and follow us on Twitter You can also subscribe to our updates by email or with your favourite browser. This way, you won't miss any updates from cynamix. If you subscribe by email, make sure to check your email to confirm your subscription.

Enter Your Email Address & Never Miss Any Update From CYNAMIX Your Email Is Safe & Secure With Us:

Or Subscribe Via Your Browser or Reader

Speak Your Mind

*

CommentLuv badge