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:
<label> Your Name (required)

[text* your-name] </label>

<label> Your Email (required)

[email* your-email] </label>

<label> Sub­ject

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

<label> Your Mes­sage

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

[sub­mit “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.

Step 4 — How to Add a Map on the Contact page?

For a while now, Google has made it a lit­tle hard­er for peo­ple to use cus­tom Google Maps on their web­sites by requir­ing an API key for each web­site. So first you need to get your­self such a key. You can do that here.

Now that you have the key, fol­low these steps to save it on your site:

  • Log in into your Word­Press Dash­board;
  • Go to Appear­ance → Cus­tomize → Gen­er­al, and copy&paste it in the Google Maps API Key field;
    Click on Save & Pub­lish and move to the next phase.

More­over, you can eas­i­ly cre­ate a map to let your vis­i­tors know where your office is locat­ed. To do so, here’s what you need to accom­plish:

  • Copy-paste the loca­tion URL, write down the city, and select the height you want your map to be dis­played (Half/Two Thirds/Full Height)
  • Click on Update to save the changes, and you can move fur­ther.

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 June 7, 2018

Was this article helpful?