6 Steps to Create Contact Us Page with PageFly

About PageFly Contact Us Page

With PageFly, you can effortlessly create a visually appealing Contact Us page without any coding skills. In this guide, we’ll walk you through the steps to build a Contact Us page using PageFly.

How To Create A Contact Us Page With PageFly

Step 1: Create A Regular Page

1. In the PageFly dashboard, go to the Pages tab.
2. Click on the Create Blank Page button.
3. Select Regular from the dropdown menu.
4. Choose your editor type:

• Gen 2 Editor (up coming): An advanced editor utilizing the flex system with nested containers.

• Legacy Editor: A straightforward editor with a focus on traditional layout options.

Or you can click on the Create from template button to use PageFly templates for your Contact Us page.

Step 2: Upload An Image Banner

Add A Section On The Page Canvas

1. In the editor, click on the Elements icon.
2. Under the PageFly tab, select the Layout element.
3. Drag and drop either 1/1 option (for the Legacy editor) or Blank block (for the Gen 2 editor) into the page editor.

In Legacy editor, you can expand the display space of Row by clicking on Section in the breadcrumb > Go to the General tab > Disable the Set fixed width option

In Gen 2 editor, you can do this by selecting the Flex section > Go to Styling tab > Choose “Fill container” option under the Content width parameter.

Add Background Image For The Banner

• Step 1: In Styling tab, scroll down to the Background parameter > Click on Select image to choose an image

You can use an image from the Image Manager or upload one from the internet. For more details, read here.

• Step 2: In the Styling tab, navigate to the Spacing section > Set the value for top-padding and bottom-padding 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 the Padding and Margin. In this case, set the padding at the top and bottom to 200px.

• Step 3: Scroll down to the Background parameter, and click on the More Settings button > Choose the Center option for the Background Position, Cover for Background Size

Add A “Contact Us” Heading

Click on the Elements icon > Then, in the PageFly tab choose the Heading element > Drag and drop the first variant into your section

You can follow those steps below to alter the text and style a Heading element:

• Step 1: In the General tab, change the sample text to “CONTACT US”.
• Step 2: Click on the Styling tab > Content color > Choose your preferred color.
• Step 3: In Spacing, adjust the margin top and bottom as needed.
• Step 4: Scroll down to the Typography parameter > Select your preferred font family and adjust the font size as needed.

Step 3: Add A Google Map Element

Click on the Elements icon > Then, in the PageFly tab choose the Google Map element > Drag and drop the first variant into the page editor.

To the location of the map, select General tab > change Map location, Map zoom and Map type in Content parameter

Read more here about the Google Map element.

Step 4: Create A Contact Information Field And Contact Form

In the same section with the Google Map, we will add the ½ – ½ layout. The column on the left will contain the information of your store. In the right column, a contact form element will be placed so customers can submit their information to your store.

Add Contact Information Field

Setting Up In The General Tab

We will add 4 heading elements to the left column with the following content: Contact information, Address, Email, Phone number. You can create one heading element, then click on that heading to duplicate it to 4 heading elements.

Now, you will add content for each heading. Click on each heading and input your store information in the Content parameter of the General tab.

With each information line, we will add an icon.

• 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, simply click on the icon. In this case, I will replace it with the “location-dot” icon.

You can do the same with the remaining headings.

Customize Style In The Styling Tab

Go to the Styling tab to set up font styles.

• Select your preferred font family and weight for your headings and text elements.
• Adjust the font size to suit your design needs for each heading and text element.
• Use the Copy Styles function to quickly apply the same styles from one heading to others, ensuring consistency.

Add A Contact Form

Click on the “Elements” icon > Navigate to the Shopify tab > Drag and drop the Contact Form element into the right column.

You can style the form similarly to how you styled the headings in the left column.

Learn how to easily create Shopify forms to collect important customer data with this helpful video guide by PageFly:

Step 5: Add An Instagram Feed Element

The Instagram element lets customers get a glimpse into your brand personality, enhances brand trust, customer engagement, and ultimately, drives sales.

Add A Headline “Follow Us On Instagram”

Use the Heading element to create the headline. In the General tab, add “Follow us on Instagram” text in Heading text. Then switch to the Styling tab to customize the text.

Add An Instagram Feed Element

Click on the “Elements” icon > Drag and drop the Instagram feed 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.

Step 6: Save And Publish The Page

Click on the Save button then Publish button to publish your page. You can click on the Live view button to see the page live.

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

Frequently Asked Questions

1. Why is the Contact Us page important?

Contact Us Page is important as it allows visitors to contact brands easily without leaving their browser, by phone call, message or fill-out forms.

2. What elements can I include on my Contact Us page with PageFly?

You can enhance your Contact Us page by adding:

• A contact form
• Text content for information
• Visuals to engage visitors
• Map integration (optional) for location
• Social media buttons (optional) for additional contact channels