Design Newsletter Signup Form Using Newsletter Element

About Newsletter Form Element

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

It’s ideal for creating opt-in forms to collect customer emails, supporting your marketing campaigns, and building lead-generation landing pages.

You can drag and drop additional Form Fields elements from the element list on the left sidebar into the Newsletter element to create a form with the information fields you desire.

To learn more about the Newsletter Element, you can check this article: Contact Form Element.

Design a Newsletter Signup Form Using the Newsletter Element with GemPages

Step 1: Drag and drop the Newsletter element to the appropriate position on your page.

By default, the Newsletter form element already has the basic components, but you can completely change or delete elements inside the contact form.

In this case, you can right-click on each element and select “delete”, we can build a contact form from scratch.

Step 2: Create Newsletter Form layout.

You can drag and drop a Row element into the Contact form and configure it to be 2-column.

Step 3: Drag and drop the input components of the Form.

In this case, the main purpose of the Newsletter Signup form is to get email leads, so we will drag and drop the Email Field element from the left sidebar to the first column.

Step 4: Drag and drop the Submit Button

Drag and drop the Submit Form Button element to the second column.

This is a necessary button for customers to submit the form and send information to your Shopify Admin.

Step 5: Adjust Column Layout accordingly

By right-clicking on the email field element, you can choose “Select parent element“>> then select “Row 2 cols”, and configure the Row element, which contains both the Email Field and the Submit Button we created in the previous steps.

You can learn more about Row settings in the article: Use Row to Build the Desired Layout

In Column Settings, you can adjust the size of the column containing the Email Field and the column with the Submit Button, along with various other configuration options.

Step 6: Configure Contact Form Settings.

For example, you can configure the following options:

• After Submit: Choose whether customers stay on the current page or are redirected to a specific URL or page after submitting the form.
• Success Message: Display a message to confirm successful form submission.
• Error Message: Show an alert if an error prevents the Shopify system from sending the email.

Create a Newsletter Signup Form from the Template Library

You can also create a contact form from the pre-built templates/sections in the Library.

Step 1: Access the Template Library, by clicking on the Library Icon on the left sidebar.

Step 2: Search for the keyword “Newsletter” in the template library.

Step 3: Insert the desired Section into the Page.

In the coming days, our team will continuously add more suitable layout styles and contact sections to the library to help you save design time.

If you have any requests, feel free to direct them to: https://feedback.gempages.net.