Shopify Elements - Customer Form Field
You can customize your Customer Form using the Customer Form Field element.
Customer Form prerequisites:
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.
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.
Configuring your Customer Form Fields
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:
The Email, First Name, and Last Name fields correspond with the Customer data field in the Shopify admin and will show like below:
Text to show in the input field before your visitors start typing. This will guide your visitors on the information they should provide.
Make the field a required or optional field.
Show or hide the label name.
Name of the input field.
Position of the label in regard to the input field.
Set the width of the input field by screen width
Customize the font size of the Label Name and Placeholder Text by screen width
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