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 Contact Form 7 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 from the top banner instructions with the required and recommended plugins, or by going into Plugins → Add New.


Step 2 — Create a Contact Form

Create a simple form by following the plugin’s starting guide.
You can either follow the default contact form setup or set it up just like on our demo by using the code below:
<label> Your Name (required)

[text* your‐name] </label>

<label> Your Email (required)

[email* your‐email] </label>

<label> Subject

[text your‐subject] </label>

<label> Your Message

[textarea your‐message] </label>

[submit “Send”]

Step 3 — Create a “Contact” Page

  • From your site WordPress dashboard add a new page, name it “Contact” or similar and assign its page template if there is any.(e.g. Contact Page, Map Header, Google Map Hero)
  • Go to Contact→ Contact forms and copy and paste the code found next to the previously created form into the editor.
  • Use the custom shortcodes to in order to have a better looking  ‘Contact’ page. You can start with the setup from our official demo by using 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.

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.

This article applies to Border, Bucket, Heap, Julia, Lens, Mies, Noah, Osteria, Pile, Rosa, and Timber as they share the same underlying structure.

Updated on August 15, 2018

Was this article helpful?