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.