Creating the Contact Page

The Contact page is one the most important ones on your website. In the end, you invest time, energy, and money to build a digital reputation because you want to engage with people and promote your work. That’s why creating such a page is an important task that you should consider. In this article, we walk you through the steps you need to follow to create a consistent Contact page.


Step 1 — Install WPForms Lite plugin

On the contact page from the demo, we’re using the WPForms Lite plugin — it’s one of the best  drag-and-drop form builders we’ve tested so far. You can install this plugin from the top banner instructions with the required and recommended plugins, or by going into Plugins → Add New. You can opt anytime for WPForms PRO version, for more addons and options.

Step 2 — Create a Contact Form

You can create a simple form by following the plugin’s starting guide.

Note that if you want to place two or three fields in a row, you need to use the “half” or “third” CSS Class, which is located in the Advanced Options section (see visual explanation).

Step 3 — Create a “Contact” Page

  • From your site WordPress dashboard add a new page and name it “Contact” or similar.
  • Insert the form shortcode into the text editor through Add Form button.

Step 4 — How to Add a Map on the Contact page?

For a while now, Google has made it a little harder for people to use custom Google Maps on their websites by requiring an API key for each website. So first you need to get yourself such a key. You can do that here.

Now that you have the key, follow these steps to save it on your site:

  • Log in into your WordPress Dashboard;
  • Go to Appearance → Customize → General, and copy&paste it in the Google Maps API Key field;
    Click on Save & Publish and move to the next phase.

Moreover, you can easily create a map to let your visitors know where your office is located. To do so, here’s what you need to accomplish:

  • Copy-paste the location URL, write down the city, and select the height you want your map to be displayed (Half/Two Thirds/Full Height)
  • Click on Update to save the changes, and you can move further.
Updated on August 25, 2020

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.