Portable & Responsive Ajax Contact Form Capable of Sending to Multiple Recipients.

contact_me.php

<?php
///////////////////////////////////////////////////////
//AUTHOR: Mathieu Dombrock
//BASED ON THE WORK OF: Saran Chamling
//LICENSE: http://opensource.org/licenses/MIT
//Portable & Responsive Ajax Form 
//Capable of sending to multiple recipients. 
///////////////////////////////////////////////////////
if($_POST)
{
	//Recipient email, Replace with own email here
	$send_to = array('[email protected]','[email protected]');
	
	//check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
		
		$output = json_encode(array( //create JSON data
			'type'=>'error', 
			'text' => 'Sorry Request must be Ajax POST'
		));
		die($output); //exit script outputting json data
    } 
	
	//Sanitize input data using PHP filter_var().
	$user_name		= filter_var($_POST["user_name"], FILTER_SANITIZE_STRING);
	$user_email		= filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
	$phone_number	= filter_var($_POST["phone_number"], FILTER_SANITIZE_NUMBER_INT);
	$subject		= filter_var($_POST["subject"], FILTER_SANITIZE_STRING);
	$message		= filter_var($_POST["msg"], FILTER_SANITIZE_STRING);
	
	//additional php validation
	if(strlen($user_name)<4){ // If length is less than 4 it will output JSON error.
		$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
		die($output);
	}
	if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
		$output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
		die($output);
	}
	if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)){ //check for valid numbers in phone number field
		$output = json_encode(array('type'=>'error', 'text' => 'Enter only digits in phone number'));
		die($output);
	}
	if(strlen($subject)<3){ //check emtpy subject
		$output = json_encode(array('type'=>'error', 'text' => 'Subject is required'));
		die($output);
	}
	if(strlen($message)<3){ //check emtpy message
		$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
		die($output);
	}
	
	//email body
	$message_body = $message."\r\n\r\n-".$user_name."\r\nEmail : ".$user_email."\r\nPhone Number : ". $phone_number ;
	
	//proceed with PHP email.
	$headers = 'From: '.$user_name.'' . "\r\n" .
	'Reply-To: '.$user_email.'' . "\r\n" .
	'X-Mailer: PHP/' . phpversion();
	
	foreach ($send_to as $value)
	{
		$send_mail = mail($value, $subject, $message_body, $headers);
	}	
	if(!$send_mail)
	{
		//If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
		$output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
		die($output);
	}else{
		$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .' Thank you for your email'));
		die($output);
	}
}
?>

form_style.css

/*
///////////////////////////////////////////////////////
//AUTHOR: Mathieu Dombrock
//BASED ON THE WORK OF: Saran Chamling
//LICENSE: http://opensource.org/licenses/MIT
//Portable & Responsive Ajax Form 
//Capable of sending to multiple recipients. 
///////////////////////////////////////////////////////
*/
.form-style{
	max-width: 90%;
	padding: 1.2em 1em 1.2em 1em;
	font: 13px;
	margin: 1em auto;
	background: #FFFFFF;
	border:0.2em solid black;
}
.form-style-heading{
    font-weight: bold;
    border-bottom: 0.1em solid #ddd;
    margin-bottom: 0.3em;
    font-size: 1.1em;
    padding-bottom: 0.2em;
}
.form-style label{
    display: block;
    margin: 0 0 0.5em 0;
}
.form-style label > span{
    width:6em;
    font-weight: bold;
    float: left;
    padding-top: 0.5em;
    padding-right: 0.3em;
}
.form-style span.required{
    color:red;
}
.form-style .tel-number-field{
    width: 3.5em;
    text-align: center;
}
.form-style  .long{
    width: 80%;
}
.form-style input.input-field{
    width: 80%;
   
}

