How to use the Contact Form element



This article will help you understand what a contact form is and how to use the Contact Form element in GemPages.


What is the Contact Form element?

A contact form is a web form that allows users to communicate with the site owner. It typically contains input fields for name, address, email address, and a message field. 

Not only do contact forms provide a convenient way for shoppers to get in touch with you, but they also serve marketing purposes, such as generating more leads and growing your customer base.

In GemPages, you have the Contact Form element and it’s fully customizable. Let’s go over how to set up and use the element so you can easily put a contact form on your page using drag & drop.


Add the Contact Form element onto your page

The Contact Form is a flexible element and can be used on any page, you can also create a whole Contact Us page using the Contact Form.


Step 1: Go to the GemPages Dashboard, select one of your pages and then enter the Editor by clicking on the “Edit” button, or simply create a new page.

Step 2: In the left sidebar, search for “contact form”, then drag & drop the element onto your preferred spot.

Dropping the Contact Form element inside a Row element makes it easier for you to resize and maneuver the form. This is true for most elements placed inside the Row. Check out this article to learn more tips and tricks for the Row element.

Add custom fields to your Contact form

The Contact Form element comes with a few elements packed inside, and you can drag & drop the Text Field and Text Block elements inside the form to create as many custom fields as you need. However, please note that the Email Field and Submit Button elements are mandatory for the form to function properly.


You have the option to hide the Email Field element from the live page (It will still be loaded but will be hidden) if you do not want to collect customers' email addresses. Click on the element and toggle on Hide on Client in the Settings tab.

In the Text Field element’s Settings tab, when editing the Name field, make sure you only edit characters inside the bracket. This will be the field label that appears in the submitted form.


*Note that all labels have to be unique.


Configure the Settings tab

The Settings tab contains all the tools you need to set up the contact form.


Submit Callback URL

The Submit Callback URL section allows you to redirect users to another page after successfully submitting the signup form. 

Simply enter the URL in the field below. If left blank, users will stay on the exact same page after form submission.

For more options, click on the “Pick Link” button to open the Link Picker panel. In here, you can:

  • Redirect viewers to another page on your store by browsing the Pages, Collections, Products, or Articles tab.
  • Jump to a specific spot on the same page by browsing the Scroll to tab (see this article for detailed instructions).

Once you're done with the link, choose to have it opened in the current tab or a new one using the Target drop-down menu.


When done, hit the "Save" button to complete the settings.



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

Enter the text into the Success Message field, then choose a color for it by entering the hex color code into the Success Color field below.



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

Similar to the Success message, you can edit the text and the color using the two fields.


HTML Hex Color Code is a great tool for you to help get the hex code for the color you need.


Configure the Design tab

The Design tab is where you can fine-tune the contact form’s appearance. Please read this article for a full overview.

When you are happy with the way your contact form looks, hit “Save” and “Publish” to bring the update to your front store!


Access your form submissions

All form submissions will be sent to your email’s inbox. Depending on your email provider, you might want to check for the Junk or Spam folder as well.

In order to find or change the destination email address in Shopify, go to Shopify Admin > Settings > Store details. Under the Contact information section, the email that is annotated with "Customers see this if you email them" is the inbox that will receive form submissions.


You can change this email address by hitting "Edit". 



Then hit "Save" afterward.



Turn On/Off Google ReCAPTCHA

As a spam protection technology, Google reCAPTCHA is turned on by default for all Shopify stores. This means customers will have to complete a reCAPTCHA test every time they want to submit a form.

If you want to, you can turn off this security policy to make form-filling faster for your customers.

Head to Shopify Admin > Online Store > Preferences, uncheck the two options under the Spam protection section, then hit "Save".



For any further assistance you need, please feel free to contact our GemPages Support Team at any time via email or live chat.

Was this helpful?