contact.html

---
title: Contact
heading: Get in touch today
description: We'd love to help you improve your sales.

map:
  latitude: -45.8787605
  longitude: 170.5027976
  address: "1 George Street, Dunedin, New Zealand"
  zoom: 13
---

<div class="map" id="map"></div>

<div class="contact-box">
  <form
    action="{{ site.baseurl }}/contact-success/"
    method="post"
    class="contact-form"
  >
    <input type="hidden" name="_to" value="support@example.com" />
    <input type="text" name="_gotcha" style="display: none" />

    <label for="name">Full Name</label>
    <input type="text" name="name" id="name" placeholder="Enter your name..." />

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

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

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

  <div class="contact-details">
    <h3 class="editable">Address</h3>
    <address>
      <a
        target="_blank"
        href="https://www.google.com/maps/place/{{ page.map.address | url_encode }}"
        >{{ page.map.address | replace: ", ", ", <br />" }}</a
      >
    </address>

    <h3 class="editable">Email</h3>
    <p><a href="mailto:support@example.com">support@example.com</a></p>
  </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": "all",
  			"elementType": "labels.text.fill",
  			"stylers": [{
  				"saturation": 36
  			}, {
  				"color": "#000000"
  			}, {
  				"lightness": 40
  			}]
  		}, {
  			"featureType": "all",
  			"elementType": "labels.text.stroke",
  			"stylers": [{
  				"visibility": "on"
  			}, {
  				"color": "#000000"
  			}, {
  				"lightness": 16
  			}]
  		}, {
  			"featureType": "all",
  			"elementType": "labels.icon",
  			"stylers": [{
  				"visibility": "off"
  			}]
  		}, {
  			"featureType": "administrative",
  			"elementType": "geometry.fill",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 20
  			}]
  		}, {
  			"featureType": "administrative",
  			"elementType": "geometry.stroke",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 17
  			}, {
  				"weight": 1.2
  			}]
  		}, {
  			"featureType": "landscape",
  			"elementType": "geometry",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 20
  			}]
  		}, {
  			"featureType": "poi",
  			"elementType": "geometry",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 21
  			}]
  		}, {
  			"featureType": "road.highway",
  			"elementType": "geometry.fill",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 17
  			}]
  		}, {
  			"featureType": "road.highway",
  			"elementType": "geometry.stroke",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 29
  			}, {
  				"weight": 0.2
  			}]
  		}, {
  			"featureType": "road.arterial",
  			"elementType": "geometry",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 18
  			}]
  		}, {
  			"featureType": "road.local",
  			"elementType": "geometry",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 16
  			}]
  		}, {
  			"featureType": "transit",
  			"elementType": "geometry",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 19
  			}]
  		}, {
  			"featureType": "water",
  			"elementType": "geometry",
  			"stylers": [{
  				"color": "#000000"
  			}, {
  				"lightness": 17
  			}]
  		}],
  		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>