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]

[email* your-email]

[text your-sub­ject]

[textarea your-mes­sage]

[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.
Updated on November 15, 2017

Was this article helpful?