Contact form with CAPTCHA
This is an attempt to show how you can create your own contact form with CAPTCHA image verification to help minimize the amount of spam that hits your inbox. You should however be aware that by using image verification you are blocking visually impaired visitors from contacting you. There are also spam bots that can circumvent CAPTCHA images so by using image verification you have not permanently prevented spam.
The basics
If you have read the above text and/or the link provided about CAPTCHA you can continue reading the tutorial. The end result will be a contact form that looks like this:
Still reading? Then I just want to inform you that following this tutorial is not trivial. If you don't know anything about PHP, manually uploading files, creating remote directories, changing permissions on files, then this tutorial may not be for you.
The contact form is originally based on the one from RapidWeaver 3.2.1 but it has been extensively rewritten, although you can still recognize the skeleton. The contact form is so far completely spam free. Mostly due to the usage of CAPTCHA image verification but also because the form has been modified to disallow "header injection". The image verification code used in this tutorial is a piece of free software (LGPL license) that I found on NeoProgrammers.com.
Note: This tutorial requires RapidWeaver 3.5 or newer and a webserver that supports PHP with sessions.
How-to
To create this form you need to carefully follow the steps below. They are taken from my head so there might be errors in them. But if you find any let me know and I will update this tutorial.1: Download the Contact Form tutorial
2: Mount the image and open the RapidWeaver Project.
3: Copy the page into your own RapidWeaver project and copy the "securimage" folder to your own drive.
4: Replace the assets in the contactform page with the same files from the directory you copied to your Mac in step 3.
5: Make sure that the page has a .php suffix since RapidWeaver will change it to .html when you copy the page into your project.
6: If you want you can use another font. Any TrueType or GD font can be used so you just have to download one and configure SecurImage to use it.
7: Edit the "securimage.php" file to your liking regarding how it will render the image.
8: Change the value of this variable in the "Prefix" part of the page inspector:
// The relative path to the assets folder
$assets_folder = 'assets';
9: Change the value of these variables in the "Content" part of the page:
// The message that is shown when you open the contact form
$form_message = 'Fill in the form below to send me an email.';
// The email to which the form should be sent
$email_address = 'your_email@your_domain.com';
// The length of the security code (this must match the setting in 'securimage.php')
$security_code_length = 7;
10: Change the "Page output" in the page inspector to "Default"
11: Publish your project and testdrive your new contact form.
12: That's it! :)
Frequently asked questions
Q: What will it do?A: It will create a basic contact form with Name, Email, Subject and Message fields.
Q: What does it require?
A: The webserver needs to support PHP and GD (image functions). The second is usually present if you have PHP support. To be more specific you need at least the following:
PHP >= 4.3.0
GD >= 2.0.28
FreeType (http://www.freetype.org/)
Jpeg Support (ftp://ftp.uu.net/graphics/jpeg/)
Png Support (http://www.libpng.org/pub/png/libpng.html)
Q: Do I need to master PHP to use this?
A: No, not if you don't want to modifiy the number of fields etc. If you only want a basic contact form you only need to change a few variables inside the script. Everything that can safely be changed have been commented in the code.
Q: Why do I need to change the page output to "Default"?
A: The tidy engine in RapidWeaver has problems when you use PHP code inside HTML tags. The PHP code is converted into plain HTML and stops working.
Q: I followed the tutorial but the contact form does not show.
A: You have either no GD support, the setup of SecurImage is incorrect or you have a syntax error in your script after editing.
Q: How do I know what is wrong?
A: Look at the webservers error_log (not the access_log). That will show you all errors that the script generates.
Q: Where do I find the error_log?
A: That depends on your webserver. If you have shell access (SSH) you can usually find it at /var/log/httpd/... or a similar location. For some setups you can access the logfiles in your sites control panel. If you are unsure ask your hosting provider.
PS: If this tutorial helped you consider making a donation to support the work. All donations will be used for future updates of this tutorial and new tutorials. DS.