27
Apr
Contact Form
0 Comments » (add your own)
A very simple contact form where the sender can click the map to select a location. The lat/lng of the location are included in the email sent to the site owner.
A very simple contact form where the sender can click the map to select a location. The latitude and longitude of the location are included in the email sent to the site owner.
Place the following JavaScript in the head of your page
<script type="text/JavaScript">
function initialize() {
if (GBrowserIsCompatible()) {
var myMarker;
var mypoint;
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
GEvent.addListener(map,"click", function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else if (point) {
map.panTo(point);
mymarker = new GMarker(point);
map.addOverlay(mymarker);
}
});
GEvent.addListener(map,"click", function(overlay, latlng) {
if (latlng) {
document.getElementById("location").value=latlng.lat()+","+latlng.lng();
}
});
}
}
</script>
And here is the contact form:
<body onload="initialize()" onunload="GUnload()">
<div>
<txp:zem_contact to="matt@photographdaddy.com"
label="Feel free to contact me!">
<txp:zem_contact_text label="Name" break="" /><br />
<txp:zem_contact_email break="" /><br />
<txp:zem_contact_textarea label="Message" break="" /><br />
<div id="map" style="width: 500px; height: 300px"></div>
<div style="visibility: hidden">
<txp:zem_contact_text label="location" /></div>
<div id="map" style="width: 585px; height: 500px;"></div>
<txp:zem_contact_submit label="Send" />
</txp:zem_contact>
</div>
</body>
Requires zem_contact_reborn
jump to the comment form ↓