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.