Creating the Contact Page

The Contact page is one of the most important pages 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 a contact form plugin

We recommend 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 by clicking on the Pixelgrade tab → scroll to the Manage Plugins section, and click on Install next to the “Contact Form” area. 

Alternatively, you can install it by going into Plugins → Add New → search for “WPForms.” Once you find it, click on Install and then on Activate. You can opt anytime for the WPForms PRO version for more addons and options.

Step 2 — Create a Contact Form

You can create a simple form by following these steps:

• Go to the WPForms tab that shows up after you install the plugin and click on the Add New button;
• Enter a name for your form and select a template. We recommend to use the Simple Contact Form template;
• Now that you have selected a template, the Form Builder will take you to the Fields screen. Here you can customize the form fields, buttons, and options. Learn more about how to use these settings from this starting guide;
• Once your form is done, click on Save from the top right corner. 

Here’s a helpful video:

Step 3 — Add the form to the Contact page

• Copy the shortcode generated by WPForms. You should find it by going to WPForms → All Forms → next to your form name you should see a Shortcode area (see print screen);
• From your WordPress Dashboard, create a new page and name it “Contact” or similar;
• Paste the form shortcode into the text editor.

Step 4 — 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 learn how to do that by reading this article.

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 → Theme Options → General, and copy & paste it in the Google Maps API Key field;
• Click on Publish and move to the next phase.

To add a map on your page, here’s what you need to accomplish:

• Create a new page and call it ”Map.” In the right panel, you will see the Page Attributes section. Here you need to select the Contact page as Parrent and change the template to Location Map;
• Copy your location URL right from google.com/maps (the full URL from your browser tab) and paste it in the Google Maps URL field (see print screen), 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’re done.