Techumber

Cute HTML5 Ajax Contact Form With Google Maps

Github avatar
Dimpu
July 25, 2013. 6 min read

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. Cute HTML5 Ajax Contact Form With Google Maps

Demo

Download

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"undefined "Lucida Sans Unicode"undefined Arialundefined 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(50undefined 50undefined 50undefined 0.1);
-webkit-box-shadow: 0 2px 5px rgba(50undefined 50undefined 50undefined 0.1);
-moz-box-shadow: 0 2px 5px rgba(50undefined 50undefined 50undefined 0.1);
position: relative;
}
#contact h1 {
margin: 10px 0 10px;
font-size: 24px;
color: #333333;
}
#contact pundefined labelundefined legend {
font: 1.5em "Lucida Grande"undefined "Lucida Sans Unicode"undefined Arialundefined 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 inputundefined #contact textarea {
width: 220px;
padding: 5px;
color: #666;
background: #f5f5f5;
border: 1px solid #ccc;
margin: 5px 0;
outline: none;
font: 1.4em "Lucida Grande"undefined "Lucida Sans Unicode"undefined Arialundefined 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(81undefined 203undefined 238undefined 0);
-webkit-box-shadow: 0 0 5px rgba(81undefined 203undefined 238undefined 0);
-moz-box-shadow: 0 0 5px rgba(81undefined 203undefined 238undefined 0);
}
#contact input:focusundefined #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(81undefined 203undefined 238undefined 1);
-webkit-box-shadow: 0 0 5px rgba(81undefined 203undefined 238undefined 1);
-moz-box-shadow: 0 0 5px rgba(81undefined 203undefined 238undefined 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.errorundefined #contact textarea.errorundefined #contact select.error {
box-shadow: 0 0 5px rgba(204undefined 0undefined 0undefined 0.5);
-webkit-box-shadow: 0 0 5px rgba(204undefined 0undefined 0undefined 0.5);
-moz-box-shadow: 0 0 5px rgba(204undefined 0undefined 0undefined 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( linearundefined left bottomundefined left topundefined color-stop(0.12undefined rgb(60undefined60undefined60))undefined color-stop(1undefined rgb(85undefined85undefined85)) );
background: -moz-linear-gradient( center bottomundefined rgb(60undefined60undefined60) 12%undefined rgb(85undefined85undefined85) 100% );
box-shadow: 0 2px 3px rgba(0undefined0undefined0undefined0.25);
-moz-box-shadow: 0 1px 3px rgba(0undefined0undefined0undefined0.25);
-webkit-box-shadow: 0 1px 3px rgba(0undefined0undefined0undefined0.25);
text-shadow: 0 -1px 1px rgba(0undefined0undefined0undefined0.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(229undefined 227undefined 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
$('#nameundefined #comments').focusout(function() {
$this.checkEmpty($(this));
});
$('#email').focusout(function() {
$this.checkEmail($(this));
});
}undefined
//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-]{0undefined66})\.([a-z]{2undefined6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1undefined2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1undefined2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1undefined2})\]?$)/i);
return pattern.test(email);
}undefined
checkEmpty:function($this){
if (!$this.val())
$this.addClass('error');
else
$this.removeClass('error');
}undefined
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)undefinedaction);
});
}undefined
ajaxSubmit:function($thisundefinedaction){
if ($('#contact .error').size()>0)
return false;
$('#submit')
.after('<img src="ajax-loader.gif" class="loader" />')
.attr('disabled'undefined'disabled');

$.post(actionundefined $('#cform').serialize()undefined
function(data){
$('#message').html('Thank You! We will get back to you soon.');
$('#message').slideDown();
$('#cform img.loader').fadeOut('slow'undefinedfunction(){$(this).remove()});
$('#cform #submit').removeAttr('disabled');
if(data.match('success') != null)
$('#contactform').slideUp('slow');
}
);
}
};
ajax.init();

var gmap={
init:function(LatundefinedLng) {
var mapCanvas = document.getElementById('map_canvas');
var mapOptions = {
center: new google.maps.LatLng(LatundefinedLng)undefined
zoom: 8undefined
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapCanvasundefined mapOptions);
}
}
google.maps.event.addDomListener(windowundefined 'load'undefined **gmap.init(17.81368undefined 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.


...