Creating an Impressive Contact Us Page

With so many contact us pages on the web, it's important to have a contact page that stands out.

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: #000">Contact us today to discuss how Big Data can help your company!</p>
        </div>
      </div>
      <form name="contactForm" id="contactForm" method="POST" action="">
        <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>
      </form>
    </div>
    <div class="col-md-5 contact-right-info">
      <h2>ORLANDO OFFICE</h2>
      <p style="color: #000000">123 Open Door Road Suite 1200<br />
        Orlando, FL 30030<br />
        <a href="tel:4078981961">407.555.1961</a>
      </p>
      <h2>EMAIL ADDRESS</h2>
      <a href="mailto:info@webcorpco.com">info@webcorpco.com</a>
      <h2>SUPPORT</h2>
      <a href="tel:8005551656">800.555.1656</a><br />
      <a href="mailto:support@webcorpco.com">support@webcorpco.com</a>
    </div>
  </div>
</div>
<!-- contact-map -->
<div class="container">
  <div class="map-overlay">
    <h2>Changing the digital landscape one client at a time.</h2>
    <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>

Don't forget to include an appropriate processing script or "action" for your form.

Step 2 - Add the CSS below to your website's stylesheet

contact-page.css

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.541638, -81.368941);
  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>

Download from Github

Share on Facebook Tweet It

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev