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:

[text* your-name placeholder “Your Name”]

[email* your-email placeholder “Your Email”]

[text your-subject placeholder “Subject”]

[textarea your-message placeholder “Your Message”]

<p>[submit class:btn class:btn–primary “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.

Updated on November 15, 2017

Was this article helpful?

Related Articles