SONEX Documentation

Contact Page

Body of this page must have id #contact-page. This page has next layout: page title, map, contact information and feedback form.

Map

This template uses Google Map via API. Element which is responsible for map is #google-map. First, it's empty, but when user load page, special script append map inside this element.

function initMap() {
		var mapOptions = {
			scrollwheel: false,
			zoom: 15,
			disableDefaultUI: true,
			center: new google.maps.LatLng(48.507664, 32.268486),
			styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
		};
		var mapElement = document.getElementById('google-map');
		var map = new google.maps.Map(mapElement, mapOptions);
		var marker = new google.maps.Marker({
			position: new google.maps.LatLng(48.507664, 32.268486),
			map: map,
			icon: 'img/map-marker.png',
			title: 'Sonex'
		});
	}

To change position of map you should change latitude and longitude of your point.

position: new google.maps.LatLng(48.507664, 32.268486)

Also you can change style of map. I use Snazzy Maps and recommend it for you. For more information about Google Map API see this link.

Contact Information

This part has next layout: paragraphs and columns with information about offices.

<div class="offices-information">
	<div class="row">
		<div class="col-md-8">
			<h2>Offices</h2>
			<p class="lead">We have four offices around Ukraine. Each of them is located in center of city. So, you don't need to search us, we are always close to you.</p>
			<p>Cras tincidunt, sapien at pretium fermentum, enim tellus elementum mi, sed dignissim turpis neque at elit. Sed ut aliquam ipsum, vitae aliquet velit.</p>
		</div>
	</div>
</div>

<div class="offices-list">
	<div class="row">
		<div class="col-md-3">
			<div class="office-block">
				<h4>Kirovograd</h4>
				<p>
					1570 Kildeer Drive
					<br>Frankfort, OH 45628
					<br><a class="phone" href="tel:+30661234567">+30661234567</a>
					<br><a href="#">kr@sonex.com</a>
				</p>
			</div>
		</div>
		<div class="col-md-3">
			<div class="office-block">
				<h4>Kyiv</h4>
				<p>
					1144 Ben Street
					<br>East Lansing, MI 48823
					<br><a class="phone" href="tel:+30957654321">+30957654321</a>
					<br><a href="#">kyiv@sonex.com</a>
				</p>
			</div>
		</div>
		<div class="col-md-3">
			<div class="office-block">
				<h4>Odessa</h4>
				<p>
					2607 Locust Court
					<br>Artesia, CA 90701
					<br><a class="phone" href="tel:+30507842168">+30507842168</a>
					<br><a href="#">od@sonex.com</a>
				</p>
			</div>
		</div>
		<div class="col-md-3">
			<div class="office-block">
				<h4>Lviv</h4>
				<p>
					722 Spruce Drive
					<br>Bridgeville, PA 15017
					<br><a class="phone" href="tel:+30975413287">+30975413287</a>
					<br><a href="#">lviv@sonex.com</a>
				</p>
			</div>
		</div>
	</div>
</div>

Feedback Form

This part contains title and form.

<form>
	<div class="row">
		<div class="col-sm-6">
			<input id="contact-name" type="text" name="contact-name" placeholder="Name">
		</div>
		<div class="col-sm-6">
			<input id="contact-email" type="text" name="contact-email" placeholder="Email">
		</div>
	</div>
	<input id="contact-subject" type="text" name="contact-subject" placeholder="Subject">
	<textarea id="contact-message" name="contact-message" placeholder="Message"></textarea><a class="btn" id="submit" href="#">Send Message</a>
	<div id="message">
		<div class="error"></div>
		<div class="success"></div>
	</div>
</form>

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!