HTML5 AJAX Responsive Contact Form With Google Maps

In this post we will discuss how to create a HTML5 AJAX Responsive 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.

Index.Html

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="utf-8">
05    <title>HTML5 AJAX Responsive Contact Form with Google Maps</title>
06    <meta name="viewport" content="width=device-width, initial-scale=1.0">
07    <meta name="description" content="">
08    <meta name="author" content="">
09    <!-- LOAD CSS FILES -->
10    <link href="css/main.css" rel="stylesheet" type="text/css">
11     
12    <!-- LOAD JS FILES -->
13    <script src="js/jquery.min.js"></script>
14    <script src="js/bootstrap.min.js"></script>
15    <script src="js/jquery.isotope.min.js"></script>
16    <script src="js/contact.js"></script>
17     
18</head>
19<body>
20    <!-- subheader begin -->
21    <div id="subheader">
22        <div class="container">
23          <div class="row">
24            <div class="span12">
25                  <br />
26                <h1 style="padding:10px;text-align:center">HTML5 AJAX Responsive Contact Form with Google Maps</h1>
27                <br /><br />
28            </div>
29          </div>
30        </div>
31    </div>
32    <!-- subheader close --> 
33         
34   <div id="map-container">
35    <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Qutub+Minar+Delhi,+Seth+Sarai,+Mehrauli,+New+Delhi,+Delhi,+India&amp;aq=3&amp;oq=quta&amp;sll=37.0625,-95.677068&amp;sspn=41.95363,86.572266&amp;ie=UTF8&amp;hq=&amp;hnear=Qutub+Minar,+Kalu+Ram+Rd,+Seth+Sarai,+Mehrauli,+New+Delhi,+South+Delhi,+Delhi+110016,+India&amp;t=m&amp;z=14&amp;ll=28.526407,77.187028&amp;output=embed"></iframe>
36   </div>
37     
38    <!-- content begin -->
39    <div id="content" style="padding:10px">
40        <div class="container">
41            <div class="row">
42                <div class="span8">
43                    <h4>Get in touch with us now!</h4>
44Feel free to contact us by contact to get more information.<br/><br/>
45                    <div class="contact_form_holder">
46              <form id="contact" class="row" name="form1" method="post" action="">
47               
48                <div class="span2">
49                <label>Name <span class="req">*</span></label>
50                <input type="text" class="full" name="name" id="name"/>
51                <div id="error_name" class="error">Please check your name</div>
52                </div>
53 
54                <div class="span2">
55                <label>Phone <span class="req">*</span></label>
56                <input type="text" class="full" name="phone" id="phone"/>
57                <div id="error_phone" class="error">Please check your phone</div>
58                </div>
59                 
60                <div class="span4">
61                <label>Email <span class="req">*</span></label>
62                <input type="text" class="full" name="email" id="email"/>
63                <div id="error_email" class="error">Please check your email</div> 
64                </div>
65                 
66                <div class="span8">
67                <label>Message <span class="req">*</span></label>
68                <textarea cols="8" rows="10" name="message" id="message" class="full"></textarea>
69                <div id="error_message" class="error">Please check your message</div>
70                <div id="mail_success" class="success"> Thank you. Your message has been sent.</div>
71<div id="mail_failed" class="error">Error, email not sent</div>
72 
73<p id="btnsubmit"><input type="submit" id="send" value="Send" class="btn btn-large"/></p>               
74                </div>              
75              </form>
76            </div>
77             
78                </div> 
79                     
80              <div id="sidebar" class="span4">
81                     
82<div class="widget latest_news">
83                        <h4 class="title">Reach Us</h4>
84 
85                    </div>
86               
87          <div class="widget widget-text">
88                    <h4 class="title">Other Details:</h4>
89                    <strong>
90                        </strong>
91          </div>
92              </div>
93        </div>
94</div>
95</div>
96</body>
97</html>

Contact.js

01$(document).ready(function(){
02  $("#send").click(function(){
03      var name = $("#name").val();
04      var phone = $("#phone").val();
05    var email  = $("#email").val();
06    var message  = $("#message").val();
07 
08    var error = false;
09      
10    if (name.length == 0) {
11        var error = true;
12        $("#error_name").fadeIn(500);
13    }
14    else {
15        $("#error_name").fadeOut(500);
16    }
17 
18    if (phone.length == 0) {
19        var error = true;
20        $("#error_phone").fadeIn(500);
21    }
22    else {
23        $("#error_phone").fadeOut(500);
24    }
25 
26     if(email.length == 0 || email.indexOf("@") == "-1" || email.indexOf(".") == "-1"){
27       var error = true;
28       $("#error_email").fadeIn(500);
29     }
30     else {
31       $("#error_email").fadeOut(500);
32     }
33      
34     if(message.length == 0){
35        var error = true;
36        $("#error_message").fadeIn(500);
37     }else{
38        $("#error_message").fadeOut(500);
39     }
40      
41     if(error == false){
42       $("#send").attr({"disabled" : "true", "value" : "Loading..." });
43         
44       $.ajax({
45         type: "POST",
46         url : "send.php",    
47         data: "name=" + name + "&email=" + email + "&subject=" + "You Got Email" + "&message=" + message,
48         success: function(data){    
49          if(data == 'success'){
50            $("#btnsubmit").remove();
51            $("#mail_success").fadeIn(500);
52          }else{
53            $("#mail_failed").html(data).fadeIn(500);
54            $("#send").removeAttr("disabled").attr("value", "send");
55          }     
56         }  
57       });  
58    }
59        return false;                      
60  });    
61});

Send.php

01<?php
02session_start();
03 
04    $email_to = "info@hightechnology.in"; // change with your email
05    $name     = $_POST['name'];
06    $phone    = $_POST['phone'];
07    $email    = $_POST['email'];
08    $subject   = $_POST['subject'];
09    $message    = $_POST['message'];
10     
11    $headers  = "From: $email\r\n";
12    $headers .= "Reply-To: $email\r\n";
13     
14    if(mail($email_to, $subject, $message, $headers)){
15        echo "success";       
16    } 
17    else{
18        echo "failed";     
19    }  
20?>