underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

PHP Contact Form with HTML & Simple CAPTCHA Free Download

Finding a simple PHP contact form with a working, equally simple CAPTCHA that you can style to match your website design isn’t as easy as you might think. So I decided to offer my own solution as a free download. This contact form will allow the user to send the inputted details to a specified email address – this address can be an email address linked to your website or a stand-alone email like Gmail – it works with either.

Once installed, the webmaster has the included ability to make certain fields mandatory with a warning message to the user to go back and try again if they fail to fill our all the required fields. While the CAPTCHA is as simple as it could be and has effectively eliminated spam from bots filling out my forms 100%. Yes, that’s right – a 100% success rate. That’s because Fizz Web Design is a small company and isn’t under the same sort of scrutiny as larger companies like Tesco or Amazon.

simple form with captcha free download

CAPTCHA forms, like the familiar ones at  www.captcha.net or suchlike, are often ugly and/or too overly bloated for a small company, although they do work well. You will find that our free to download CAPTCHA code is so simple and effective at stopping small-scale attack from bots that having anything more complicated is unnecessary.

To Use CAPTCHA Or Not?

There are many who think that using a CAPTCHA will turn away potential customers, the theory being that customers haven’t the patience to fill them in, but this is often due to most CAPTCHA forms not being particularly user friendly – how many have you seen that are almost impossible to read requiring refresh over and over again? Yup, tons of them. This CAPTCHA resolves that form filling problem and gives you total control over it’s appearance.

So let’s get started – hover over the code to reveal the highlighter button top right, click on it then you can copy (control or command + c).

HTML Code

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<form name="contactform" method="post" action="form.php">
<div class="contactdetails">
<label for="name"> Name <span class="mandatory">*</span> </label> <input type="text" name="name" /> <br />
<label for="telephone_number"> Telephone Number <span class="mandatory">*</span> </label> <input type="text" name="telephonenumber" /> <br />
<label for="email_address"> Email Address </label> <input type="text" name="emailaddress" /> <br />
</div>

<div class="commentarea">
<p><label for="comments"> Please add any further details in the space below, then click send: </label> </p>
<textarea name="comments" rows="auto" cols="auto"> </textarea> <br />
</div>

<div id="type2">
<label for="type_see">Type what you see </label>
<div id="typeimg2">
<img src="images/captcha.jpg" alt=""/>
</div>
<input class="type2" type="text" id="type_see" name="typesee"/>
</div>

<div class="submitbutton2">
<input type="submit" value="Send" name="submit" />
</div>
</form>

What This Tells Us

The first line gives us the PHP method for submitting the form and the action part tells us where the PHP form code can find the instruction once the submit button is clicked – without this being accurate, the process will throw up an error and fail.

The input fields are made up of label and input – the label is the name of the text that describes the input, while the input is the box that the user fills in.

The commentarea section allows the user to input free-fom text.

The CAPTCHA part of the form (contained in the div – type2)  is, as you can see, totally simple and relies on strict PHP code to filter out incorrect user input. To stop bots from reading the correct input, the CAPTCHA requires an image which a human can see but a robot can’t.

The image used in the CAPTCHA field is stored in a folder called images – pretty standard practice.

CSS Styling  for the Form

