contact.html

---
title: Contact
description: Get in touch
email: fur@example.com
hero: Get in touch
map:
  latitude: -45.873511
  longitude: 170.503704
  address: 'Dunedin, New Zealand'
  zoom: 13
---

<div class="contact-box">
	<form action="{{ site.baseurl }}/contact-success/" method="post" class="contact-form">
		<h3>Send us a message</h3>
		<label for="name">Full Name</label>
		<input type="text" name="name" id="name" placeholder="Enter your name..." autofocus>

		<label for="email">Email Address</label>
		<input type="email" name="email" id="email" placeholder="Enter your email..." required inputmode="email">

		<label for="message">Message</label>
		<textarea name="message" id="message" placeholder="Enter your message..."></textarea>

		<input type="hidden" name="_to" value="{{ page.email }}">
		<input type="text" name="_gotcha" style="display: none;">

		<input type="submit" value="Send Message">
	</form>

	<div class="contact-details">
		<div class="map" id="map"></div>
</div>

<script type="text/javascript">
	window.mapData = {{ page.map | jsonify }};

	function initMap() {
		var myOptions = {
			scrollwheel: false,
			draggable: false,
			panControl: false,
			disableDefaultUI: true,
			styles: [{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#fcfcfc"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#fcfcfc"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#eeeeee"}]},{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#dddddd"}]}],
			zoom: window.mapData.zoom,
			maxZoom: window.mapData.zoom,
			minZoom: window.mapData.zoom,
			center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map"), myOptions);
		marker = new google.maps.Marker({
			map: map,
			position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude)
		});

		google.maps.event.addDomListener(window, "resize", function () {
			map.setCenter(myOptions.center);
		});
	}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ site.google_maps_javascript_api_key }}&amp;callback=initMap"></script>