Responsive Ajax Contact Form [PHP – JQuery]

All websites should have a contact form, contact form is a necessary component for the website in order to keep your site dynamic and connect with your site’s users or visitors.

Why responsive ?Analytics and statistics prove that the mobiles and tablets number of users is increasing, so you should be aware of these visitors that browse your site using their narrow or wide screens.

Let’s start creating our Responsive Ajax Contact Form

HTML Structure for responsive ajax contact form

first of all we should start with the HTML structure.












































<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Responsive Ajax Contact Form</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/responsive-grid.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/jquery.js"></script>
<script src="js/ajax-contact.js"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-100 mobile-grid-100 form-title"><h1>Responsive Ajax Contact Form</h1></div>
<div class="grid-100 mobile-grid-100 form-instructions"><p>Fill the fields below with your appropriate informations.</p></div>
<form id="ajax_contact" method="post" action="">
<div id="response" class="grid-100 mobile-grid-100"></div>
<div class="grid-100 mobile-grid-100 grid-parent form-row">
<div class="grid-30 mobile-grid-100 form-label">Name <span>(Required)</span></div>
<div class="grid-70 mobile-grid-100 form-input"><input type="text" id="name" name="name" class="grid-100 mobile-grid-100" /></div>
</div>
<div class="grid-100 mobile-grid-100 grid-parent form-row">
<div class="grid-30 mobile-grid-100 form-label">E-Mail <span>(Required)</span></div>
<div class="grid-70 mobile-grid-100 form-input"><input type="text" id="email" name="email" class="grid-100 mobile-grid-100" /></div>
</div>
<div class="grid-100 mobile-grid-100 grid-parent form-row">
<div class="grid-30 mobile-grid-100 form-label">Subject</div>
<div class="grid-70 mobile-grid-100 form-input"><input type="text" id="subject" name="subject" class="grid-100 mobile-grid-100" /></div>
</div>
<div class="grid-100 mobile-grid-100 grid-parent form-row">
<div class="grid-30 mobile-grid-100 form-label">Message <span>(Required)</span></div>
<div class="grid-70 mobile-grid-100 form-input"><textarea id="message" name="message" rows="5" class="grid-100 mobile-grid-100"></textarea></div>
</div>
<div class="grid-100 mobile-grid-100 grid-parent">
<div class="grid-100 mobile-grid-100 form-button"><input type="submit" id="contact_button" name="submit" class="grid-30 mobile-grid-100" value="Send Message" /></div>
</div>
</form>
</div>
</body>
</html>

this is the HTML structure for the responsive form where I used Unsemantic CSS Framework to adjust the dimensions of the form in order to fit all screen sizes.

the previous code will result :
Responsive Ajax Contact Form

CSS Style for responsive ajax contact form























































































body {
  background:#f5f5f5;
}
.grid-container {
  padding:20px;
  max-width: 600px;
}
.form-title {
  padding:20px 0;
}
.form-title h1{
  font-family:Georgia;
  font-size:24px;
  font-weight:bold;
  color:#666;
  line-height:30px;
}
.form-instructions p{
  font-family:Georgia;
  font-size:16px;
  font-weight:bold;
  color:#999;
  margin-bottom:20px;
  line-height:24px;
}
.form-row {
  padding:20px 0;
  border-bottom:1px dashed #ddd;
}
.form-label {
  font-family:Georgia;
  font-size:14px;
  font-weight:bold;
  color:#999;
  margin-bottom:5px;
}
.form-label span{
  font-family:Georgia;
  font-size:11px !important;
  font-weight:bold;
  color:#DD3D36;
  margin-bottom:5px;
}
.form-input input, .form-input textarea{
  padding:5px;
  border:1px solid #e5e5e5;
  color:#999;
}
.form-input input:focus, .form-input textarea:focus{
  border:1px solid #ccc;
}
.form-button {
  padding:20px 10px;
}
.form-button input{
  float:right;
  padding:5px 10px;
  border:1px solid #333;
  background:#444;
  color:#f5f5f5;
  font-family:Georgia;
  font-size:14px;
  font-weight:bold;
  cursor:pointer;
}
.error-result {
  padding:15px;
  background:#FBE8E8;
  border:1px solid #FCD2D2;
  color:#AC1111;
  font-family:Georgia;
  font-size:14px;
  font-weight:bold;
  margin:10px 0;
}
.success-result {
  padding:15px;
  background:#E0FFE4;
  border:1px solid #C5FCCB;
  color:#1F7C2A;
  font-family:Georgia;
  font-size:14px;
  font-weight:bold;
  margin:10px 0;
}

