HTML:
[php]
<form class="form quote" id="contact_form">
<div class="clearfix">
<div class="cf-left-col">
<!-- Name -->
<div class="form-group">
<input type="text" name="name" id="name" class="input-md round form-control" placeholder="Name" pattern=".{3,100}" required>
</div>
<!-- Company -->
<div class="form-group">
<input type="text" name="company" id="company" class="input-md round form-control" placeholder="Company" pattern=".{3,100}" required>
</div>
<!-- Email -->
<div class="form-group">
<input type="email" name="email" id="email" class="input-md round form-control" placeholder="Email" pattern=".{5,100}" required>
</div>
<!-- Col -->
<div class="mb-20 mb-md-10">
<p class="help-block">
I am interested in:
</p>
<select class="input-md form-control" name="interested" id="interested">
<option value="0">Number 0</option>
<option value="1">Number 1</option>
<option value="2">Number 2</option>
</select>
</div>
<!-- People -->
<div class="form-group">
<input type="text" name="people" id="people" class="input-md round form-control" placeholder="Number of people at event" pattern=".{2,100}" required>
</div>
<!-- End Col -->
</div>
<div class="cf-right-col">
<!-- Time -->
<div class="form-group">
<input type="text" name="time" id="time" class="input-md round form-control" placeholder="Time of event" pattern=".{2,100}" required>
</div>
<!-- Date-->
<div class="form-group">
<input type="text" name="date" id="date" class="input-md form-control" placeholder="Date Of Event">
</div>
<!-- Location -->
<div class="form-group">
<input type="text" name="location" id="location" class="input-md round form-control" placeholder="Location Of Event" pattern=".{5,100}" required>
</div>
<!-- Message -->
<div class="form-group">
<textarea name="message" id="message" class="input-md round form-control" style="height: 125px;" placeholder="Message"></textarea>
</div>
</div>
</div>
<div class="clearfix">
<div class="cf-left-col">
<!-- Inform Tip -->
<div class="form-tip pt-10 pb-20">
<i class="fa fa-info-circle"></i> All the fields are required
</div>
</div>
<div class="cf-right-col">
<!-- Send Button -->
<div class="align-right pt-10">
<button class="submit_btn btn btn-mod btn-medium btn-round" id="submit_btn">Submit Message</button>
</div>
</div>
</div>
<div id="result"></div>
</form>
</div>
</div>
[/php]____________________________________________________________________________________
PHP:
[php]<?php
if($_POST)
{
$to_Email = "[email protected]"; //Replace with recipient email address
$subject = ‘Website Quote Enquiry’; //Subject line for emails
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//exit script outputting json data
$output = json_encode(
array(
'type'=>'error',
'text' => 'Request must come from Ajax'
));
die($output);
}
//check $_POST vars are set, exit if any missing
if(!isset($_POST["userName"]) || !isset($_POST["userCompany"]) || !isset($_POST["userEmail"]) || !isset($_POST["userPeople"]) || !isset($_POST["userLocation"]) || !isset($_POST["userTime"]) || !isset($_POST["userDate"]) || !isset($_POST["userMessage"]))
{
$output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
die($output);
}
$interested = $_POST['interested'];
$interested = array(0=>'Drum as One','1st Project','Drum Machine',);
{ echo’’;
// For each value of the array assign variable name "interested"
foreach ( $interested as $key => $value ) {
echo"<option value=\"$key\">$value</option>\n";
}
//Sanitize input data using PHP filter_var().
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Company = filter_var($_POST["userCompany"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_People = filter_var($_POST["userPeople"], FILTER_SANITIZE_STRING);
$user_Location = filter_var($_POST["userLocation"], FILTER_SANITIZE_STRING);
$user_Time = filter_var($_POST["userTime"], FILTER_SANITIZE_STRING);
$user_Date = filter_var($_POST["userDate"], FILTER_SANITIZE_STRING);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
$user_Message = str_replace("\'", "'", $user_Message);
$user_Message = str_replace("'", "'", $user_Message);
//additional php validation
if(strlen($user_Name)<4) // If length is less than 4 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
die($output);
}
if(strlen($user_Company)<4) // If length is less than 4 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Company 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(strlen($user_People)<2) // If length is less than 2 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Number of people needs to be double digits or higher!'));
die($output);
}
if(strlen($user_Location)<2) // If length is less than 2 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Location is to short!'));
die($output);
}
if(strlen($user_Time)<2) // If length is less than 2 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Time is to short!'));
die($output);
}
if(strlen($user_Date)<2) // If length is less than 2 it will throw an HTTP error.
{
$output = json_encode(array('type'=>'error', 'text' => 'Location to short!'));
die($output);
}
if(strlen($user_Message)<5) //check emtpy message
{
$output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
die($output);
}
//proceed with PHP email.
$headers = 'From: '.$user_Email.'' . "\r\n" .
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$sentMail = @mail($to_Email, $subject, $user_Message . "\r\n\n" .'Name: '.$user_Name. "\r\n" .'Company: '.$user_Company. "\r\n" .'Email: '.$user_Email . "\r\n" .'Interested: '.$interested . "\r\n" .'Number of People: '.$user_People. "\r\n" .'Location: '.$user_Location. "\r\n" .'Time: '.$user_Time. "\r\n" .'Date: '.$user_Date. "\r\n" , $headers);
if(!$sentMail)
{
$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);
}
}
?>
[/php]
JS:
/* ---------------------------------------------
Contact form
--------------------------------------------- */
[php]$(document).ready(function(){
$("#submit_btn").click(function(){
//get input field values
var user_name = $('input[name=name]').val();
var user_company = $('input[name=company]').val();
var user_email = $('input[name=email]').val();
var user_people = $('input[name=people]').val();
var user_location = $('input[name=location]').val();
var user_time = $('input[name=time]').val();
var user_date = $('input[name=date]').val();
var user_message = $('textarea[name=message]').val();
//simple validation at client's end
//we simply change border color to red if empty field using .css()
var proceed = true;
if (user_name == "") {
$('input[name=name]').css('border-color', '#e41919');
proceed = false;
}
var proceed = true;
if (user_company == "") {
$('input[name=company]').css('border-color', '#e41919');
proceed = false;
}
if (user_email == "") {
$('input[name=email]').css('border-color', '#e41919');
proceed = false;
}
var proceed = true;
if (user_people == "") {
$('input[name=people]').css('border-color', '#e41919');
proceed = false;
}
var proceed = true;
if (user_location == "") {
$('input[name=location]').css('border-color', '#e41919');
proceed = false;
}
var proceed = true;
if (user_time == "") {
$('input[name=time]').css('border-color', '#e41919');
proceed = false;
}
var proceed = true;
if (user_date == "") {
$('input[name=date]').css('border-color', '#e41919');
proceed = false;
}
if (user_message == "") {
$('textarea[name=message]').css('border-color', '#e41919');
proceed = false;
}
//everything looks good! proceed...
if (proceed) {
//data to be sent to server
post_data = {
'userName': user_name,
'userCompany': user_company,
'userEmail': user_email,
'userPeople': user_people,
'userLocation': user_location,
'userTime': user_time,
'userDate': user_date,
'userMessage': user_message
};
//Ajax post data to server
$.post('quote.php', post_data, function(response){
//load json data from server and output message
if (response.type == 'error') {
output = '<div class="error">' + response.text + '</div>';
}
else {
output = '<div class="success">' + response.text + '</div>';
//reset values in all input fields
$('#contact_form input').val('');
$('#contact_form textarea').val('');
}
$("#result").hide().html(output).slideDown();
}, 'json');
}
return false;
});
//reset previously set border colors and hide all message on .keyup()
$("#contact_form input, #contact_form textarea").keyup(function(){
$("#contact_form input, #contact_form textarea").css('border-color', '');
$("#result").slideUp();
});
});
[/php]