Skip to Content

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

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


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

Step 5 - Add the following includes to the header of your Contact Us page to connect to Bootstrap and the Google Maps API

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