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:
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.
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.
Configuring your Customer Form Button
Call-to-action button text
Text to show after the user submit the form and the button is in loading state.
Button style design with below parameters in default state:
Style when the button is hovered on
Style when the button is clicked on
Font weight setting of the button text, set by screen width
Customize the font size of the button text &label name and input field by screen width
Button width setting, set by screen width
Button height setting, set by screen width
Customize the horizontal alignment of the Customer Form Button to Left, Center, or Right 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