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
Create a new page in the PageFly dashboard
You can quickly create a blog post page by selecting one of the two options:
- (+) icon
- [ Create a page ] button
Create a new page in the PageFly Regular page list
In the PageFly dashboard, choose the Regular Pages list and click on the Create a regular page button on the right screen. You can see the screenshot below
After that, you need to add a title for the page and save it to start to build from the scratch.
You can watch the short video below
2.1 Add a section on the page canvas
On the element catalog, click on the Add element icon (the first icon), 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
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.
Scroll down to the BACKGROUND parameter, click on the More Settings button.
Choose the Right Center for the Background Position and Cover for Background Size.
2.3 Add a “Contact Us” heading
On the element catalog, click on the Add element icon (the first 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, and align the center in the Text Alignment option.
- We choose Montserrat for the font family and setup 40px for the font-size. Click on the More Settings button to choose the Regular for the font-weight. 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
It will turn to this
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
- 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 (the second 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.
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