Creating List Builder Forms
Estimated read time: 15 mins
4 Designing and Customizing your Form
5 Configuring your Form's Visibility
If you're looking to get started with List Builder, you came to the right place! This article covers how to use List Builder in seven easy steps, and then you're all set for collecting your subscriber emails!
Before we can start, you need to have Sumo installed and activated. If you need help with that, click here.
1) Creating a New Form
1 Before we can dive into List Builder, we need to be logged in to Sumo. In order to do this, navigate to your Sumo Sites, then click on the Manage button next to the Site you want to work on.
2 After you log in, select Forms, then Create New Form or Create Form.
2) Selecting your Goal
1 When setting up your Form, you will need to choose one of the following Goals:
- Collect Emails - Choose this option to collect the email addresses, as well as any other information you wish to collect from your visitors, into your email list.
- Add a Call to Action - Choose this option to direct visitors to a specific URL or to offer a downloadable file (also known as a Content Upgrade).
- Get Social Shares - Choose this option to build your presence and following on these major social media platforms: Facebook, Twitter, and Pinterest.
- Collect Info With Custom Code - Choose this option to display your own HTML/CSS Form.
Note: Conversions cannot be tracked with custom Forms and JavaScript is not supported.
2 We're going to focus on building your email list first, so let's choose Collect Emails.
3) Choosing your Form Type
1 From banners to popups to Inline Forms, List Builder has a number of different Form Types to best capture the attention of your site visitors. There are five different Form Types to choose from:
- Popup - Choose this Form to display a popup in the center of the page. This can be set to appear based on a manual timer or when visitors attempt to leave the page.
- Scroll Box - Choose this Form to display a popup in one of the corners after visitors scroll down a certain percentage of the page.
- Inline Form - Choose this Form to insert an HTML code snippet that displays as an embedded Inline Form.
- Click Trigger Popup - Choose this Form to create a popup that is triggered by clicking on an element on your page: a button, text, or images.
- Smart Bar - Choose this Form to display a banner at the top or bottom of your page.
2 For now, let's go over our most popular Form Type, the Popup.
4) Designing and Customizing your Form
In this section, we're going to cover how to design your new email list building popup!
1 We have numerous pre-made templates for you to choose from. Feel free to pick a template as a starting point: they're all customizable, allowing you to have the most control in matching your Form's design to the overall feel of your site.
2 Once you've decided on one of the pre-made templates, select it by clicking on it. It's been selected when the border around it turns green.
3 Select a Form Size - The display size always matches the widest or tallest element in your Form, and scales for the selected chosen size (For Example: If you choose Medium - 512px, and the Form is tall, it is going to have a maximum height of 512px and scales the width to the correct ratio for the Form. If you have a wide Form and choose Medium - 512px, then it is going to have a maximum width of 512px and scales the height to the correct ratio for the Form).
4 Customize your Form with the WYSIWYG editor. Be sure to change all of the text to fit your website: using your own copy be more engaging for your visitors!
5 When adding images to your form, it is important to ensure you use an image file size between 100kb-400kb. This will help ensure the image is loading at optimal speed and doesn't cause images to load slowly on your form.
6 Almost every part of the popup can be customized. Try it out and have some fun with it! Click here for an in-depth walkthrough on our WYSIWYG editor.
5) Configuring your Form's Visibility
1 Hey, your Form is starting to look pretty awesome! Now let's make sure that your visitors can see it at the best possible time by customizing exactly when your Form appears on your site.
2 You can leave your Form in Smart Mode and we'll optimize the timing of your Form's visibility for you. For some extra customization, you can click on Manual Mode to make additional tweaks.
3 In Manual Mode, you can switch between two options: Timed (which is when a Form appears after a certain amount of time passes) and User Leaves (which is when a Form shows at the time a visitor tries to leave your site).
4 With Display Rules, you can determine exactly where on your website the Form appears, and the Advanced Settings allow you to further customize your Form behaviors. For our purposes, we will be leaving these options at their defaults and moving on.
6) Configuring your Form's Success Events
1 The Success tab is where you can determine what happens after a conversion happens.
2 You can set up an automatic email response for new subscribers, add a content upgrade, a redirect to a specific URL, add Tracking Pixels or send the new subscribers to a specific Group created in Sumo! Feel free to explore the linked content for more information on setting up these features.
7) Connecting Your Form to an Email Service
1 You can set a default list by clicking your Profile picture > Settings > Integrations, but if you want to connect a Form to a different list, enable the Override Global Settings toggle.
