Create A Simple Contact Form With Validation

This is my first ever written tutorial, so hopefully you will learn something new today and maybe even feature this code on your own website.

I have also included some basic validation to prevent you from getting spammed, without the need to use Javascript or jQuery.

*Commenting has been added to the php code, explaining what does what “//comment”

Ok let’s get started!

Part 1 – The Validation

<?php

if(isset($_POST['submitted'])) {

//validation starts

$errors = array();

$required_fields['name'] = 'You are required to enter your Name.';

$required_fields['email'] = 'You are required to enter your E-mail Address.';

$required_fields['subject'] = 'You are required to enter a Subject.';

//validation ends

To start we will create the validation, depending on how many required fields you want your form to have is the amount of variables you will need to create. In this example my form will have 4 fields:

*denotes required field

*Name
*Email
*Subject
Message

Out of these fields, 3 are required before your message is submitted. If one of the required fields is left blank, at the top of the form it will return the error message “You are required to enter your Name” etc.

Part 2 – Remove whitespaces

 foreach($_POST as $key => $value) {

if(array_key_exists($key, $required_fields)) {

//trims all whitespaces

if(trim($_POST[$key]) === '') {

$errors[$key] = $required_fields[$key];

}

}

}

//if no errors then submit the form

if(empty($errors)) {

This removes any extra spaces the user has inputted at the beginning or the end of the text field. If your data is being submitted to a database, it would make it easier to query results without having to scan through all records that have accidental white spacing.

Part 3 – Creating the e-mail the form will send

 $name = $_POST['name'];

$email = $_POST['email'];

//who should we send this form contents to?

$to  = "[email protected]";

// subject of the e-mail.

$subject = $_POST['subject'];

// e-mail message

$body = $_POST['message'];

// To send HTML mail, the Content-type header must be set so it won't be classed as spam

$headers  = 'MIME-Version: 1.0' . "\r\n";

$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";

// Additional headers

$headers .= "From: " . $email . "\r\n";

// Mail it!

$success = mail($to, $subject, $body, $headers);

if($success) {

echo "<div id='success'>Your responce has been sent.</div>";

}

else

echo "<div id='problem'>Error sending e-mail!</div>";

}

}

Now it is time to start customizing how your e-mail will sent. First thing you are required to set is the e-mail that will be receiving the contact form submissions. This will also return one of two messages. If the form has no problems it will let you know that the mail was sent successfully or an error message stating there was an issue and the email was unable to send.

Part 4 – Errors displayed

 //if there are validation errors, lets let the user know!

if(!empty($errors)) {

?>

<div class='errors'>

<p><strong>Please check the following errors:</strong></p>

<?php

//each error is displayed

foreach($errors as $value) {

echo "<span>$value</span><br />";

}

?>

</div>

<?php

} //end while

?>

This will let your contact form user know what fields they have missed out, once all the required fields are completed, the form will send without any issues.

Part 5 – The HTML form

<div>
 <form action="" target="" id="contactForm" method="post">
 <fieldset>
 <ol>
 <p><strong>Contact us</strong></p>
 <li>
 <label for="name"><em>*</em> Your Name:</label>
 <input type="text" name="name" id="name" value="<?php if(isset($_POST['name'])) echo $_POST['name'];?>">
 </li>
 <li>
 <label for="email"><em>*</em> E-mail:</label>
 <input type="text"  name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>">
 </li>
 <li>
 <label for="subject"><em>*</em> Subject:</label>
 <input type="text" name="subject" id="subject" value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>">
 </li>
 <li>
 <label for="message">Message:</label>
 <textarea rows="2" cols="20" name="message" id="message"></textarea>
 </li>

<input type="submit" value="Submit!" name="submitted"/>
</li>
 </ol>

 </fieldset>
 </form>
 </div>

Ensure that your form names match the field names in the validation from Part 1, this is crucial for the form to work. Style the form how you like to match your own website and give it a twirl! Make sure your webserver can send mail or else this contact form will not work!

Additional Extras

You are also able to add carbon copies or blind carbon copies at your convenience by adding the following code into your header:

 $headers .= 'CC: [email protected]' . "\r\n";

$headers .= 'Bcc: [email protected]' . "\r\n";