Solodev
Solodev aims to help the world build better websites through free code tutorials at www.solodev.com/blog/
Creating an Impressive Contact Us Page
In this tutorial we will teach you how to build a contact us page on your website that converts. With so many contact us pages on the web, it’s hard to stand out and in such a competitive online landscape, standing out is crucial. Sometimes it’s the small things, the details, that differentiate one contact us page from another. In this case, integrating with Google Maps and providing a location-based contact us page is that difference and will impress your website visitors rather than bore them.
Below is the HTML, JavaScript, and CSS you need to build an impressive contact us page on your website that converts. Enjoy.
Step 1
Add the HTML below to the page where you’d like to add your Contact Us Page
<div class="container paddingContact-container">
<div class="row">
<div class="col-md-12">
<h1 class="white">
Let's Get Started!
</h1>
<p>
Contact us today to discuss your next online project.
</p>
</div>
</div>
</div>
<div class="parallax texture" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/hero-slider/slide1.jpg);">
</div>
<!-- contact-form -->
<div class="container form">
<div class="row">
<div class="col-md-7">
<div class="row">
<div class="form-group col-md-12">
<h2>Tell us About Yourself</h2>
<p style="color: #000000">Contact us today to discuss how Big Data can help your company!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control-group">
<label>First Name</label>
<input type="text" class="demo-default form-control" placeholder="First Name">
</div>
<div class="control-group">
<label>Last Name</label>
<input type="text" class="demo-default form-control" placeholder="Last Name">
</div>
<div class="control-group">
<label>Company</label>
<input type="text" class="demo-default form-control" placeholder="Company">
</div>
<div class="control-group">
<label>Phone #</label>
<input type="text" class="demo-default form-control" placeholder="Phone #">
</div>
<div class="control-group">
<label>Email</label>
<input type="text" class="demo-default form-control" placeholder="yourname@domain.com">
</div>
<div class="control-group">
<label for="select-beast">I'm Interested In:</label>
<select id="select-beast" class="demo-default" placeholder="Select a service...">
<option value="">Select a service...</option>
<option value="4">Digital Marketing</option>
<option value="1">Social Media</option>
<option value="3">E-Commerce</option>
<option value="5">Mobile Advertising</option>
</select>
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-12 text-center">
<input type="submit" class="btn btn-primary" value="Contact Us">
</div>
</div>
</div>
<div class="col-md-5 contact-right-info">
<h3>ORLANDO OFFICE</h3>
<p style="color: #000000">123 Open Door Road Suite 1200<br />
Orlando, FL 30030<br />
<a href="tel:4078981961">407.555.1961</a>
</p>
<h3>EMAIL ADDRESS</h3>
<a href="info@webcorpco.com">info@webcorpco.com</a>
<h3>SUPPORT</h3>
<a href="tel:8005551656">800.555.1656</a><br />
<a href="support@webcorpco.com">support@webcorpco.com</a>
</div>
</div>
</div>
<!-- contact-map -->
<div class="container">
<div class="map-overlay">
<h3>Changing the digital landscape one client at a time.</h3>
<p>WebCorpCo specializes in taking your businesses data and turning it into a wide range of insights that help drive intelligent business decisions.</p>
<a href="https://www.google.com/maps/place/800+N+Magnolia+Ave,+Orlando,+FL+32803/@28.5556405,-81.3775403,17z/data=!3m1!4b1!4m2!3m1!1s0x88e77af15a1459a5:0xa114b20cc1cdb19d" style="color: #d2282e;" target="_blank">Directions to WebCorpCo</a>
</div>
</div>
<div class="map-area">
<div id="map-canvas" style="height: 750px; width: 100%;">
</div>
</div>
Step 2
Add the CSS below to your website’s stylesheet
.paddingContact-container {
padding: 68px 15px 72px !important;
}
.container h1.white, .company-heading h1 {
font-family: "proxima-nova", sans-serif;
font-weight: 100 !important;
text-transform: capitalize;
font-size: 65px;
margin-bottom: 20px;
}
.control-group {
margin-bottom: 15px;
}
.form {
margin-top: 25px;
margin-bottom: 25px;
}
.white {
color: #fff;
}
.container p {
font-style: normal !important;
color: #fff;
font-size: 20px;
letter-spacing: 0px;
}
.theme-selector {
display: none;
}
.contact-page-form h3 {
font-size: 26px;
font-weight: bold;
text-transform: capitalize;
}
.parallax {
background-attachment: inherit !important;
}
.parallax {
background-attachment: inherit !important;
background-repeat: repeat;
background-size: cover;
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
z-index: -10;
height: 300px
}
h3 {
font-size: 20px;
margin: 35px 0px 25px;
font-weight: 800;
color: #3d3d3d;
text-transform: uppercase;
}
.map-overlay h3 {
color: #fff;
border-bottom: 2px solid #d2282e;
padding-bottom: 15px;
}
.map-overlay {
background: #000;
-webkit-box-shadow: 0px 1px 10px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 1px 10px rgba(50, 50, 50, 0.75);
box-shadow: 0px 1px 10px rgba(50, 50, 50, 0.75);
width: 500px;
height: 320px;
position: relative;
float: left;
z-index: 300;
left: 0px;
top: 675px;
padding: 25px;
margin-top: -550px;
border: 3px solid #fff;
}
.marginBottom40 {
margin-bottom: 40px;
}
.map-overlay p {
color: #fff;
}
.btn-primary {
width: 100%;
}
.contact-right-info {
margin-bottom: 25px;
}
@media only screen and (max-width: 991px) {
.contact-right-info {
text-align: center;
}
}
@media only screen and (min-width: 992px) {
.contact-right-info {
text-align: left;
}
.map-overlay {
left: 0px;
}
}Step 3
Register your business with Google to get a Free Google Maps API Key
Visit this link and register your business to get a necessary API key to include our custom Google Maps integration on your Contact Us Web Page
Step 4
Modify the JavaScript below (business address, API key) and reference the JavaScript in your contact us page
$('#select-beast').selectize({
create: true,
sortField: {
field: 'text',
direction: 'asc'
},
dropdownParent: 'body'
});
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(28.9913522, -85.4145614),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
navigationControl: false,
mapTypeControl: false,
scaleControl: false
};
var styles = [
{
stylers: [
{saturation: -100}
]
}
];
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapType = new google.maps.StyledMapType(styles, {name: "Grayscale"});
map.mapTypes.set('grayMap', mapType);
map.setMapTypeId('grayMap');
var myLatlng = new google.maps.LatLng(28.5556405, -81.3775403);
var imgWebCorpCo = {
url: '/_resources/images/content/marker.png',
size: new google.maps.Size(244, 182),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(24, 54)
};
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'WebCorpCo',
icon: imgWebCorpCo
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
//script.src = 'http://maps.google.com/maps/api/js?sensor=false';
script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAvNegdMhrApxE5o7jlPEHGS-gk03rxgUc&sensor=false&callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;Step 5
Add the following includes to the header of your Contact Us page to connect to Bootstrap and the Google Maps API
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/map.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/marker.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/onion.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/stats.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/25/7/controls.js"></script>
<link href="https://www.solodev.com/assets/selectize/css/normalize.css">
<link href="https://www.solodev.com/assets/selectize/css/selectize.default.css">
<script src="https://www.solodev.com/assets/selectize/js/jquery.js"></script>
<script src="https://www.solodev.com/assets/selectize/js/selectize.js"></script>
<script src="https://www.solodev.com/assets/selectize/js/index.js"></script>
Originally posted here on the Solodev Blog
To learn about the power of the Solodev Web Design Platform visit solodev.com/features/!
