Cute HTML5 Ajax Contact Form With Google Maps
Published on July 25, 2013
Hi guys how you doing? In today’s tutorial I will teach you how to create simple and clean HTML5 AJAX Contact Form with Google Maps. I am using PHP as back end technology but you can use what ever you want.
We are doing form validation in both HTML5 as well as jQuery(JavaScript) level but if you want you can also write them for back end level also.
First Create these files
—index.html —style.css —scripts.js —phpcontact.php
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cute HTML5 Ajax Contact Form With Google Maps: Techumber</title>
<meta name="description" content="Cute HTML5 Ajax Contact Form With Google Maps" />
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- CSS
================================================== -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- js
================================================== -->
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"
></script>
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div class="container">
<section id="contact">
<header>
<h1>HTML5 AJAX Contact Form</h1>
<p>Please fill your details below!</p>
</header>
<mark id="message" style="display: none;"></mark>
<form method="post" action="phpcontact.php" name="cform" id="cform" autocomplete="on">
<fieldset>
<legend>Contact Details</legend>
<div>
<label for="name" accesskey="U">Your Name</label>
<input
name="name"
type="text"
id="name"
placeholder="Enter your name"
required="required"
/>
</div>
<div>
<label for="email" accesskey="E">Email</label>
<input
name="email"
type="email"
id="email"
placeholder="Enter your Email Address"
required="required"
/>
</div>
<div>
<label for="comments" accesskey="C">Comments</label>
<textarea
name="comments"
cols="40"
rows="7"
id="comments"
placeholder="Enter your comments"
spellcheck="true"
required="required"
></textarea>
</div>
<section id="map-outer">
<div id="map_canvas"></div>
</section>
</fieldset>
<input type="submit" class="submit" id="submit" value="Submit" />
</form>
</section>
</div>
</body>
</html>In this simple markup we using HTML5 validations. So even if you won’t write javaScript write it won’t be a problem unless until the browser support HTML5. Read More about HTML5 Form Validations at Perfect Form Validations Using HTML5.
Style.css
* {
border: 0;
margin: 0;
padding: 0;
}
body {
font: 62.5% 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
min-width: 100%;
min-height: 101%;
color: #666;
background: #eee;
}
.container {
width: 700px;
margin: 0 auto;
}
.logo {
text-align: center;
}
#contact {
display: block;
width: 750px;
margin: 50px auto;
padding: 35px;
border: 1px solid #cbcbcb;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
-webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
position: relative;
}
#contact h1 {
margin: 10px 0 10px;
font-size: 24px;
color: #333333;
}
#contact p,
label,
legend {
font: 1.5em 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
}
#contact fieldset {
padding: 20px;
border: 1px solid #eee;
margin: 0 0 20px;
}
#contact legend {
padding: 7px 10px;
font-weight: bold;
color: #000;
border: 1px solid #eee;
margin-bottom: 20px;
}
#contact label {
display: inline-block;
float: left;
height: 1em;
line-height: 1em;
padding: 6px 0 0;
width: 155px;
font-size: 1.4em;
margin: 5px 0;
clear: both;
}
#contact input,
#contact textarea {
width: 220px;
padding: 5px;
color: #666;
background: #f5f5f5;
border: 1px solid #ccc;
margin: 5px 0;
outline: none;
font: 1.4em 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
border-radius: 5px;
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
box-shadow: 0 0 5px rgba(81, 203, 238, 0);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
}
#contact input:focus,
#contact textarea:focus {
border: 1px solid #ddd;
background-color: #fff;
color: #333;
outline: none;
position: relative;
z-index: 5;
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
}
#contact input.error,
#contact textarea.error,
#contact select.error {
box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
border: 1px solid #faabab;
background: #fef3f3;
}
#contact input.submit {
width: auto;
cursor: pointer;
position: relative;
border: 1px solid #282828;
color: #fff;
padding: 6px 16px;
text-decoration: none;
font-size: 1.5em;
background: #555;
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.12, rgb(60, 60, 60)),
color-stop(1, rgb(85, 85, 85))
);
background: -moz-linear-gradient(center bottom, rgb(60, 60, 60) 12%, rgb(85, 85, 85) 100%);
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
#contact input.submit:hover {
background: #282828 !important;
transition: none;
-webkit-transition: none;
-moz-transition: none;
}
#message {
font-size: 1.5em;
margin: 1em 0;
padding: 10px;
display: block;
background: green;
border-radius: 10px;
color: #fff;
text-align: center;
}
#map-outer {
width: 260px;
height: 200px;
padding: 6px;
border: 1px solid #ccc;
clear: both;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 6px #ddd;
-webkit-box-shadow: 0 0 6px #ddd;
float: right;
position: absolute;
top: 200px;
right: 60px;
}
#map_canvas {
width: 260px;
height: 200px;
float: right;
position: relative;
background-color: rgb(229, 227, 223);
overflow: hidden;
-webkit-transform: translateZ(0);
}scripts.js
$(function() {
//For all form validations
var validate={
init:function(){
var $this=this;
// validation will be done at focus out event
$('#name, #comments').focusout(function() {
$this.checkEmpty($(this));
});
$('#email').focusout(function() {
$this.checkEmail($(this));
});
},
//To check wether it is a valid
isEmail:function(email){
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(email);
},
checkEmpty:function($this){
if (!$this.val())
$this.addClass('error');
else
$this.removeClass('error');
},
checkEmail:function($this){
if (!$this.val() || !this.isEmail($this.val()))
$this.addClass('error');
else
$this.removeClass('error');
}
};
validate.init();
//Ajax submit
var ajax={
init:function(){
$this=this;
$('#cform').submit(function(e){
e.preventDefault();
var action = $(this).attr('action');
$this.ajaxSubmit($(this),action);
});
},
ajaxSubmit:function($this,action){
if ($('#contact .error').size()>0)
return false;
$('#submit')
.after('<img src="ajax-loader.gif" class="loader" />')
.attr('disabled','disabled');
$.post(action, $('#cform').serialize(),
function(data){
$('#message').html('Thank You! We will get back to you soon.');
$('#message').slideDown();
$('#cform img.loader').fadeOut('slow',function(){$(this).remove()});
$('#cform #submit').removeAttr('disabled');
if(data.match('success') != null)
$('#contactform').slideUp('slow');
}
);
}
};
ajax.init();
var gmap={
init:function(Lat,Lng) {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(Lat,Lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
}
google.maps.event.addDomListener(window, 'load', **gmap.init(17.81368, 83.20520)**);
});
This scripts.js will do three things. one, it will do client side validation. Two, form ajax submit. Three, loading and calling Google maps API. Change Lat and Lng values when we call it gmp.init(Your lng value, Your lat value). Just google it for lng, lat values for example i search it as “visakhapatnam longitude and latitude” I got above values.
phpcontact.php
<?php
if($_POST){
$name=$_POST['name'];
$email=$_POST['email'];
$comments=$_POST['commments'];
//Here Write Sql Insert commeand to srote
//the data into database as well as send acknowledgement mail
//Here i'm considering both sql insert and send mail success so $result=1
$result=1;
if($result){
echo "success";
}
exit();
}
?>
This script takes ajax POST request and use that data to insert into database and return success if everything went good. I am not writing any sql insert code here. If you don’t know how to write sql insert code in php you can found it on Google or have look at here for example. That’s it hope you like it.