Php contact form with validation

Have you been reading numerous posts about which validation is better? PHP or Javascript(ajax)? I’d say why don’t you use both forms of validations, as it is more secure.

To explain the meaning of each.

Javascript (ajax) validation, is the one which occurs on the client side, before the form is being processed to the server. It will check if it has valid e-mail, if some field is left entry etc. It is good, because it is interactive, and it is faster than php (server side) validation. But, anyone can turn off javascript from their browser, so javascript / DHTML validation can be easily by-passed.

PHP (Server Side) validation, occurs when the user submits the form. Then the form will try to contact the server, and check for valid e-mail, empty field etc. It is a secure one, because the user can not disable php, as in the case with javascript. But, it is slow, because the form has to contact the server and check if all fields are validated properly.

Okay now, let’s do it.

We will need a HTML file (Or PHP) where the form is stored, a PHP file to check for validation and send the e-mail, and a .JS (Javascript) file for the client side validation.

Open up the html/php file, and write down the form.

<form action="sendMail.php" method="post" onsubmit="return validateForm();">

<label for="visitor">Name: </label>
<input id="visitor" name="visitor" type="text" />

<label for="visitorMail">Email: </label>
<input id="visitorMail" name="visitorMail" type="text" />

<label for="priority">Priority: </label>
<select id="priority" name="priority">
<option>Choose</option>
<option value="high">high</option>
<option value="medium">medium</option>
<option value="low">low</option> </select>

<label for="message">Message: </label>

<textarea name="message"></textarea>
<input type="submit" value="Send Mail" /> </form>

Explanation:

So, first, we are setting up the form. We give the form method post, and the action is the php file which will send the email. Use relative path for it if its in the same directory with the file where the form is located, if not use a absolute path. The onsubmit parameter, is the javascript validation which we are calling when the user will press the submit button(Send Mail button).

We place label for each sentence, as seen above. We will use the label for the javascript validation.

On the inputs, selects and textarea, we give a name and an id. We shall use the name for the php sendMail file, and the id for the javascript validation.

function validateForm () {
    var visitor=document.getElementById("visitor");
    if(visitor.value==""){
      var smallText=visitor.parentNode.getElementsByTagName("label")[0]
      smallText.innerHTML="Your Name: - (please enter your name)";
      smallText.style.color="#F00"
      smallText.style.fontWeight="bold";
      return false;
    }else{ // if he didnt left the name field empty, tell him that he inserted the name
      var smallText=visitor.parentNode.getElementsByTagName("label")[0]
      smallText.style.color="#ffffbe"
      smallText.innerHTML="Your Name: - (name inserted)";
    }

    var visitorMail=document.getElementById("visitorMail"); // target the input field with ID visitorMail
    var mailInfo=visitorMail.value.toString();
    if ((mailInfo.length<6) || (mailInfo.indexOf(",")>=0) || (mailInfo.indexOf(";")>=0) || (mailInfo.indexOf(":")>=0) || (mailInfo.            indexOf("/")>=0) || (mailInfo.indexOf(" ")>=0) || (mailInfo.indexOf("@")<=0) || (mailInfo.indexOf("@") != mailInfo.lastIndexOf(        "@")) || (mailInfo.lastIndexOf(".")mailInfo.length)) {
      var smallText=visitorMail.parentNode.getElementsByTagName("label")[1];
      smallText.innerHTML="Your Email: - (please enter valid email)";
      smallText.style.color="#F00";
      smallText.style.fontWeight="bold";
      return false;
    }else{ //if he entered a valid e-mail, tell him that he did
      var smallText=visitorMail.parentNode.getElementsByTagName("label")[1]
      smallText.style.color="#ffffbe"
      smallText.innerHTML="Your Email: - (email verified)";
    }

    var priority=document.getElementById("priority");
    if(priority.selectedIndex == 0 ) {
      var smallText=priority.parentNode.getElementsByTagName("label")[2]
      smallText.innerHTML="Contact type - (please select one)";
      smallText.style.color="#F00";
      smallText.style.fontWeight="bold";
      return false;
    }else {
      var smallText=priority.parentNode.getElementsByTagName("label")[2];
      smallText.style.color="#ffffbe"
      smallText.innerHTML="Priority - (selected)";
    }

    var message=document.getElementById("message");
    if(message.value==""){
      var smallText=message.parentNode.getElementsByTagName("label")[3]
      smallText.innerHTML="Your message: - (please specify your message)";
      smallText.style.color="#F00"
      smallText.style.fontWeight="bold";
      return false;
    }else{
      var smallText=message.parentNode.getElementsByTagName("label")[3]
      smallText.style.color="#ffffbe"
      smallText.innerHTML="Your message: - (message specified)";
    }
}

Okay, the code is large, but it is relatively easy, and here is the explanation.
First, we create the function called validateForm.

For each field, we create a var(variable). In the case with the visitor, we create a var called visitor, which targets the element with an ID visitor. We proceed with an

function, which checks if the visitor didn’t entered anything in the field. If he did not put up anything, we create the var smallText, which targets the

<label for="visitor">Name: </label>

We add label[0], because it is the first label in the form ( we use label[1] for the email, label [2] for the priority and so on).
If he did inserted his name, we use the else statement, which will write down that he inserted his name.

The longest of all code, is the statement which checks for invalid characters in e-mail, so we can determine if the e-mail is valid e.c my@mail.com without any spaces etc.

For the priority filed, which uses an

, we don’t check if the visitor entered something ( visitorMail==””) , but we check for the selected index ( priority.selectedIndex==0 ).

Now, we can proceed on the php file, which will validate the form and send the e-mail.

Write down the following code

<?php
$to = " your@mail.com ";
$visitor = $_POST['visitor'];
$visitorMail = $_POST['visitorMail'];
$priority = $_POST['priority'];
$attn = $_POST['message'];

if(!$visitorMail == "" && (!strstr($visitorMail,"@") || !strstr($visitorMail,".")))
{
echo "<h2>Use Back - Enter valid e-mail</h2>n";
$badinput = "<h2>Mail was not sent</h2>n";
echo $badinput;
die ("Go back! ! ");
}

if(empty($visitor) || empty($visitorMail) || empty($priority )) {
echo "<h2>Use Back - fill in all fields</h2>n";
die ("Use back! ! ");
}

$todayis = date("l, F j, Y, g:i a") ;

$attn = $attn ;
$subject = $attn;

$priority = stripcslashes($priority);

$message = " $todayis [EST] n
Attention: $attn n
Message: $priority n
From: $visitor ($visitormail)n
";

$from = "From: $visitormailrn";

mail($visitorMail, $subject, $message, $from);

?>

What we do here, is basically the same as the javascript validation, but this one checks after the form is processed. Every line of the code is self explanatory. Note that you have to insert your e-mail in the php file, in the following line

, so the form will send e-mails to you.

If you have any problems please let me now, so we can sort this out.