Tutorial Series – Contact Form – Part 1
When building a web application I find user feedback invaluable at all stages of the development process, both from a testing team to everyday users of the final product – all of those users will have their own unique opinions. Gathering and acting upon this feedback can help every designer / developer to improve their applications as well as their own skill set.
Creating secure, functional forms that catch all errors whilst providing a positive user experience can be such a chore to build, but today I am going to show you how to quickly and easily build a spam-resistant contact form, using Richard Willars’ Form Processor and the reCAPTCHA php Library.
The form I have coded offers:
- Full reCAPTCHA human verification
- Verification of data format on all fields.
- Timed spam killing, Stops bots from filling in the form quicker than a super human!
It currently takes the following fields, but it is extremely easy to add new ones (read the rest of this tutorial for a guide on how to do it):
- Name (Rules: Must be filled in)
- Email (Rules: Must be filled in, email address must be valid, must be 5 characters or more and force the email address to be lowercase)
- Subject (Rules: Must be filled in and greater than 5 characters)
- Message (Rules: Must be filled in and greater than 10 characters)
- Image Verification (The text entered by the user must match the text in the image)
If you’re just here for a ready to roll contact form:
If you want to learn more about the form processor and how to code your own form, keep reading!
Richard’s simply fantastic class makes coding forms a joy! It allows a developer to write their entire form using xhtml, along with validation rules and error messages. This makes it extremely easy to pick up and use if you already know xhtml. When a user fills in a form the processor reads in all the xhtml form code, processes it and then rebuilds the form using valid xhtml. This means that the end user doesn’t see any proprietary code or see anything that might compromise the security of the system. This concept is difficult to explain so I’ll give you a small snippet before diving into the tutorial.
If I wanted an input box which a user must fill in with their email address, I would use the following code:
<element id="email"> <!--Create a new form element, Final name and id will come from id--> <input type="text" /> <!--Declare it as an input box, type text--> <strong class="error"> !</strong> <!--This is shown next to a field with an error, to show the user what fields require their attention--> <compulsory message="You Must fill this in" /> <!--Our first rule, It must be filled in, the message attribute is shown to the user if they don't meet the requirements of the rule.--> <validate test="email" message="Your email isn't valid" /> <!--Once the user has entered something into the box, we need to make sure it meets the data requirements we want, so we want to make sure this is an email address.--> <minlength length="5" message="Your email must be at least 5 chanracters long" /> <!--We want to make sure the email address is at least 5 characters long.--> <text transform="lower" /> <!--We want the email address to be brought down, so its all lower case. this rule changes AbCDEf to abcdef--> </element> <!--This ends the form element--> |
After this is processed, it outputs
<input id="email" name="email" value="" type="text" />
As you can see the user has no idea of the rules imposed on the form!
If you want to see the full list of callbacks and how to use them, you can find them on Richard’s site, although, over the course of these tutorials I will be covering all of them.
A Form Example
Because it’s easier to have all the form markup in one block, I will be using PHP’s Heredoc syntax. We use this as it allows us to pass variables directly into the form without having to escape them.
I personally find it easier to have a php function that returns my form markup, though this is not necessary.
For this example I will start by showing you how to make a form input field with no rules, and then slowly turn it into a more complex and useful example of what can be done with the class.
Example 1
The first example is just a simple input field with no validation. This should give you a good idea of how to build a basic form.
Example 1 – One input field with no rules
Example 2
This second example is just a simple input field with one rule. The compulsory rule applied here ensures that you can only submit the form after typing something in the box.
Example 2 – One input field with a compulsory rule
Example 3
Building on the last example, the processor will now check that your name is filled in and that it only contains letters before allowing you to submit it.
Example 3 – One input field with a compulsory rule and validation check
Example 4
This example turns the world on its head and includes 3 inputs . In this example we keep the previous input fields and rules, but add more input fields for subject and email. We make sure that an email address and a subject are provided, and that the email address is in the correct format.
Example 4 – Multiple input fields with validation
Example 5
Here we introduce a different type of input field, the text area. We add this to the previous examples to allow our user to type us a message. The text area must be filled in and contain 10 or more characters.
Example 5 – Multiple text input fields and a text area field
Example 6
We’re going to add some anti-spam protection to protect the form against spam.
An easy and effective way of doing this is to use the reCAPTCHA php library and the callback feature of the form processor!
Here are the functions and code we will use to create the image
Now we will create our input field (this is where the user will type the verification code), and link it to the image verification code using a callback
Here is the full form with source
Example 6 – Anit Spam protection
Example 7
Although image verification is usually quite effective, it can be broken by a persistent spammer (they can write scripts to analyse the images and read the text within them). Because of this we’re going to add an additional layer of security that is very simple but quite effective. We make sure that the user spends at least 15 seconds filling in the form before they can submit it.
Example 8
Here we add the mailer part of the script. There’s no point in a contact form if it doesn’t let people contact you!
In this example we use the built in php mailer function, though it could easily be tweaked to use a 3rd party script such as PHPMailer. This example will send an email to whatever email address you enter into the email field.
Conclusion
Richard’s class is vastly powerful, and these examples don’t even touch its full potential. Hopefully however, this tutorial has given you an insight into how to use the class and hopefully inspire some great ideas.
How do you use the class? Have you found this useful? Be sure to comment!
-
[...] More here: Tutorial Series – Contact Form – Part 1 [...]
-
nice tutorial….
well the codes a bit far fetch, it we had a sample code together with the screen tat wud be kool…
but its indeed very resourceful man….
cheerzzz -
I’m testing the form on my server: gandgdesignz.com/phpcontact
I’ve added a drop down list, but I’m having trouble setting some validations for it. Also, how would I get the the information for the drop to be included in the email that I’ll receive? I tried setting an element id for it, but got an error…not sure how I would need to manipulate the formprocessor php to get it to validate that user has selected a value.Here is the php I’ve been trying on the formprocessor:
//if there there is no value for ddl
if (!isset ($_POST['designddl'])) {
$this->errors[$name] = $this->rules[$name]['validate']['error'];
continue;
}