Shopify Elements - Contact Form Button

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:

1. 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.

2. 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.

General Configuration

Configuring your Contact Form Button

​Content
Button Text	Call-to-action button text
Fonts	Customize the font used for the Button Text of the Contact 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
​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