How to Use PageFly 2.7.0 Forms and Video Elements: Complete Tutorial
By Braincuber Team
Published on May 18, 2026
PageFly 2.7.0 introduces powerful new Form elements and significant UX improvements for video, tabs, and list components. This complete tutorial walks you through every new feature, showing you exactly how to build custom Customer Forms, Contact Forms, embed videos with start and end times, customize individual tab styles, and reorder list items with ease. Whether you are building landing pages or optimizing your Shopify store, this beginner guide gives you the complete knowledge to kick your page design up a notch.
What You'll Learn:
- Difference between Customer Form and Contact Form
- Building forms from scratch or using pre-built templates
- Redirecting customers after form submission
- Configuring HTML Video, YouTube, and Vimeo elements
- Setting video start and end times for YouTube
- Customizing individual tab styles independently
- Reordering list items without selecting the parent List
Customer Form vs Contact Form: What Is the Difference
PageFly 2.7.0 offers three kinds of forms: Customer Form, Contact Form, and Search Form. The most common confusion is between Customer Form and Contact Form. Here is the breakdown:
| Form Type | Purpose | Data Destination |
|---|---|---|
| Customer Form | Account or service sign-up | Shopify Admin > Customers area |
| Contact Form | Send messages or inquiries | Customer Email (Settings > General) |
| Search Form | Search store content | Returns search results page |
How to Build a Customer Form in PageFly
The Customer Form allows customers to sign up for an account or service. All information filled in the Customer Form will show up in the Customers area of your Shopify admin. You have two options: use a pre-built template or build from scratch.
Open PageFly Editor
Go to your Shopify admin, open PageFly, and create a new page or edit an existing one.
Add Customer Form Element
Drag the Customer Form element from the left panel. There are 3 pre-built templates you can choose from, or drag the first element (email + button) to build from scratch.
Add Customer Form Fields
Drag Customer Form Field elements into your form. You can add different elements (other than Customer Form Field) into the form and style them as needed.
Configure Redirect After Submission
Select your Customer Form, go to General > Action, and paste your redirect URL. Customers will be redirected to this page after submitting the form.
Important Note
You cannot drag and drop Customer Form Field elements outside the Customer Form container. They must remain inside the form.
How to Build a Contact Form in PageFly
A Contact Form lets customers send you messages or inquiries. Their messages go directly to your Customer Email set up in Shopify admin under Settings > General. The customization power is identical to the Customer Form.
Add Contact Form Element
Drag the Contact Form element from the left panel into your page layout.
Add Contact Form Fields and Other Elements
Add Contact Form Field elements and other elements such as tabs, accordions, or paragraphs inside your Contact Form.
Set Redirect After Submission
Use the Redirect After Submission feature just as with the Customer Form. Select the form and paste your URL in General > Action.
Important Note
Contact Form Field elements cannot live outside the Contact Form. Keep them nested inside the form container.
Key Features of PageFly Forms
The new Form elements in PageFly 2.7.0 give you enormous customization power compared to previous versions. Here are the standout capabilities:
Mixed Element Support
Add non-form elements like tabs, accordions, and paragraphs inside your forms for rich, interactive layouts.
Redirect After Submission
Send customers to a thank-you page, product page, or any URL after they submit the form.
Full Styling Control
Style every field, button, and container element to match your brand identity perfectly.
Pre-built Templates
Choose from 3 pre-built Customer Form templates to get started quickly, then customize as needed.
How to Configure Video Elements in PageFly 2.7.0
PageFly 2.7.0 improved the UX quality for all media elements, especially the Autoplay feature. Explanations are now included below several features to clear up confusion about why autoplay might not work in certain cases.
HTML Video Element
The HTML Video element now notifies you about supported video formats and explains why Autoplay might not work in some browsers. Modern browsers block autoplay with sound unless the video is muted.
YouTube Video Element
A new parameter allows you to choose the starting and ending time of your YouTube video. This is useful for embedding only specific sections of a longer video.
Add YouTube Video Element
Drag the YouTube Video element from the left panel onto your page.
Paste YouTube URL
Enter the full YouTube video URL in the General settings panel.
Set Start and End Times
Use the new start and end time parameters to trim the video to the exact section you want to display.
Vimeo Video Element
The Vimeo Video element now includes explanations for why your Autoplay might not work. Similar to YouTube, browser policies require muted videos for autoplay to function.
How to Use the Improved Tabs Element
In PageFly 2.7.0, you can now drag and drop elements into each tab and change the styling distinctively for each one. The style you create for one tab will no longer automatically apply to the rest.
Add Tabs Element
Drag the Tabs element from the left panel onto your page.
Select Individual Tab
Click on the specific tab you want to edit. Each tab can now be styled independently.
Drag Elements Into Each Tab
Drag and drop any element (images, text, videos, forms) directly into the content area of each tab.
Customize Tab Styling
Change colors, fonts, spacing, and layout for each tab individually. Styles no longer cascade across all tabs.
How to Use the Improved List Element
In previous versions, you had to select the parent List element to move the order of List Items, which caused confusion. PageFly 2.7.0 fixes this. You can now select each item individually and move it around from the General tab.
Add List Element
Drag the List element from the left panel onto your page.
Select Individual List Item
Click directly on the list item you want to reorder. You no longer need to select the parent List first.
Reorder from General Tab
Use the General tab controls to move the selected item up or down in the list order.
PageFly 2.7.0 Feature Summary
| Element | What Changed | Benefit |
|---|---|---|
| Customer Form | New element with 3 templates | Direct sign-up to Shopify Customers |
| Contact Form | New element with mixed content | Inquiries go to Customer Email |
| HTML Video | Format notifications added | Clearer autoplay behavior |
| YouTube Video | Start and end time parameters | Embed specific video sections |
| Vimeo Video | Autoplay explanations added | Reduced confusion on playback |
| Tabs | Independent tab styling | Unique design per tab |
| List | Individual item selection | Easier reordering workflow |
Note on PageFly Versions
PageFly has advanced significantly since version 2.7.0. For the most up-to-date features, check the latest PageFly version documentation and the PageFly Help Center.
Frequently Asked Questions
What is the difference between Customer Form and Contact Form in PageFly?
Customer Form data goes to your Shopify Admin > Customers area for account sign-ups. Contact Form messages go to your Customer Email set in Shopify Settings > General for inquiries.
How do I redirect users after they submit a form in PageFly?
Select your form, go to General > Action in the settings panel, and paste your redirect URL. This works for both Customer Form and Contact Form.
Why does autoplay not work for my YouTube or Vimeo video?
Modern browsers block autoplay with sound. You must mute the video for autoplay to work. PageFly 2.7.0 now includes explanations for this behavior below the autoplay settings.
Can I style each tab differently in PageFly 2.7.0?
Yes. In PageFly 2.7.0, the style you create for one tab no longer automatically applies to the rest. Each tab can have unique colors, fonts, spacing, and layout.
How do I reorder list items in PageFly without selecting the parent List?
Click directly on the individual list item you want to move, then use the General tab controls to reorder it. You no longer need to select the parent List element first.
Need Help with Your Shopify Store?
Our experts can help you configure PageFly, optimize your page layouts, and boost your conversion rates. Get personalized guidance tailored to your store.