Shopify Elements - Contact Form Field
You can customize your Contact Form using the Contact Form Field element.
Contact Form prerequisites:
The Contact Form Field only works under the Contact Form element. Make sure you have a Contact Form in the page editor before adding the Contact Form Field element.
An email field and a Contact Form Button must both be present in the Contact Form for it to function properly. The email field can be customized in the Contact Form Field element.
An email and a Contact Form Button must both be present in the Contact Form for it to function properly. The email field options can be configured in the Contact Form Field element.
Where to access the form submitted?
All submissions via the Contact Form element are sent to the Sender email address of your store. You can change it under Store details in your Shopify admin settings.
Access the Contact 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: Find the Contact Form Field element
Step 3: Drag & drop the Contact Form Field element to the page editor onto the page editor, making sure that it’s dropped inside a Contact Form.
⚠️ Please make sure that the Contact Form Field element is dropped inside a Contact Form.
Contact Form Field element Configuration
You can customise the appearance of your form field under General and Style by adjusting the parameters in the Contact Form Field element.
The Contact Form Field supports different input types of input elements, including email, text fields, checkboxes (Multiple Choices), radio buttons (Single Choice), and dropdown (Single Choice).
Select the element in the page editor, and the configuration panel will show on the left hand side. The parameters in the General and Style Configuration are specific to this element.
General Configuration
Configuring your Contact Form Fields
Content | |
Input Type | The below input types are available for choosing:
Some parameters vary by input type to allow better customization to your form’s layout. See section “Parameter by Input Type” for more details. |
Placeholder Text | Text to show in the input field before your visitors start typing. This will guide your visitors on the information they should provide. Available in below input type:
|
Fonts |
|
Required Field | Make the field a required or optional field. |
Show Label | Show or hide the label name. |
Label Name | Name of the input field. |
Label Position | Position of the label in regard to the input field. |
Parameter by Input Type | |
Placeholder Text | Text to show in the input field before your visitors start typing. This will guide your visitors on the information they should provide. Available in below input types:
|
Number of Lines | Set the height of the input field for the “Multiple Line Text” input type. |
Single Choice Options | Set the single choice option list for the “Single Choice” input type. Input 1 option per line. |
Radio Button Color | Set the active color of the radio button for the “Single Choice” input type. This color will show when your visitor selects a certain option. |
Multiple Choices Options | Set the multiple choices option list for the “Multiple Choices” input type. Input 1 option per line. |
Checkbox Color | Set the active color of the checkbox for the “Multiple Choices” input type. This color will show when your visitor selects a certain option. |
Option Arrangement | Set the option’s way of arrangement to Horizontal or Vertical. Available in below input types:
|
Device Responsive | |
Width | Set the width of the input field by screen width |
Font Size | Customize the font size of the Label Name and Placeholder Text 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 |