Below is the form styling – without this the form will not be visually appealing, with this you can adjust it to sit comfortably within your own website.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
.contactdetails { width: 560px; margin: 40px 0 40px 0; }
.contactdetails label { text-align: left; float: left; width: 270px; padding: 9px; }
.contactdetails input {width: 200px; margin: 0 0 10px 0; padding: 9px; background: #eee; border: 1px #fff solid; }

.commentarea {width: 560px; padding: 0 0 20px 9px; margin-bottom: -14px;}
.commentarea textarea { padding: 6px; width: 485px; height: 120px; background: #eee; border: 1px #fff solid; }

.mandatory {color: red;}

.submitbutton2 { width: 356px; text-align: left; padding-left: 9px; }
.submitbutton2 input {color: #4f4f4f; font-size: 20px; margin: 10px auto 0 auto; width: 80px; background: #bddf6c; border: 1px #677847 solid; padding: 5px; }
.submitbutton2 input:hover { color: #fff; cursor:pointer; }
.submitbutton2 input:active {color: #231f69; }

What This Tells Us

I often, depending on the style and needs of the website, enclose the entire form in a containing div, but this has been omitted for this tutorial. Some of this you might find you can remove if desired.

The contactdetails enclose the input fields section itself, while the contactdetails label styles the input description. This gives the fields a set width for the input part to rest against, so to speak keeping everything in order. Note that this field is floated left.

The contactdetails input also has a set width with customised border that overrides the standard border that form input fields default to.

Padding should be the same for both label and input to keep everything in line.

CSS Style for the CAPTCHA Field

Select Code
1
2
3
4
#type2 { width: 507px; height: 70px; margin: 0 0 10px 0; }
#type2 label {float: left; margin-top: 20px; padding-left: 9px; }
#type2 input {float: right; width: 200px; margin: 14px 0 10px 0; padding: 9px; background: #eee; border: 1px #fff solid; }
#typeimg2 {float: left; width: 80px; height: 80px; padding: 0; margin-left: 37px; }

What This Tells Us

The input and label fields are styled in much the same way with the addition of the styling for the image used. Again, all floated left.

easy to read captcha

The CAPTCHA image

The image that contains the letters or numbers to be inputted in the CAPTCHA input field is, in this case, 80px x 80px – this works with the styling constraints used.

Put all this together (join both the CAPTCHA style and the form style together into one style.css file) and you should have something that looks like this:

free php form with simple captcha

 

PHP Form and CAPTCHA Code

Now for the part that makes it all work; the PHP code. This should be saved as a separate file named send_form.php which corresponds with the name called in the HTML code above under action (right at the top).

Make sure  this code is contained in-between <html> <head> and <body> tags just as normal HTML code with the usual headers. This makes sure your website header and footer are displayed on the thank you message the user sees after sending the form.

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
if(isset($_POST['submit'])) {

$name = $_POST['name']; // required
$telephone_number = $_POST['telephonenumber']; // required
$email_address = $_POST['emailaddress'];
$comments = $_POST['comments'];
$type_see = $_POST['typesee']; // required

if($name=='' ||
$telephone_number=='' ||
$type_see != 30 )

{
die ('<p style="margin-top:40px;">You have not filled in all of the required fields or the captcha is wrong - <br /> <br /> please go back and try again!</p>');

}

else{
$email_to = "email@email.com";
$email_subject = "Contact from company website";
$email_message = "Form details below.\n\n";

function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}

$email_message .= "Name or Company Name: ".clean_string($name)."\n";
$email_message .= "Telephone Number: ".clean_string($telephone_number)."\n";
$email_message .= "Email Address: ".clean_string($email_address)."\n";
$email_message .= "Comments: ".clean_string($comments)."\n";
$email_message .= "Captcha: ".clean_string($type_see)."\n";

// Create email headers
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "From: company@email.com" . "\r\n";
$headers .= "Reply-To: email@email.com" . "\r\n";
$headers .= "Content-type:text;charset=iso-8859-1" . "\r\n";
mail($email_to, $email_subject, $email_message, $headers);
}
}
?>

<div id="thanks">
<p>Thank you for contacting our company. <p/>
<p>We will be in touch with you shortly. </p>
</div>

What This Tells Us

The first section checks and records the inputted form fields with name and phone number sections required as mandatory.

CAPTCHA Input

This part $type_see != 30 ) tells us what the specific required, mandatory text MUST be to allow the form to be sent – in this case, the number 30 is the required correct text input. You can change this to whatever you want of course.

Make sure this part of the php form code corresponds with the numbers or letters in the image you are using!!

The die part is the notification displayed on the page when a user fails to complete the mandatory sections – including the CAPTCHA – and tries to send the form.

Presuming the form is filled in correctly, the else section contains the email address that will receive the form and the $email_subject contains the chosen name of the email  that is received.

The $email_message part reveals the message as it will be displayed in the received email.

The $headers give us the email address displayed in the recipient’s inbox and the email address that is used when hitting reply to the received email.

I tend to use this to display an email address (under From:) that includes the company name before the @ symbol so users can clearly see who the received email is from. This email doesn’t need to be a real one as hitting reply will send to the correct email address as long as Reply-To: is filled out with the correct email.

The thanks part contained in it’s own div is your chance to style a ‘thank you’ message that the user will receive after sending the contact form.

Note that reply sends an email to the email address that sends the form or whatever email is included in Reply-To: – not to the person that has filled out the form.

Summary

Now you should have 3 files: index.html, style.css and send_form.php plus an image saved in a folder called images that all work together to create a working HTML form that uses PHP to send the completed form to your desired email address. So there you have it; a simple HTML form with simple CAPTCHA that works through PHP and is yours free to download.

Feel free to post any comments or thoughts on this form below.

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , , , ,


Leave a Reply

Please complete the sum so we know you\'re a human... *