.form-style input.input-field,
.form-style .tel-number-field,
.form-style .textarea-field,
 .form-style .select-field{
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out; 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    border: 0.1em solid #C2C2C2;
    box-shadow: 0.1em 0.1em 0.3em #EBEBEB;
    -moz-box-shadow: 0.1em 0.1em 0.3em #EBEBEB;
    -webkit-box-shadow: 0.1em 0.1em 0.4em #EBEBEB;
    border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    padding:0.8em;
    outline: none;
}
.form-style .input-field:focus,
.form-style .tel-number-field:focus,
.form-style .textarea-field:focus,  
.form-style .select-field:focus{
    border: 0.1em solid #0C0;
}
.form-style .textarea-field{
    height:10em;
    width: 80%;
}
.form-style input[type="button"],
.form-style input[type="submit"] {

    background-color: #216288;
    border: 0.1em solid #17445E;
    display: block;
	margin-left:83%;
    cursor: pointer;
    color: #FFFFFF;
    padding: 0.8em 1.1em;
    text-decoration: none;
    font-size: 0.8em;
}
.form-style input[type="button"]:hover,
.form-style input[type="submit"]:hover {
    background: linear-gradient(to bottom, #2D77A2 5%, #337DA8 100%);
    background-color: #28739E;
}
.form-style .success{
	background: #D8FFC0;
	padding: 0.4em 0.8em 0.4em 0.8em;
	margin: 0 0 0.4em 0;
	border: none;
	font-weight: bold;
	color: #2E6800;
	border-left: 0.2em solid #2E6800;
}
.form-style .error {
	background: #FFE8E8;
	padding: 0.4em 0.8em 0.4em 0.8em;
	margin: 0 0 0.4em 0;
	border: none;
	font-weight: bold;
	color: #FF0000;
	border-left: 0.2em solid #FF0000;
}
.select-field
{
	width:80%;
	height:3.3em;
}

@media (max-width: 575px) {
	.form-style .textarea-field{
		width: 100%;
	}
	.select-field
	{
		width:100%;
	}
	.form-style  .long{
    	width: 100%;
	}
	.form-style input.input-field{
    	width: 100%;
	}
	.form-style input[type="button"],
	.form-style input[type="submit"] {
		margin:0 auto;
	}

}

index.php

<!--
///////////////////////////////////////////////////////
//AUTHOR: Mathieu Dombrock
//BASED ON THE WORK OF: Saran Chamling
//LICENSE: http://opensource.org/licenses/MIT
//Portable & Responsive Ajax Form 
//Capable of sending to multiple recipients. 
///////////////////////////////////////////////////////
-->
<head><!--Remove this tag but put the code in the head-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#submit_btn").click(function() { 
	    var proceed = true;
        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields		
		$("#contact_form input[required=true], #contact_form textarea[required=true]").each(function(){
			$(this).css('border-color',''); 
			if(!$.trim($(this).val())){ //if this field is empty 
				$(this).css('border-color','red'); //change border color to red   
				proceed = false; //set do not proceed flag
			}
			//check invalid email
			var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
			if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
				$(this).css('border-color','red'); //change border color to red   
				proceed = false; //set do not proceed flag				
			}	
		});
        if(proceed) //everything looks good! proceed...
        {
			//get input field values data to be sent to server
            post_data = {
				'user_name'		: $('input[name=name]').val(), 
				'user_email'	: $('input[name=email]').val(), 
				'phone_number'	: $('input[name=phone2]').val(), 
				'subject'		: $('select[name=subject]').val(), 
				'msg'			: $('textarea[name=message]').val()
			};     
            //Ajax post data to server
            $.post('contact_me.php', post_data, function(response){  
				if(response.type == 'error'){ //load json data from server and output message     
					output = '<div class="error">'+response.text+'</div>';
				}else{
				    output = '<div class="success">'+response.text+'</div>';
					//reset values in all input fields
					$("#contact_form  input[required=true], #contact_form textarea[required=true]").val(''); 
					$("#contact_form #contact_body").slideUp(); //hide form after success
				}
				$("#contact_form #contact_results").hide().html(output).slideDown();
            }, 'json');
        }
    });
    //reset previously set border colors and hide all message on .keyup()
    $("#contact_form  input[required=true], #contact_form textarea[required=true]").keyup(function() { 
        $(this).css('border-color',''); 
        $("#result").slideUp();
    });
});
</script>
<link href="form_style.css" rel="stylesheet" type="text/css" />
</head><!--Remove this tag but put the code in the head-->
<body><!--Remove this tag but put the code in the body-->
<div class="form-style" id="contact_form">
    <div class="form-style-heading">Please Contact Us</div>
    <div id="contact_results"></div>
    <div id="contact_body">
        <label><span>Name <span class="required">*</span></span>
            <input type="text" name="name" id="name" required="true" class="input-field"/>
        </label>
        <label><span>Email <span class="required">*</span></span>
            <input type="email" name="email" required="true" class="input-field"/>
        </label>
        <label><span>Phone</span>
            <input type="text" name="phone2" maxlength="15"  required="true" class="tel-number-field long" />
        </label>
            <label for="subject"><span>Regarding</span>
            <select name="subject" class="select-field">
            <option value="General Question">Option 1</option>
            <option value="Advertise">Option 2</option>
            <option value="Partnership">Option 3</option>
            </select>
        </label>
        <label for="field5"><span>Message <span class="required">*</span></span>
            <textarea name="message" id="message" class="textarea-field" required="true"></textarea>
        </label>
        <label>
			<input type="submit" id="submit_btn" value="Submit" />
        </label>
    </div>
</div>
</body><!--Remove this tag but put the code in the body-->

read_me.txt

Add a WordPress Compatable 'index.php' (modify the jQuery)
Add an option to redirect the page after the form has been submitted. 
More info on this project available at: http://myceliumzero.com/responsive-portable-ajax-form/