-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
135 lines (125 loc) · 4.91 KB
/
contact.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<h1 class="caption">CONTACT</h1>
<div class="divider"></div>
<img src="images/contact.jpg" width="600" height="350" />
<div class="c1of2">
<h4>GET IN TOUCH</h4>
<div class="divider" style="height:13px"></div>
Pellentesque eu ultrices diam. Duis odio justo, sodales ac pretium quis, scelerisque vulputate massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris eleifend, enim in accumsan consectetur, lectus augue vulputate sapien, nec lacinia velit est feugiat felis. Integer tortor lacus, commodo et lacinia id, volutpat eget odio. Duis auctor, arcu id consequat suscipit, erat dui molestie ipsum, tempor tincidunt lacus tellus ac elit. Ut dapibus elementum magna, fermentum elementum tellus tempus nec. Fusce sit amet dui urna, ac scelerisque massa. Aenean placerat, erat eget commodo euismod, est turpis feugiat nisl, tristique sagittis nisl nulla sed.
</div>
<div class="c1of2_end">
<!-- Google Map -->
<script type="text/javascript">
$('#contentBox').ready(function(){
var latlng = new google.maps.LatLng(41.048689, 29.028646); // coordinats
var myOptions = {
zoom: 15, // zoom level
disableDefaultUI: false, // ui enable, disable
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // map type
};
var mapObj = new google.maps.Map(document.getElementById("mapContact"), myOptions);
var marker = new google.maps.Marker({map: mapObj,
position: mapObj.getCenter()
});
var infowindowjCSIb = new google.maps.InfoWindow();
infowindowjCSIb.setContent('We are here'); // InfoBox Message
google.maps.event.addListener(marker, 'click', function() {
infowindowjCSIb.open(mapObj, marker);
});
});
</script>
<!-- map's width and height are adjustable -->
<div id="mapContact" style="width:100%; height:250px"></div>
</div>
<div class="c1of2">
<h4>CONTACT FORM</h4>
<hr class="seperatorBold" style="margin-top:17px"/>
<div class="divider" style="height:10px"></div>
<!-- BEGIN: Contact Form -->
<div class="contactForm dform">
<form>
<p>
<label for="name">NAME</label>
<input type="hidden" id="name_title" name="title[]" value="Name" />
<div class="dFormInput">
<input class="required" id="name" type="text" name="value[]" />
</div>
</p>
<p>
<label for="email">E-MAIL</label>
<input type="hidden" id="email_title" name="title[]" value="E-Mail" />
<div class="dFormInput">
<input class="required email" id="email" type="text" name="value[]" />
</div>
</p>
<p>
<label for="description">DESCRIPTION</label>
<input type="hidden" id="description_title" name="title[]" value="Description" />
<div class="dFormInput">
<textarea class="required" id="description" name="value[]" ></textarea>
</div>
</p>
<p style="padding:0px;">
<label for="submit"> </label>
<div class="form_input">
<a class="nolink submitButton" href="javascript:void(0);" onclick="javascript:$('.contactForm form').submit();">SUBMIT</a>
</div>
</p>
</form>
</div>
<!-- END: Contact Form -->
<script type="text/javascript">
$('#contentBox').ready(function(){
$(".contactForm form").validate({
errorPlacement: function(error, element) {
error.appendTo(element.parent("div").next() );
}
});
$(".contactForm form").submit(function(){
if($(".contactForm form").valid())
{
var formdata = $(".contactForm form").serialize();
$(".contactForm form").slideUp();
$(".contactForm").append("<div class=\"form_message\">Please wait...</div>").find("div.form_message").slideDown("slow");
$.post("form-sender.php", formdata, function(data){
console.log('contact return; ',data);
data = $.parseJSON(data);
if(data.status=="OK")
{
$(".contactForm .form_message").html("Your message has been send successfuly.");
}
else
{
alert(data.ERR);
$(".contactForm form").slideDown();
$(".contactForm .form_message").remove();
}
});
}else
alert("Please fill all required fields.");
return false;
});
});
</script>
</div>
<div class="c1of2_end">
<h4>CONTACT INFORMATIONS</h4>
<hr class="seperatorBold" style="margin-top:17px"/>
<div class="divider" style="height:3px"></div>
<!-- BEGIN: Content Informations -->
<div class="list_two">
<div class="item_two_one">ADDRESS</div>
<div class="item_two_two">670 Street, 167th Road, London</div>
<div class="item_two_one">TEL</div>
<div class="item_two_two">+44 (020) 3177799</div>
<div class="item_two_one">FAX</div>
<div class="item_two_two">+44 (020) 3177798</div>
<div class="item_two_one">WEBSITE</div>
<div class="item_two_two"><a class="nolink" href="http://www.yoursite.com" target="_blank">http://www.yoursite.com</a></div>
<div class="item_two_one">EMAIL</div>
<div class="item_two_two"><a class="nolink" href="mailto:johndoe@yoursite.com" >johndoe@yoursite.com</a></div>
</div>
<!-- END: Content Informations -->
</div>
<hr class="seperator" />
<div class="clearfix"></div>