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:
<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>
[email* your‐email placeholder “Email..”]
[textarea your‐message x4 placeholder “Your Message..”] </div>
<p style=“text-align:right”>[submit “Send”]</p>
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.
In this video we show you how easy it is to setup the contact page from top to toe. We’re using Contact Form 7 and our awesome PixCodes plugin.
Here is a list of links to the begging of every children page from the above video:
Contact — Intro & Contact
Contact — Map
Contact — Offices