Shopify Elements - Customer Form Field

You can customize your Customer Form using the Customer Form Field element.

Customer Form prerequisites:

1. The Customer Form Field only works under the Customer Form element. Make sure you have a Customer Form in the page editor before adding the Customer Form Field element.

2. An email or name field (configured in the Customer Form Field element) and a Customer Form Button must both be present in the Customer Form for it to function properly.

Where to access data collected?

All data collected via the Customer Form is stored under the "Customers" tab in your Shopify admin page.

Access the Customer Form Field element

Step 1: Scroll down to the Shopify Form Element Section in the Element List panel on the left of your Layoutbase window

Step 2: Hover over the Customer Form Field element

Step 3: Drag & drop the Customer Form Field element to the page editor on the right hand side, make sure it’s dropped inside a Customer Form.

⚠️ Please make sure the Customer Form Field element is dropped inside of a Customer Form.

Customer Form Field element Configuration

You can customize the appearance of your form field by adjusting the parameters under the "General" and "Style" configuration in the Customer Form Field element.

The Customer Form Field supports the collection of customer Email, First Name, and Last Name. These three fields have similar configuration settings.

Select the element in the page editor, and the configuration panel will show on the left. The parameters in the "General" and "Style" configuration are specified to this element.

General Configuration

Configuring your Customer Form Fields

​Content
Customer Details	Under the Customer Details parameter, Email, First Name, and Last Name are available for choosing. The data selected syncs with the default value of the Placeholder Text and Label Name parameters as below: Email Placeholder Text: Enter your email Label Name: Email First Name Placeholder Text: Enter your first name Label Name: First Name Last Name Placeholder Text: Enter your last name Label Name: Last Name The Email, First Name, and Last Name fields correspond with the Customer data field in the Shopify admin and will show like below:
Placeholder Text	Text to show in the input field before your visitors start typing. This will guide your visitors on the information they should provide.
Fonts	​Customer the font used for the Label and Placeholder Text of the Customer Form Field Open the Font Manager via More Fonts to select other fonts from over 1300+ Google Fonts list
Required Field	Make the field a required or optional field.
Show Label	Show or hide the label name.
Label Name	Name of the input field.
Label Position	Position of the label in regard to the input field.
​Device Responsive
Width	Set the width of the input field by screen width
Font Size	Customize the font size of the Label Name and Placeholder Text by screen width
Visibility
​Hide in Desktop view	​Show or hide this element in desktop view
​Hide in Tablet view	​Show or hide this element in tablet view
​Hide in Mobile view	​Show or hide this element in mobile view