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 — How to Start?
Here’s what you need to do to start with the right foot:
- Log into the WordPress Dashboard
- Go to Pages → click on Add new, and write down a relevant name for this one (Contact should be just fine)
- Click on the funky P icon to add a shortcode, such as the Columns (you can choose up to six columns, but we highly recommend it to stick with three), and click on Insert
- Now you simply have to insert content for each of these columns by simply editing that area (for instance, if you plan to include your social media accounts, you just need to click again on the P symbol, click on Icon and select the background shape, the icon size, and copy-paste the right link).
You can also play around with the options from the Description area, under the Hero area settings. It is a good place to write down a welcoming message on your Contact page, and invite people to reach you.
Step 2 — How to Add a Map on the Contact page?
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:
- Go to Pages → click on Add new, and give it a name
- On the right side, under Page Attributes you need to select Google Map Hero
- Now 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.
Step 3 — How to Create an Office Address?
If you plan to create a Contact page similar to the one from the demo content, then you should know that the flow is similar to what we described in Step #1. You need to follow the same actions, just add the right the content. For instance, let’s assume that you have multiple offices around the world. This is the right place to let people know how they can get in touch with the right one.
Here is a list of links to the begging of every children page from the above video:
How to get the same layout (as in the demo) for my contact form?
Just after installing the Contact Form 7 plugin, you’ll see a default form named Contact Form 1 and a Form section under. Place this snippet inside:
<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>
Next, copy the shortcode after the title and paste it into the newly created Contact page:
[contact-form-7 id=“1234” title=“Contact form 1”]
*Note: Replace id=“1234” with your own contact form id.