Creating the Contact Page

The Con­tact page is one the most impor­tant ones on your web­site. In the end, you invest time, ener­gy, and mon­ey to build a dig­i­tal rep­u­ta­tion because you want to engage with peo­ple and pro­mote your work. That’s why cre­at­ing such a page is an impor­tant task that you should con­sid­er. In this arti­cle, we walk you through the steps you need to fol­low to cre­ate a con­sis­tent Con­tact page.

Step 1 — Install Contact Form 7 plugin

On the con­tact page from the demo, we’re using the Con­tact Form 7 plu­g­in — it’s one of the best form builders we’ve test­ed so far. You can install this plu­g­in from the top ban­ner instruc­tions with the required and rec­om­mend­ed plu­g­ins, or by going into Plu­g­ins → Add New.

Step 2 — Create a Contact Form

  • Cre­ate a sim­ple form by fol­low­ing the plugin’s start­ing guide.
  • You can either fol­low the default con­tact form set­up or set it up just like on our demo by using the code below:

[text* your-name place­hold­er “Your Name”]

[email* your-email place­hold­er “Your Email”]

[text your-sub­ject place­hold­er “Sub­ject”]

[textarea your-mes­sage place­hold­er “Your Mes­sage”]

[submit class:btn class:btn–primary “Send”]

Step 3 — Create a “Contact” Page

  • From your site Word­Press dash­board add a new page, name it “Con­tact” or sim­i­lar and assign its page tem­plate if there is any.(e.g. Con­tact Page, Map Head­er, Google Map Hero)
  • Go to Con­tact→ Con­tact forms and copy and paste the code found next to the pre­vi­ous­ly cre­at­ed form into the edi­tor.
  • Use the cus­tom short­codes to in order to have a bet­ter look­ing  ‘Con­tact’ page. You can start with the set­up from our offi­cial 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"] 



*Note: Replace id=“4” with your own con­tact form ID.

Updated on November 15, 2017

Was this article helpful?