• Video Tutorial
  • GemPages Forum
Start For Free
  • Video Tutorial
  • GemPages Forum
homeElements[V7] Contact form element
homeElements[V7] Contact form element

[V7] Contact form element

This article will show you how to use the Contact form and its child elements with Editor V7, enabling you to create a customized form for gathering customer information.

About the Contact form 

A Contact Form serves as a web-based form that enables store owners to gather information from their customers. These forms not only facilitate customer inquiries but also play a crucial role in marketing by attracting potential leads and expanding the customer base.

Compared to version 6, the contact form element in version 7 remains relatively unchanged. This article will guide you through the setup process and provide insights into the included child elements.

Add the Contact Form to your page

The Contact Form is a flexible element and can be used on any page by following the steps below: 

Step 1: Access the GemPages Dashboard and select a page for editing or create a new one.

Step 2: Within the left sidebar, locate the Contact form element and add it to your preferred location on the page.

The Contact Form element is fully equipped with all the necessary components to operate as a customer information collection form. No adjustments are required for it to function on your live page. However, if you wish to enhance the form’s design, GemPages provides several adaptable child elements.  

Child elements

The Contact form comes with various child elements. These child elements must be placed inside the Contact form to function correctly. Below is the list of the Contact form child elements:

  • Text field: Provide an area for the customer to input any type of information.
  • Text Area: Functions similarly to the text field but offers a more expansive input area.
  • Email field: Enable customers to enter their email addresses.
  • Checkbox: Permits visitors to toggle responses for a question. Each checkbox has two states: selected or unselected. This feature is useful for obtaining agreement to your website’s Terms and Conditions or for newsletter sign-ups.
  • Dropdown: Allows users to select a single option from a set of choices. The option box can be hidden or revealed based on user interaction. 
  • Submit Button: This button is crucial for customers to click in order to submit the form.

To create labels for input fields, just drag and drop the Heading or Text Block element. After that, add the relevant child element depending on the information you want to collect from users. And don’t forget to include a Submit button to complete your form’s design.

The Email field and the Submit button are essential components that must be included in a Contact Form to operate correctly. 
If your intention is to use these elements within a Product Module, it’s advisable to use the Product Custom Field element.

Configure the Settings tab

After submit

Action: Determine whether you prefer to guide users to a designated destination page or maintain them on the current page upon the completion of the form submission.

If you decide to send customers to another page, select “Open URL” from the dropdown and click on the “Pick Link” button to open the Link Picker panel.

Inside this panel, you have the following options: 

  • Lead visitors to another page within your store by exploring the Pages, Collections, Products, or Articles tabs. 
  • Navigate to a specific location on the same page using the Scroll to tab.

Upon configuring the link, make a selection regarding whether it should open in the current tab or a new one by utilizing the Target drop-down menu.

Success message

This section allows you to customize the message that displays when the form is submitted successfully.

Error message

This is where you edit the error message when customers cannot submit the form for any reason.

Configure the Advanced Tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.

Access your form submissions

All completed form submissions will be forwarded to your email inbox. Depending on your email service provider, you may also want to check the Junk or Spam folder for any misplaced emails.

To locate or modify the destination email address within Shopify, follow these steps: Navigate to your Shopify Admin and then proceed to Settings > Notifications. If you wish to update the email address, simply enter the new email in the designated “Sender email” field and remember to click on the “Save” button to confirm the changes.

And there you have it! If you need any further assistance along the way, our GemPages Support Team is always here for you!

You can reach us via email or live chat at any time.

Was this helpful?

Yes  No
Related Articles
  • [V7] Comparison Image
  • [V7] Custom Code element
  • [V7] Shopify App element
  • [V7] Sticky Cart element
  • [V7] Product Tag
  • [V7] Product Custom Field
footer logo
  • Changelog
  • Privacy Policy
  • Terms of Service
  • Community
  • Video Tutorial
© 2017-2023 GemPages. All rights reserved.
Popular Search:Responsive design, Transfer content, Custom code