The Contact Form Button element is a customizable dimension of your Contact Form. The Contact Form button is your call-to-action button used together with the Contact Form Field. By configuring it according to UIUX best practices, you effectively encourage visitors to submit a message, in turn helping you to grow your email list and further improve conversion rates.
Contact Form prerequisites:
The Contact Form Button only works under the Contact Form element. Make sure you have a Contact Form in the page editor before adding a Contact Form Button.
An email field (configured in the Contact Form Field element) and a Contact Form Button must both be present in the Contact Form for it to function properly.
Where to access the form submitted?
All submissions collected through the Contact Form element are sent to the Sender email address of your store. You can change the sender email address in Store details under your Shopify admin settings.
Access the Contact 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: Find the Contact Form Button element
Step 3: Drag & drop the Contact Form Button element to the page editor on the right, make sure it’s dropped inside a Contact Form.
⚠️ Please make sure the Contact Form Button element is dropped inside of a Contact Form.
Contact Form Button element Configuration
You can customize the appearance of your Contact Form Button by adjusting the parameters under General and Style in the Contact 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 allows you to tailor your form to your needs and design.
Configuring your Contact Form Button
Call-to-action button text
Button style design with below parameters in default state:
Style when the button is hovered on
Style when the button is clicked
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