Part 2 of this tutorial gives code to validate the form designed in part one, stopping spam and fake users submitting data.

Here is the code (it uses javascript);

<script>
function validate(form){
var name = form.name.value;
var company = form.company.value;
var description = form.description.value;
var telephone = form.telephone.value;
var contact = form.contact.value;
var AtPos = contact.indexOf(“@”);
var StopPos = contact.lastIndexOf(“.”);
if (description.length < 1) {
alert(“You must enter a description.”);
return false;
}
if (company.length < 1) {
alert(“You must enter a company.”);
return false;
}
if (name.length < 1) {
alert(“You must enter a name.”);
return false;
}
if (telephone.length < 11 || telephone.length > 20) {
alert(“You must enter a telephone number between 11 and 20 characters.”);
return false;
}
if (contact.length < 1) {
alert(“You must enter an email address.”);
return false;
}
if (AtPos == -1 || StopPos == -1) {
alert (“Invalid Email Address.”)
return false;
}
if (StopPos < AtPos) {
alert (“Invalid Email Address.”)
return false;
}
if (StopPos – AtPos == 1) {
alert (“Invalid Email Address.”)
return false;
}
return true;
}
</script>

The first thing that happens is that the function is named and given a single variable, which is called ‘form’. In the form design we used an onsubmit to use ‘this’ (i.e. the form itself) as the variable content.

Function specific variables are defined, calling in the input values of the form.

Now it’s relatively simple; a bunch of IF statements to return false unless the criteria (for example more than one character) is met. If none of the IF’s are called then the function returns true and consequently the form can send! It’s litterally that simple! Have a play with the code, and you will get the hang of it soon enough.

I hope this tutorial helped at least one person, as I looked for ages online to find an all-in-one solution for designing and validating a form with little success!

Tagged with:
 

This is my first real tutorial (more commented code than a real tutorial), and is as much for myself as everyone else (I’m using the blog as a sort of resource store for myself, with the added bonus that everyone else can see it too!).

Anyway, the idea here is some explained code to produce a simple online form which will email a person/s the data from the form. It also includes validation to ensure that the form can not be sent unless the data is precise and relevant.

On to part one – The Form and the mail functionality.

The first thing we need to do is create the form itself for the user to put there data in.

<form method="post" onsubmit="return validate(this);" action="formPage.php"> <input id="name" size="50"/> <input id="company" size="50" /> <input id="contact" size="50" /> <input id="telephone" size="50" /> <textarea cols="38" rows="5" id="description"></textarea> <input id="quantity" size="4" /> <input value="Submit"/> <input value="Reset" /> </form>

The opening form tag contains method=”post” used to actually post the data, onsubmit which is used to call the validation function and action which links back to itself. The .php file in the action will have to be renamed the same as the page the form is being displayed on. There are two buttons at the bottom (‘input values’) one of which will submit the form (method, onsubmit and action) and the other will clear all data from the form. Simple!

Next, the code to email the data to the admin:

<?php

if(isset($_POST['contact'])){ $admin = "recipient@sendToEmailAddress.com"; $name = $_POST['name']; $company = $_POST['company']; $contact = $_POST['contact']; $telephone = $_POST['telephone']; $description = $_POST['description']; $quantity = $_POST['quantity']; mail($admin, 'Subject Title', "This email was generated using the Product Resource Form at www.johnalexanderrowley.com.\n Name: $name Company: $company Email: $contact Telephone: $telephone Description: $description Quantity: $quantity", 'from: fromAddress@fromaddressEmail.com'); ?> <script> alert("Thank you for using the formPage.\n Your request has been sent to the Relevant person."); </script> <?php } ?> The IF statement checks if the input field (in this case 'contact') has been filled in. If it has then the following mail code is ran. This stops the form submitting when the page is loaded.

The various variables are set, including the ‘$admin’ variable which contains the email address that the data is to be sent to. The other variables pull in the previously posted form values. The form ‘input id’ is the text contained within the square brackets in each case.

Now the variables have been set the mail can actually take place; The ‘mail’ php function is called which requires a recipient, subject title, content and header information separated by commas. These are defined in the normal brackets using the various variables. Note that the content is comprised of various variables and no commas are used.

Finally, a javascript script is used to display a thank you message, and the IF statement is closed!

Hay presto, the form is created and will email the admin.

To add validation to the form, please view Part 2!

Tagged with: