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  — How to Start?

Here’s what you need to do to start with the right foot:

  • Log into the Word­Press Dash­board
  • Go to Pages → click on Add new, and write down a rel­e­vant name for this one (Con­tact should be just fine)
  • Click on the funky P icon to add a short­code, such as the Columns (you can choose up to six columns, but we high­ly rec­om­mend it to stick with three), and click on Insert
  • Now you sim­ply have to insert con­tent for each of these columns by sim­ply edit­ing that area (for instance, if you plan to include your social media accounts, you just need to click again on thesym­bol, click on Icon and select the back­ground shape, the icon size, and copy-paste the right link).

You can also play around with the options from the Descrip­tion area, under the Hero area set­tings. It is a good place to write down a wel­com­ing mes­sage on your Con­tact page, and invite peo­ple to reach you.

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

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:

  • Go to Pages → click on Add new, and give it a name
  • On the right side, under Page Attrib­ut­es you need to select Google Map Hero
  • Now 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.

Step 3 — How to Create an Office Address?

If you plan to cre­ate a Con­tact page sim­i­lar to the one from the demo con­tent, then you should know that the flow is sim­i­lar to what we described in Step #1. You need to fol­low the same actions, just add the right the con­tent. For instance, let’s assume that you have mul­ti­ple offices around the world. This is the right place to let peo­ple know how they can get in touch with the right one.

Video Presentation

In this video we show you how easy it is to set­up the con­tact page from top to toe. We’re using Con­tact Form 7 and our awe­some Pix­Codes plu­g­in.

Here is a list of links to the beg­ging of every chil­dren page from the above video:

How to get the same layout (as in the demo) for my contact form?

In order to achieve the same lay­out as on our Con­tact Page from demo, you need to use the Con­tact Form 7 plu­g­in and a spe­cif­ic markup.

Just after installing the Con­tact Form 7 plu­g­in, you’ll see a default form named Con­tact Form 1 and a Form sec­tion under. Place this snip­pet inside:

<div class=“form-connected”> <div class=“grid pixcode–grid”> <div class=“grid__item six-twelfths palm-one-whole”> [text* your-name place­hold­er “Your name..”] </div> <div class=“grid__item six-twelfths palm-one-whole”> [text* last-name place­hold­er “Phone..”] </div> </div> [email* your-email place­hold­er “Email..”] [textarea your-mes­sage x4 place­hold­er “Your Mes­sage..”] </div> <p style=“text-align:right”>[submit “Send”]</p>

Next, copy the short­code after the title and paste it into the new­ly cre­at­ed Con­tact page:

[con­tact-form-7 id=“1234” title=“Contact form 1”]

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

Additional Reading:

Updated on May 8, 2017

Was this article helpful?

Related Articles