Helping clients succeed on the internet since 1999

At your Service

There's no need to know how the internet works when you have the team at COOLCOM working with you. From simple domain help to advice on complex applications, you'll find every base covered under one friendly roof. 

Blog: The Coder Corner

Form Code Takes Us to Core Interaction

So, you want a form for visitors to contact you... Normally I would say, "Use the form module that comes with your CMS". But as it turns out, you're not using a CMS. You are using the html code your webmaster (or whoever played that role for a while for you) gave you. Your site looks fine, but modifying it is kind of a hassle. And now you want that form.

You have two choices, start using a CMS like Wordpress, Joomla or Drupal, or try and adapt your site with some php, html, css and some more stuff. After all, there are enough ideas out there on the Internet.

And that's where the trouble starts. You have no idea which of the solutions presented on the web is the best suited for you.

The basic form of a form (no pun intended) looks like this:

<form method="post" action="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">
Your Name <input type="text" name="yourname">
<input type="submit" name="submit" value="Send my details">

This is the simplest form out there. BUT it's also the most cumbersome to keep up with.

- The first thing that will show to everyone on the Internet is your email address that follows the mailto: tag.

- It also shows bots (short for robots) and hackers that there is an email ready to be spammed.

Not exactly the intended result, right? So it's off to the races for a different solution, all the while your email is "out there" and still gets spammed to hell and back. You can trash that email address, it's never going to be useful again.

Lesson learned.

Now you are looking for a php solution, way safer. It's also a fair step more complicated. In this scenario, the form will send its information to a php script instead of directly to your email address. It will give you the opportunity to filter out the stuff you don't want to see. Designer handbags at a fraction of the cost comes to mind (other stuff too, but let's keep this post family friendly).
Now we need a form and a script that treats the form data, checks it out and then sends it off as an email. Preferably that script should also check for unwanted entries.

Now there is one positive note about bots on the internet. They're dumb.

They can't interpret text, they don't know how to count and they don't know when to stop filling forms.

Let's let that sink in for a moment.

Imagine a form with 3 fields: Name, email and "interest"

A bot would fill these out and post the form, causing it to go to you with dummy information. Now let's add a fourth field called "secret". The bot will now also fill in the "secret" field. Now the script comes into play. It should only email your the form data if that "secret" has nothing in it (remember that the bots usually fills in everything). Now only the human filled forms go to your email.

That's one way of doing it. Here's another.

Insteas of relying on a secret field, why not have a visible, human field instead? For example that field called "result" would get a label like "How much is three plus seven?". The scrip would then have to check if the answer entered is "ten" (for those who didn't understand) or "10". For php that is easy to do, the humans can make that calculation fairly easily, but bots cannot. It's a simple solution that does not rely on crooked images of words, numbers or nonsensical texts, I always find those hard to read and get them wrong half of the time. So much for calling myself "human".

So let's take a look at the required elements for this contact email form.

1 - we need a form on our site
2 - we need a php script that does the following:
2.1 Accept data from the form
2.2 Check the data for validity
2.2.1 If the data is invalid set an eror message
2.2.2 If the data is valid send out the email and set a success message
2.2.3 Return to the form with the message

Instead of returning to the form after success, we can go to a Thank-you page or something similar. 


NOTE: If you want to use this form - download all 4 necessary files here.
That way you will not "catch a code" from this page ;) 


Let's start with the form itself. (remember to use the clean code in this download)

This is a very basic form or page, for clarity purposes there are no CSS (styles) or any other visual improvements.

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<form name="emailform" method="post" action="mailform.php" >
<p>Firstname <input type="text" name="firstname"></p>
<p>Lastname <input type="text" name="lastname"></p>
<p>Your email <input type="text" name="email"></p>
<p>Your message<textarea name="message"></textarea> </p>
<p>How much is three times seven? <input type="text" name="secret"></p>
<p><input type="submit" name="submitbtn" value="Submit!"></p>

Until here, nothing special all the fields are self explanatory with the exception perhaps of the <form action="mailform.php" tag.
The action="xxxx" tells the html form what to look for when the submit button is pressed.

It should also be noted that your email is NOT in the form code and is NOT available to spambots roaming the internet.

So let's take a look at that mailform.php file (clean code download)

<?php // this tells the server to treat this file as a php script and not as standard text
// first get all of the submitted fields

// now go and check the response to the secret question

// check if this is the right answer
if ($answer <> 21) { // wrong answer! get out of here
header("Location: error.html");
die(); // this will stop execution of this script. No email will even be prepared after this line
// if we got here, everything is good and we should treat the form as valid

// set your own email here, that's where the form contents will go
$to = "This email address is being protected from spambots. You need JavaScript enabled to view it.";
// then set a standard subject to your liking
$subject = "your specific subject";

// this is the message body of the email
$message = "
<p>Some text for your incoming email</p>

// this will take all the submitted fields and put them in your email body
foreach ($fields as $key=>$value) {
$message .= "<tr><td>$key</td><td>$value</td></tr>";
$message.= "</table>";
$message .= "

// Always set content-type when sending HTML email, if you don't your email will look weird
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

// More headers
$headers .= 'From: <This email address is being protected from spambots. You need JavaScript enabled to view it.>' . "\r\n"; // on Coolcom servers this must be a valid email account in your cPanel account. Forwarders are not allowed
//$headers .= 'Cc: This email address is being protected from spambots. You need JavaScript enabled to view it.' . "\r\n";

// use php to send the email with the form information to you

// now redirect to a thank-you page or any other page you like
header("Location: thanks.html");

This script has two separate ways out.

Either you go to the thanks.html file or you go to the error.html file. So here are the two files, very simple, nothing special in them.

thanks.html (clean code download)

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Thank you</title>
Thank you for your request, we will be contacting you shortly.

error.html (clean code download)

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
Your calculation skills have proven to be insufficient, please try again!

The combination of these 4 files, if you include a thanks and error page makes your web form fairly resistant to spam and you can enjoy the contact requests from your site. It should be noted that this system is a very simple system and that many more improvement can be added.

Henk von Pickartz

Written by : Henk von Pickartz

Hit the Help Desk