How To Create a Contact Us page with PageFly

In this article, we will go through step by step how to create a contact us page with PageFly. Related elements for a contact us page will be included in this article along with detailed styling steps.

Step 1: Create a regular page

In the PageFly dashboard, choose the Regular Pages on Pages tab and click on the Create a new page button on the right screen to start building your page from scratch.

Or hit the Create new page from templates button to use PageFly templates for your Contact us page.

Step 2: Upload an image banner

2.1 Add a section on the page canvas

On the element catalog, click on the Add element icon on the left toolbar, choose the Layout element and then, drag and drop the Full Section option into the page editor.

The editor will be like the image below

2.2 Add background image for the banner

In the Styling tab, scroll down to the BACKGROUND parameter, choose an image from Background Image option like the gif below

You can upload the image which is available in the Image Manager or upload it from the Internet. Read more here to know more details.

In the Styling tab, find the SPACING section.

• Edit the top-padding and bottom-padding value to change the height of the section to fit your image’s height.
• The little box in the middle will set the same value for all four sides of Padding and Margin. In this case, we set 135px for both Padding top and bottom.
• In Text alignment, choose Align center.

Scroll down to the BACKGROUND parameter, click on the More Settings button.

Choose the Right Center for the Background Position, Cover for Background Size and set rgba(0, 0, 0, 0.3) for Overlay Color.

2.3 Add a “Contact Us” heading

On the element catalog, click on the Add element icon, choose the Heading element and then, drag and drop the first variant into the page editor.

• In the General tab, change the sample text to “CONTACT US”.
• Click on the Styling tab, scroll down to the TYPOGRAPHY parameter

• • In Content Color, choose white color.
  • We choose Libre Baskerville for the font family and setup 40px for the font-size.
  • Click on the More Settings button to choose the Bold for the font-weight and set 1.5em for Line Height. You can check the screenshot below

Step 3: Add a Google Map element

On the element catalog, click on the Add element icon (the first icon), choose the Google Map element and then, drag and drop the first variant into the page editor.

You can change the location of the map in the CONTENT parameter in the General tab like the demonstration below.

Read more here about the Google Map element.

Step 4: Create the contact information field and a contact form

In the same section with the Google Map, add the ½ – ½ layout like the image below

In the left column, we will add the contact information of your store. In the right column, a contact form will be placed so customers can submit their information to your store.

4.1 Add the contact information field

Setting up in the General tab

We will add 4 heading elements into the right column. These headings correspond to the following content:

• CONTACT INFOR
• Address
• Email
• Phone number

You just need to add one heading element and then click on the heading to duplicate it to 4 headings. You can see the gif below

Now, you will add content for each heading. ( Click on each heading and input content in the CONTENT parameter of the General tab as the step 2.3). The result will be like the image below

With each information line such as an address, email, and phone number, we will add an icon on.

• Click on the heading and look in the General tab
• Enable the Show icon option. A star icon will be displayed. If you want to change to another one, click on the icon to change it. In this case, I will replace it with the “map-marker” icon.

You will do the same with the remaining headings.

For the email, we use the “envelope-o” icon and we use the “mobile” icon for the phone number.

• We will add a Paragraph element at the bottom of this column.

Customize style in the Styling tab

• Go to the Styling tab to set up font styles.
  • We also use Montserrat for the font family for all of them and Regular for the font-weight (Check the step 2.3)
  • With the first heading, we set 24px for the font size.
  • For other headings and the paragraph, we set 15px. You can style for the address heading and use the Copy Styles function of it to apply (Paste Styles) for the email, phone number headings, and the paragraph.

4.2 Add a Contact Form

In the Element catalog, click on the Add Shopify element icon

Drag and drop the Contact Form element into the right column.

And you can style the same way with the stylings for the headings in the left column.

Step 5: Add an Instagram element

You will get to be known more by adding social media to your store. In this case, we will use the Instagram element.

5.1 Add a Call to action headline

We will add a Call to action headline “Follow us on Instagram” by using the Heading element. Just do like the previous steps, click on the Add element icon in the Element Catalog, and then drag and drop a heading element.

You can see all the styling settings for this heading in the image below

5.2 Add an Instagram element

In the Element Catalog, click on Add element icon and then drag and drop the Instagram element in the same section with the heading above.

Note that you have to connect to your Instagram. Check this article about the Instagram element for more information.

To know more about Instagram element, you can watch this video tutorial:

Step 6: Save and Publish the page

After finishing editing your page, check once again the entire page.

Click on the Publish button and Live view to see the page in the live.

If you don’t want to publish yet, click on the Save button and see it in the Preview mode.

Here is the live page

You can check these blog to learn more about how to build a contact us page and how to make the full use of it with PageFly.