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>[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 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.

Updated on November 15, 2017

Was this article helpful?