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 pageClick to copy

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.

about us page pagefly

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

contact us pagefly

Step 2: Upload an image bannerClick to copy

2.1 Add a section on the page canvasClick to copy

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.

about us page pagefly

The editor will be like the image below

about us page

2.2 Add background image for the bannerClick to copy

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

contact us page

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.

contact us page

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” headingClick to copy

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.

contact us page

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

contact us page

    • 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

contact us page

Step 3: Add a Google Map elementClick to copy

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.

contact us page

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

contact us page

Read more here about the Google Map element.

Step 4: Create the contact information field and a contact formClick to copy

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

contact us page

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 fieldClick to copy

Setting up in the General tabClick to copy

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

contact us page

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

contact us page

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.

contact us page

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.

contact us page

Customize style in the Styling tabClick to copy

  • 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.

contact us page

4.2 Add a Contact FormClick to copy

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

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

contact us page

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

Step 5: Add an Instagram elementClick to copy

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 headlineClick to copy

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 elementClick to copy

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.

contact us page

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

Step 6: Save and Publish the pageClick to copy

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.

contact us page

Here is the live page

contact us 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.

Thank you for your feedback!

Navigate this category

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

PageFly Help Center is now available in French, Portuguese and Chinese. Please check the flags on the page header.

I got it!