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="grid pixcode--grid"> <div class="grid__item six-twelfths palm-one-whole"> [text* your-name placeholder "What's your name?"] </div> <div class="grid__item six-twelfths palm-one-whole"> [email* your-email placeholder "What's your email address?"] </div> </div> <p>[textarea your-message x4 placeholder "Your message.."]</p> <p>[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).