How to use Helium Customer Fields with PageFly

About Helium Customer Fields By Helium

What’s Helium Customer Fields App?

Helium Customer Fields by Helium is a versatile email marketing app designed for merchants aiming to enhance their customer interaction through lead collection, improved customer services, and increased sales. It supports the creation of custom forms tailored to specific business needs, such as customer sign-up forms, surveys, contact forms, and wholesale inquiries as unique as your business, and saving custom data to customer accounts.

With the integration of Helium Customer Fields PageFly, you can now effortlessly design, create, and incorporate various forms directly onto your PageFly pages, enabling a seamless user experience and optimized customer engagement.

Install Helium Customer Fields App

Before using this element, you have to install the Helium Customer Fields app to your store and configure all options in the app and then come back to PageFly to use the element(s) on all of your PageFly pages.

• Install Helium Customer Fields
• Install PageFly

How To Access Helium Customer Fields Element

In page editor, follow these steps to access Helium Customer Fields element:

• Step 1: In the PageFly editor, click “Third-party elements” on the left menu
• Step 2: Click “Third-party integrations” icon on top
• Step 3: Search for “Helium Customer Fields” and activate it
• Step 4: Click “Done” and the element will appear in the “Third-party elements” menu

How To Configure Helium Customer Fields Element

From PageFly

Step 1: Add Helium Customer Fields Element

Before starting to set up for the element, you will need to add this element to your page canvas:

• Step 1: Click “Third-party elements” on the left menu bar
• Step 2: Look for “Helium Customer Fields” element
• Step 3: Click on the element to see its variant
• Step 4: Drag and drop the variant onto the page canvas

Step 2: Configure Helium Customer Fields Element

After adding the element, you can adjust it by clicking on the element.

• From the “General” tab, there is a widget configuration giving you a short explanation of the Helium app, its link to the app listing.

• For styling options like margins, borders, and effects, go to the “Styling” tab. You can find more details about the available options here.

From Helium Customer Fields App

Before using the Helium Customer Fields element in PageFly, you’ll need to create and configure your widget in the Helium Customer Fields app. Here’s how:

• Step 1: Create Form

On the Helium Customer Fields dashboard, choose the Forms option on the navigation bar and click on the “Get Started” button.

• Step 2: Configure Your Form

Form Settings

After step 1, you will see the configuration options of the form like name, template and and account options as below:

Please note that PageFly only supports the Embed Form created with Helium Customer Fields.

You will be able to choose your layout and background for the form from the Shopify default templates to start customizing.

After that, click on the Continue button to move to the next steps.

Step 3: Customize Your Form

In the form editor, you see the options to customize your form as below. All you have to do is drag and drop the form field elements from the left column to your form.

Standard fields

Address fields

Display elements

Custom input fields

Step 4: Add Condition Rules For The Form (Optional)

In case you want to set up logical actions on your form, move to the tab Rule.

Step 5: Edit The Settings Of The Form

• Besides the 3 settings mentioned above, in the tab Settings, you can see some advanced configurations for your customer form like this:

• After it’s all set up, click the Continue button on the top right to save the form and move to the next steps.

Step 6: Add Form To Storefront

Important note: You need to activate “Helium Customer Fields” in the Theme Customize for it to display. Go to your Shopify admin, then navigate to Online Store > Theme > Current theme > Customize > App embeds. Search for “Helium Customer Fields” and activate it. 

• After step 5, you’ll see a dashboard like below. You need to copy the form ID and pick the theme your store is using.

• Then you’ll be directed to the theme editor, you just need to paste the Form ID and Save.

And now, Helium Customer Fields element is ready to go!

Publish the page to view the results in the live view.

Tips & Best Practices

We strongly recommend using the Shopify App Block Element for Helium Customer Fields integration. Available for Shopify theme OS 2.0, this feature simplifies adding Helium Customer Fields functionality to your PageFly pages or sections. It offers greater flexibility, easier updates, and an improved user experience. While limited to one per page, the App Block is a valuable tool to enhance your store’s capabilities.

For detailed setup guidance, refer to our App Block article. This simple change can substantially improve your Helium Customer Fields integration and overall store performance.

Frequently Asked Questions

1. What is the Helium Customer Fields app?

Helium Customer Fields is an app that enables merchants to create custom forms for various purposes like lead collection, customer service enhancement, and boosting sales. It offers a range of form types including surveys, contact forms, and wholesale inquiries.

2. How do I manage the data collected from the forms?

All data collected through forms created with Helium Customer Fields are stored within the Helium app. You can access, manage, and analyze this data directly from the Helium dashboard in your Shopify admin. This allows you to efficiently handle inquiries, process leads, or follow up on customer interactions.

3. Is it possible to add conditional logic to the forms on PageFly pages?

Yes, Helium Customer Fields allows you to incorporate conditional logic into your forms. This means that you can set up certain fields to appear only when specific conditions are met, making your forms more interactive and tailored to the user’s inputs.