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.

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

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


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

Author

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

We use cookies to provide and improve our services. By using our site, you consent to cookies.

Close Button

Try Solodev for Free!

By clicking "Submit" you agree to Solodev’s Terms of Service.