Creating the Contact Page

The ‘Con­tact’ page helps the web­site vis­i­tors reach­ing you more eas­i­ly by check­ing your work loca­tion and more.

Step 1 — Install Contact form 7

You can sim­ply install and acti­vate Con­tact Form 7 by going into the Plu­g­ins → Add New page.

Step 2 — Create a contact form

  1. Cre­ate a sim­ple form by fol­low­ing the plugin’s start­ing guide.
  2. 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

  1. From your site WP dash­board, add a new page and name it “Con­tact” or sim­i­lar.
  2. 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.
  3. 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.

Step 4 — Customize the ‘Contact’ page

You can add a Google Maps URL and enable or dis­able the cus­tom styling for it from Appear­ance → Cus­tomiz­er → Theme options → Gen­er­al.

Addi­tion­al Read­ings:

Updated on May 1, 2017

Was this article helpful?