After adding the CSS styles to the HTML document, the form will become as the below :

Responsive Ajax Contact Form

JQuery functions to deal with the ajax contact form

Before adding the AJAX function that deal with the form values we should include the JQuery lib.



<script src="js/jquery.js"></script>







// validation for E-Mail value submitted by form.
function validateEmail(email) { 
var re = /^(([^<>()[\] \\.,;:\s@\"]+(\.[^<>()[\] \\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9] {1,3}\.[0-9] {1,3}\.[0-9] {1,3}\.[0-9] {1,3}\])|(([a-zA-Z\-0-9] +\.)+[a-zA-Z] 

{2,}))$/;
return re.test(email);
}











































$(function() {
$("#contact_button").click(function() {
// form variables
var name = $("input#name").val();
var email = $("input#email").val();
var subject = $("input#subject").val();
var message = $("textarea#message").val();
var dataString = 'name='+ name +'&email='+ email +'&subject='+ subject +'&message='+ message;
// form validation
if(name=='') {
$("#response").html('<div class="error-result">Insert the Name Please.</div>');
return false;
} else if (email=='') {
$("#response").html('<div class="error-result">Insert The E-Mail Please.</div>');
return false;
} else if (!validateEmail(email)) {
$("#response").html('<div class="error-result">Please Insert a Valid E-Mail Address.</div>');
return false;
} else if (message=='') {
$("#response").html('<div class="error-result">Insert The Message Please.</div>');
return false;
} else {
$("#response").hide();
// AJAX functions
$.ajax({
type: "POST",
url: "ajax-contact.php",
data: dataString,
cache: false,
success: function(html){
if (html == 1) {
$("#response").html('<div class="success-result">Your Message Has Been Sent Successfully.</div>');
document.getElementById('ajax_contact').reset();
} else {
$("#response").html('<div class="error-result">Error Happened. Please Try Again Later.</div>');
}  
}
});
}
return false;
});
});

PHP Processing the form and submiting the message

The final step is the PHP one, that take the form variables and process them, re-validate them then submit the message using the built-in PHP mail() function.

You can send the message using SMTP with Swiftmailer, read : PHP SMTP Emails using SwiftMailer
































	





// the E-Mail address that you want to recieve the message on.
$to_email = 'your-email@domain.com'; 
if (isset($_POST)) {
// recieve the form variables and secure them
$name = trim(strip_tags(addslashes($_POST['name'] 
))); 
$email = trim(strip_tags(addslashes($_POST['email'] 
)));
if (!empty($_POST['subject'] 
)) {
$subject = trim(strip_tags(addslashes($_POST['subject'] 



)));
} else {
$subject = 'Message From Contact Form';
}
$message = trim(strip_tags(addslashes($_POST['message'] 




















	

)));
// validate the form
if (empty($name)) {
echo 0;
} elseif (empty($email)) {
echo 0;
} elseif (empty($message)) {
echo 0;
} else {
echo 1;
// the message headers
$headers = "From: " . strip_tags($email) . "\r\n";
$headers .= "Reply-To: ". strip_tags($email) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
// submitting the message using PHP mail() function
$send = mail($to_email, $subject, $message, $headers);
if ($send) {
echo 1;
} else {
echo 0;
}	
}
}

Final Thought

This tutorial gives you the basic lines to create your responsive ajax contact form but there are many other modifications and additional features that can be added to this final product.

Demo Download Responsive Ajax Contact Form

Leave a Comment

Your email address will not be published. Required fields are marked *