Boost Customer Engagement with Shopify Forms!

Table of Contents

1. Introduction
2. Ways to Collect Customer Data
   1. Customer Form Element
   2. Contact Form Element
3. Main Differences between Customer Form and Contact Form
   1. Data Storage
   2. Accessing the Data
   3. Multiple Sign-ups
4. Using the Customer Form
   1. Adding the Customer Form Element
   2. Pre-made Customer Forms
   3. Customizing the Customer Form
      1. Adding Form Fields
      2. Modifying Field Labels
      3. Choosing the Field Input Type
5. Tailoring the Customer Form Button
   1. Changing Button Type and Text
   2. Adjusting Icon Position
   3. Styling the Button
6. Recaptcha - Pro Tip
7. Saving and Publishing the Form
8. Conclusion

Introduction

Welcome to the PageFly video tutorial series! In today's video, we will guide you on how to create a form to collect customer data using PageFly. There are two ways to achieve this: you can either use the customer form element or the contact form element. This tutorial will primarily focus on the customer form and its functionalities.

Ways to Collect Customer Data

Customer Form Element

The customer form is designed to help you easily gather customer information, such as names and phone numbers. It assists in converting store visitors into active leads. To add the customer form element to your page, click on the "Add Shopify Elements" icon on the left toolbar and select the "Form" option. PageFly provides four different pre-made customer forms that you can choose from.

Contact Form Element

The contact form, though similar to the customer form, stores the collected data in your email inbox instead of the Shopify customer section. Customers can also sign up multiple times with a single email address using the contact form, while the customer form only allows one sign-up per email address.

Main Differences between Customer Form and Contact Form

Data Storage

Data collected through the customer form is stored in the Shopify customer section, which can be accessed through the Shopify admin dashboard. On the other hand, data collected through the contact form is sent directly to your email, which you can check by going to the Shopify dashboard, clicking on "Settings," and then selecting "View email settings."

Accessing the Data

With the customer form, you can easily access the collected data through the Shopify admin dashboard. This is not the case with the contact form, as the data is stored in your email inbox.

Multiple Sign-ups

Customers can sign up multiple times with a single email address using the contact form, allowing for more flexibility. On the other hand, the customer form only permits one sign-up per email address.

Using the Customer Form

To start using the customer form, first, add the customer form element to your page by clicking on the "Add Shopify Elements" icon on the left toolbar and selecting the "Form" option. Choose one of the pre-made customer forms and drag and drop it onto your page editor.

Once added, you can fine-tune the appearance and parameters of the form. It is important to note that the email field is required for both the customer form and contact form. If customers delete this field, they will not be able to submit the form.

Scrolling down, you will find the "Redirect After Submission" option. This feature allows you to redirect the form to any page of your choice when customers click the submit button. For example, you can redirect them to your About Us page to learn more about your business.

In the "Customer Form Field" tab on the left toolbar, you will find various form fields that you can add to your pre-made form or create a new customer form from scratch. Simply click on a form field, drag and drop it into the editor. Remember that the added field must be within the form element and cannot be placed outside of it.

To further customize the form fields, go to the "General" tab in the right panel. Here, you can toggle the form label on or off, set the label position, and make a field required.

A common question we receive is how to place two form fields in the same line, such as the first name and last name fields. This can be easily accomplished by switching to the column that contains the current form field. You will see a plus icon on the top toolbar, click on it to create another column. Drag and drop a form field into this new column.

The field label and field input are child elements of the customer form field. By clicking on the field label, you can change the label text to suit your needs. Switching to the "Styling" tab allows you to further customize the label's style. Note that changing the color of the field header will also change all headers' colors, and the style of the field header will overlap the style of the form field.

Regarding the field input, you can select the type of data the customer needs to enter to complete the form. Ensure that the customer details type matches the label field to avoid confusion. Depending on the input type selected (there are nine options provided), additional configuration options will be available, such as changing the placeholder text and adding desired options.

Once all the form fields are configured, you can tailor the customer form button as you would a normal button element. You can change the button type, text, and icon position. In the "Styling" tab, you can choose the mouse-over state and adjust the content color.

Tailoring the Customer Form Button

Customizing the customer form button is similar to customizing a regular button element. First, you have the option to change the button type to "text with icon" or "icon only." You can also adjust the button text to match your desired call-to-action.

Moving to the "Styling" tab, you can select the icon position (right, top, or left). For example, if you want the icon to appear on the right side of the button, select "right." You can also modify the button's style for the mouse-over state, giving it a distinct appearance when users hover over it.

Additionally, you can change the content color of the button by selecting a color of your choice from the color picker.

After customizing the customer form and button to your satisfaction, it is essential to test the form to ensure its functionality. You can do this by saving and publishing the page.

Recaptcha - Pro Tip

If you want to turn off the recaptcha feature, you can contact Shopify support for assistance with this.

Saving and Publishing the Form

Once you have made all the desired configurations to your customer form, click on the "Save and Publish" button. This will save your changes and make the form visible on your live page. Visit the live page to see the customer form in action.

Conclusion

Congratulations! You have successfully learned how to create and customize a customer form using PageFly. We hope this tutorial has been helpful in enabling you to gather valuable customer data and generate active leads. Don't forget to subscribe to our YouTube channel for more informative video tutorials. If you have any further questions or need additional assistance, feel free to explore our other videos or reach out to our support team. Thank you for watching!

Highlights

• Learn how to create a customer form to collect valuable customer data using PageFly
• Understand the main differences between the customer form and contact form elements
• Explore pre-made customer form options and customize them to fit your needs
• Tailor form fields, labels, and input types to gather specific information
• Customize the customer form button for an appealing call-to-action
• Pro tip: Learn how to turn off the recaptcha feature by contacting Shopify support
• Save and publish your form to integrate it with your live page effectively

FAQ

Q: Can I collect different types of information using the customer form? A: Yes, PageFly provides various form fields that you can add to the customer form, allowing you to collect different types of customer information, such as names, phone numbers, addresses, and more.

Q: How can I make a field in the customer form mandatory? A: In the "General" tab of the right panel, you can enable the "Required" option for a specific form field. This ensures that customers cannot submit the form without filling in the mandatory field.

Q: Can I change the appearance of the form fields and labels? A: Yes, you can customize the style of form fields and labels using the available options in the "Styling" tab. You can change the color, size, font style, and more to match your page's design.

Q: Is it possible to redirect customers to a specific page after they submit the form? A: Absolutely! PageFly allows you to set a redirect page for the form. You can choose any page on your website, such as your About Us page, to provide customers with more information or a personalized experience after completing the form submission.