Friday, July 23, 2010

Simple Contact Form with Recaptcha: Code and How to Install

Let's face it. You want your website or blog visitors to be able to contact you. On the other hand, allowing all of the web to find your email address will only invite emails of the worst kind--spam.  The best way to receive the emails you want and at the same time protect yourself from spam is to use a simple contact form.  Even better, a simple contact form with recaptcha built in. Recaptcha requires the person to type in specific letters and numbers before the email is sent to you. 

This post will tell you where to find a simple contact form and how to install it in several easy steps. 

First of all, I have to give full kudos to Chris Coyier of CSS-Tricks, because he is the one who developed the basic, simple contact form I will describe how to install.  I tweaked the files a bit, to better suit my purposes.  Click to see an example of my simple contact form with recaptcha.  Here's another contact form that is a little bit different. Click here to see Chris's. (If you prefer his, then download the files from his site.)  If you'd prefer mine, click here to download the zip file.  I found it convenient to download the file to the contact folder within my website.

Get Your Recaptcha Key Codes

After you've downloaded the file and unzipped it, go to the Recaptcha website to get the key codes you'll need for your recaptcha to work.  Go to: http://www.google.com/recaptcha/plugins/php  Click on the link sign up for an API key. (Or, go directly to: https://www.google.com/recaptcha/admin/create)  Type in your website address.  If you need a global key, follow their instructions. Then click "Create Key." The page that loads has your Public Key and Private Key. Save this information in a safe place, for you will need to be able to access it to modify the contact form files.

Use your website design software to make the following changes to your new files.

Modify the file:  contactengine.php

1.  Replace the words YOURPRIVATEKEYHERE with your Private Key, supplied by the Recaptcha website.
2. Replace the captilized words below with the email address you want the message sent to (both addresses must be the same, as in the example):

$EmailFrom = "YOURCONTACTNAME@YOURDOMAIN.com";
$EmailTo = "YOURCONTACTNAME@YOURDOMAIN.com";

Modify the file:  style.css

1.  If you'd like, change the background image or color.  The following is the code currently in the file which points to a url for a repeating image in the images folder:

body {
font-size: 62.5%;
font-family: Helvetica, sans-serif;
background: url(images/expnewbg-mainbackground.png) repeat;
}

If you'd like to use your own image, or Chris' pinstriped black image, replace the url above with one in the images folder.

If you'd like to use a solid color instead, replace the background line with the following:

background: #000000;
Only, of course, replace the 000000 (which is black) with your own color code.

2.  Another color you might like to change is the background color under the section #page-wrap. Modify as desired.

Modify the file:  contactthanks.php

This is the file that comes up after someone successfully sends a message to you. 

1.  If you'd like your website banner at the top of the page, copy your own banner into the images file and replace (line 7) "dpbackground.jpg" with your own file name.  Also, change the Cap Letters for the alt section. If you don't want a banner, just delete line 7.

2.  Where would you like to direct your visitor after he has successfully emailed you?  On this contact thank you page, provide a link for him to click so he can return to your main page. Update the link and TEXT (line 22) with the correct information for your website.

Modify the file:  index.php

This is the actual simple contact form with recaptcha that your visitor will see when they email you.

1.  Change line 19 in the same way you changed line 7 under step 1 of "Modify the file: contactthanks.php".
2.  Copy and paste your public and private keys into the following code in the file:

$publickey = "YOURPUBLICKEYHERE";
$privatekey = "YOURPRIVATEKEYHERE";


That's it!  Congratulations!  Now you just need to update your contact links in your website so they hyperlink to your index.php file.  Upload it to your server and test it out.

Hope this helps!


"Many are the plans in a man's heart,
but it is the LORD's purpose that prevails." ~ Proverbs 19:21

2 comments:

  1. It amazes me how people find each other. I was planning to set up my own publishing company to epublish a novella while my agent is looking for a publisher for my novel and I wanted to call it Diamond Press - but you got to the name first. I'll have to think again. Helpful stuff you have on your blog. Pity you don't have a way to subscribe to your blog.

    ReplyDelete
  2. I was using Chris' contact recaptcha zip. But seem to have difficulty with it. I use Dreamweaver CS5 and my website htmls use a template for every page with editable region in the middle. http://www.celebratingyourjourney.com. I go my public and private keys.

    Is there any advice or direction you can give me to get it to work when copy/pasting codes into my existing contact page? http://celebratingyourjourney.com/contact.htm

    thanks for any help you can provide.

    ReplyDelete