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:

<p>Your Name (required)<br />

[text* your-name] </p>

<p>Your Email (required)<br />

[email* your-email] </p>

<p>Subject<br />

[text your-sub­ject] </p>

<p>Your Message<br />

[textarea your-mes­sage] </p>

<p>[submit class:btn class:btn–large “Send”]</p>

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"] 

[/col]

[/row]

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

This article applies to Border, Bucket, Heap, Julia, Lens, Mies, Noah, Osteria, Pile, Rosa, and Timber as they share the same underlying structure.

Updated on November 15, 2017

Was this article helpful?