How to create a Contact Us page with PageFly
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
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 using PageFly.
In the PageFly dashboard, go to the Pages tab.
Click on the Create Blank Page button.
Select Regular from the dropdown menu.
Choose your editor type:
Gen 2 Editor : An advanced editor utilizing the flex system with nested containers.
Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model ().
Legacy Editor: A straightforward editor with a focus on traditional layout options.
Add A Section On The Page Canvas
In the editor, click on the Elements icon.
Under the PageFly tab, select the Layout element.
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
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
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.
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
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
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:
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.
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.
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
Or you can click on the Create from template button to use for your Contact Us page.
You can use an image from the Image Manager or upload one from the internet. For more details, read .
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 . In this case, set the padding at the top and bottom to 200px.
Click on the Elements icon > Then, in the PageFly tab choose the > Drag and drop the first variant into your section
Note: For consistency across your site, it's recommended to use for the heading styling.
here about the Google Map element.
Click on the “Elements” icon > Navigate to the Shopify tab > Drag and drop the into the right column.
The lets customers get a glimpse into your brand personality, enhances brand trust, customer engagement, and ultimately, drives sales.
Check about the Instagram element for more information.
You can check these blogs to learn more about and with PageFly.
