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:
<p>[text* your-name placeholder "Your name"]</p> <p>[email* your-email placeholder "Email"]</p> <p>[text your-phone placeholder "Phone"]</p> <p>[textarea* textarea-241 x3 placeholder "Message"]</p> [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.
You can add a Google Maps URL and enable or disable the custom styling for it from Appearance → Customizer → Theme options → General.