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

On the contact page from the demo, we’re using the Contact Form 7 plugin—it’s one of the best form builders we’ve tested so far. You can install this plugin by going into Plugins → Add New → search for “Contact Form 7.” Once you find it, click on Install and then on Activate.

Step 2 — Create a Contact Form

You can create a simple form by following the plugin’s starting guide. Alternatively, set it up just like on our demo by copy-pasting the code below:

<div class=“form-connected”> <div class=“grid pixcode–grid”>
<div class=“grid__item six-twelfths palm-one-whole”>
[text* your-name placeholder “Your name..”]
</div> <div class=“grid__item six-twelfths palm-one-whole”>
[text* last-name placeholder “Phone..”] </div>
</div>
[email* your-email placeholder “Email..”]
[textarea your-message x4 placeholder “Your Message..”] </div>
<p style=“text-align:right”>[submit “Send”]</p>

To add the code above, go to your WordPress dashboard and click on Contact → open the default contact form created by the plugin (usually named “Contact form 1”) → paste the code in the Form area → hit Save, and you’re done here. This is the place from where you can also change the form title.

Step 3 — Add the form to the Contact page

From your site WordPress dashboard, add a new page, name it “Contact” or similar, and assign its page template if there are any (e.g., Contact Page, Map Header, Google Map Hero);
Go to Contact → Contact forms and copy and paste the shortcode found next to the previously created form (see print screen);
Paste the shortcode on your new page. Alternatively, if you want to start with the setup from our official demo, copy and paste the code below:

[row cols_nr="2"]
[col size="4"] Insert content here. [/col]
[col size="8"] <h3>Want to work with me?</h3>
[contact-form-7 id="4" title="The contact form"] 
[/col]
[/row]

Note: Replace id=“4” with your own contact form ID. You can find the ID in the shortcode area from Contact → Contact forms (see print screen).

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 → General, and copy and paste it in the Google Maps API Key field;
Click on Publish, and you’re done here.

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 Google Map Hero;
Copy your location URL right from google.com/maps (the full URL from your browser tab) and paste it in the Location URL field (see print screen), write down the location Name, 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.

The video below shows you how easy it is to set up the contact page from top to toe. We’re using Contact Form 7 and our awesome PixCodes plugin.

Updated on February 16, 2022