Shopify Elements - Customer Form Button

The Customer Form Button element is another customizable dimension of your Customer Form. The Customer Form Button is your call-to-action button used together with the Customer Form Field. By configuring it according to UIUX best practices, you effectively encourage visitors to submit their email or name, in turn helping you to grow your email list and further improve conversion rate.

Customer Form prerequisites:

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

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 through the Customer Form is stored under the "Customers" tab in your Shopify admin page.

Access the Customer Form Button 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 Button element

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

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

Customer Form Button element Configuration

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

Select the element in the page editor, and the configuration panel will show on the left. The parameters under " General and Style configuration allows you to tailor your form to your needs and designs.

General Configuration

Configuring your Customer Form Button

​Content
Button Text	Call-to-action button text
Loading Text	Text to show after the user submit the form and the button is in loading state.
Fonts	​Customer the font used for the Button Text and Loading Text of the Customer Form Button Open the Font Manager via More Fonts to select other fonts from over 1300+ Google Fonts list
Button Style
Default	Button style design with below parameters in default state: Text Color: Button text color Button Color Border Thickness: Border width setting of the button Border Color: Color setting of the button’s set border, will only show effect when Border Thickness is greater than 0px
Hover	Style when the button is hovered on
​Active	​Style when the button is clicked on
​Device Responsive
​Font Weight	​Font weight setting of the button text, set by screen width
Font Size	​Customize the font size of the button text &label name and input field by screen width
​Width	​Button width setting, set by screen width
​Height	​Button height setting, set by screen width
​Horizontal Alignment	​Customize the horizontal alignment of the Customer Form Button to Left, Center, or Right 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