[V6] Newsletter element

This article will explain to you what the signup form is and how to implement one onto your page with the Newsletter element.

What is a Signup form?

When browsing an online store, you might have encountered a form asking you to submit information in exchange for some kind of free product, or urging you to subscribe to weekly newsletters. These are called signup forms. With the right execution, signup forms can contribute greatly to the store’s growth. The collected data can be used to expand your customer base, fuel your upcoming marketing strategies, and lead to future sales.

In GemPages, the signup form is represented by the Newsletter element.

Add the Newsletter element to your page

Step 1: In the GemPages Dashboard, select one of your pages and enter the Editor via the “Edit” button.

Step 2: Search for the Newsletter element and drag & drop it onto your preferred spot on the page. You will see that it already comes with some elements nested inside.

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

Be noted that all elements inside the Newsletter are mandatory for it to function correctly. This includes the Text Block, Text Field, Email Field, and Submit Button elements.

For the Email Field element, you have the option to hide the element from the live page (It still loads up but is 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.

Add a custom field to your Newsletter

The Newsletter element represents Shopify’s signup form, and therefore its fields are limited. For this reason, unlike the Contact Form element, we cannot simply add the Text Block and Text Field elements to create custom fields.

Few extra steps are needed. Here are the instructions:

Step 1: Drag & drop a Text Block and Text Field elements inside the Newsletter, edit the Text Block‘s content as the field’s label.

Step 2: Click on the Text Field element to start configuring it.

Step 3: In the Settings tab on the left sidebar, select the Name section to edit the name of the Text Field

Step 4: Use this exact format:

contact[note][XXXXX]

In that, XXXXX will be the label that shows up in Shopify Admin > Customers for you to see after a customer has subscribed to the signup form.

All labels have to be unique.

In this example, let’s call it “Favorite color”

Here’s how the information will display when customers subscribe to your Newsletter:

You can create as many custom fields as you need for the Newsletter signup form using this method.

Configure the Settings tab

The Settings tab is where you’ll find all the necessary parameters to set up your Newsletter signup form.

Submit Callback URL

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

Simply input the URL into the field below. If left blank, users will stay on the 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 them 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.

Lastly, hit the “Save” button to complete the settings.

Success

This section allows you to customize the message displayed after customers successfully fill in the form.

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.

Error

This section lets you edit the error message when customers can’t complete 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 select a color and copy its code.

Configure the Design tab

To fine-tune the look and position of the element, please switch over to the Design tab and follow the instructions in this article.

When you’re all done, remember to hit “Save” and “Publish” to bring the Newsletter to your live store!

Turn on/off Google reCAPTCHA

As a spam protection technology, Google reCAPTCHA was set as default on all Shopify stores. This means customers have to complete a reCAPTCHA task every time they submit a form.

However, you can turn off the tool 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“.

Access your Customers’ email list

Once a customer successfully submitted the form, their email address will be collected and stored in your Customer section under the Shopify Admin panel.

Go to Shopify Admin > Customers and see a list of all the emails subscribed through the signup form.

If you don’t currently have any customer data, there will be two options to Add Customers or Import Customers on this page.

Check out this Shopify article for more information on how to manage and email your customers.

And there you have it! Feel free to explore more of our articles to master GemPages in no time.