Design Contact Form Section with Contact Form Element

About Contact Form Element

The Contact Form element is a pre-made feature in GemPages that can be easily dragged and dropped from the left sidebar into your design area. 

You can further customize the form by dragging and dropping additional Form Field elements from the sidebar to include the specific information fields you need. 

The contact form element will send data to the Shopify Admin. For more detailed information about the Contact Form Element, click here.

Designing a Contact Form Section with Contact Form Element

Step 1: Drag and Drop the Contact Form Element.

The default contact form includes basic components, but you can customize it by adding, changing, or deleting any elements. 

To remove an element, right-click on it and select “Delete” to build your form from scratch.

Delete all pre-made elements to create an empty contact form:

Step 2: Create the Contact Form Layout

Drag and drop a Row element into the Contact Form. You can configure the row to be either a 1-column or 2-column layout, depending on your preferences.

Step 3: Add Form Input Elements

Next, drag and drop the necessary form input components. For a 2-column layout, place a Text Field element in the first column.

Put an Email Field element in the second column.

Step 4: Add the Submit Button.

Drag and drop the Submit Form Button, which is essential for customers to submit the form and send their information to your Shopify Admin.

Adjust the layout of the form. Click on the form to open its Settings, under Column width, choose Fit to content.

Align the content to the center horizontally:

You can also insert additional text fields, dropdown elements, or other form components as needed.

Step 5: Configure Contact Form Settings.

Configure settings to customize each condition:

• After Submit: Choose whether to let customers stay on the current page or redirect them to a specific URL or page after submitting the form.

• Success Message: Display a message to confirm successful submission.

• Error Message: Show an alert if there’s an error that prevents the form from being submitted, such as issues with the Shopify system.

Create a Contact Form from a Template in the Library

You can also create a contact form by using pre-built templates from the Library.

Step 1: Open the Library by clicking the Library icon on the left sidebar.

Step 2: Select the “Contact” category.

Step 3: Choose your desired Contact Form template and insert it into your page.

New layout styles and Contact Form sections will soon be added to the GemPages’s Library to help streamline your design process.

If you have any questions, feel free to post them here: https://feedback.gempages.net.