Follow

Features & Capabilities

List Builder give you the ability to create forms on your site to collect subscribers, grow social traffic and drive traffic to a certain page using a call to action. With multiple form types from Smart Bars to Inline forms, you can build the best forms for your site.


Creating List Builder Forms

Once you understand the different List Builder Forms, the next step is to create your Forms. In the Form creation process, you will choose your goal, select your form type, design your form, choose how and where you want your popup to display, setup success actions and connect to an Email Service Provider.

My Goal

When creating a new List Builder form, you will need to start by choosing a goal.. You can choose between these 4 goals:List-Builder-Choose-Goal.png

  • Collect Emails: This goal can be used if you want to collect email addresses and other subscriber information such as Name and Phone Number. By default, your popup with only show the email field to start, but you can add more fields later in the design process.
  • Add a Call to Action: This goal can be used if you want to have a Call To Action button on a popup that visitors can click and be redirected to a URL that you specify. This can be used if you'd like to drive your visitors to a specific URL or even a PDF/download.
  • Get Social Shares: This goal can be used if you want to increase your social traffic through Twitter, Facebook or Pinterest. You can drive your website visitors to like your Facebook page or follow your Twitter account by using this goal.
  • Collect Info With Custom Code: This goal can be used if you have custom HTML code that you created that you want to use to completely customize your popup. If you have a custom HTML form from a service such as MailChimp or AWeber that you want to use to collect subscriber information, this is the goal you should use.*Note: Only HTML/CSS code can be used in the Custom Code section. We do not support Javascript or any other advanced backend languages in the Custom Code section.

Form Type

The Form Type in List Builder will determine how the form will display on your website. You can choose between these 5 form types:List-Builder-Choose-Form-Type.png

  • Popup: This form type displays the form in the middle of your webpage which can be set to trigger after X amount of time or or when a user is leaving your site.
  • Scroll Box: This form type is displayed based on a custom scroll percentage that you can set. The Scroll Box Form can also be set to display from any corner of your webpage.
  • Inline Form: This form type is used if you want the form to show inline with the other content on your webpage(s). You have the option to either have Sumo auto-embed the form on your website pages OR you can grab the code snippet that Sumo provides and place it in your website code where you would like it to display.
  • Click Trigger Popup: This form type is used to make an element on your website, such as a button or group of text, a trigger for List Builder popup. Once you add the Click Trigger code you are provided to the HTML of a button or group of text, once clicked, it will display your popup in the middle of the screen.
  • Smart Bar: This form type is used to display a sticky, static or smart mode bar at the top or bottom of your webpage.

Design

The Design tab in the Form editor is where you make all of your design edits. This is where you will change templates, colors, text, fields and much more. The first step in designing your form is choosing your Template and adjusting the Size of your form.List-Builder-Design-Form1.png

The List Builder editor uses an advanced drag-and-drop editor. In the Design tab, at the top you will see 2 options labeled Hidden Field and Add New.

  • Hidden Field: Hidden Fields can be used to collect information on your popup without an actual field showing on the form itself. This allow you to collect additional subscriber information such as the URL where subscriber subscribed and the popup name. You can read more about all of our hidden fields here.
  • Add New: This will dropdown of all of the element you can add to your popup such as text, input field, countdown timers and much more.List-Builder-Design-Form2.png

You can edit a certain element on your form by simply clicking on that element and a design window will display on the left for that specific element. For example, if you click the button element on your form, you will see options on the left to change that buttons color, action, font and more. When you have a certain element selected, you can also choose to duplicate or delete it in the top bar.List-Builder-Desig-Form3.png

After you finish designing your form, you can design the Success form as well that displays after a visitor successfully subscribes via your form. You can toggle over to the Success form in the design tab by selecting Success at the very top.List-Builder-Design-Form4.png

 

Visibility

The Visibility tab is where you can specify when and where your forms should display. You can either choose Smart Mode, in which Sumo will choose the best time and place to display your form OR Manual, in which you can choose the settings to determine when and where your form will display. The Visibility page will have different settings depending on the Form Type you select.

 

Popup Form Visibility Page

The Popup form has 2 display options, Timed or User Leaves.

  • Timed: This allows you to set your form to display after X amount of seconds or minutes.
  • User Leaves mode will display your popup to a visitor when Sumo detects they are attempting to leave your website.In both modes, you can also set the popup to not show to the same visitor until X amount of time has passed.List-Builder-Vis-1.png

The next section you will see is the Display Rules section.

  • Display Rules: This is where you can set specific rules such as which pages or under which circumstances your popup should show on. You can read more about the different types of Display Rules here.

List-Builder-Vis-2.png

The last section is the Advanced Settings section. There are 4 options that you can set:

  • Show To Users Who Already Subscribed: This option allow you to decide whether or not you want your forms to display to visitors who have already subscribed via Sumo.
  • Hide From Users Who Opted Out: This options allows you to decide whether or not you want to hide the form from visitors who have opted out.
  • Yield Tech: This option is used to have your form yield to other Sumo forms on your site. It's purpose is to only allow 1 form to show per page load as to not annoy your visitors.
  • Subscriber Notifications: This option will allow you to receive notifications in the Sumo notification center when visitors subscribe.List-Builder-Vis-3.png

 

Scroll Box Form Visibility Page

The Scroll Box has 3 different parts of the display options you can configure:

  • Show Scroll Box after user has scrolled this percent: This is where you set the percentage in which you want the user to scroll in order to trigger the Scroll Box.
  • Stick Scroll Box to this corner of the screen: This option allows you to choose which corner of the screen you want the Scroll Box to display.
  • Slide Scroll Box in from this side: This options allows you to choose the side the Scroll Box slides in from. If you choose the Top Left corner, you can then choose if they Box should slide in from the top of the screen or the left of the screen. 

List-Builder-SB-VIS1.png

The next 2 sections you will see are the When and Display Rules sections:

  • When: This section allows you to set the popup to not show to the same visitor until X amount of time has passed.
  • Display Rules: This section allows you to set specific rules such as which pages or under which circumstances your popup should show on. You can read more about the different types of Display Rules here.List-Builder-SB-VIS2.png

The last section is the Advanced Settings section. There are 4 options that you can set:

  • Show To Users Who Already Subscribed: This option allow you to decide whether or not you want your forms to display to visitors who have already subscribed via Sumo.
  • Hide From Users Who Opted Out: This options allows you to decide whether or not you want to hide the form from visitors who have opted out.
  • Yield Tech: This option is used to have your form yield to other Sumo forms on your site. It's purpose is to only allow 1 form to show per page load as to not annoy your visitors.
  • Subscriber Notifications: This option will allow you to receive notifications in the Sumo notification center when visitors subscribe.

List-Builder-Vis-3.png


 

Inline Form Visibility Page

The Inline Form type has two embed options you can choose front, manual or auto-embed: 

  • Manual Embed: The Manual embed option allows you to copy the embed code that is provided and place it manually in your webpage HTML code where you would like it to display. This gives you the ability to control exactly where on your page the form display.
List-Builder-IL-VIS1.png
  • Auto Embed: This option allows Sumo to place that form automatically for you on your pages and you can choose a percentage to determine how far down the page this popup will be embedded. Auto-embedded popups also give you the option to add Display Rules. *Visibility options such as Display Rules and Frequency only apply for auto-embedded popups.

List-Builder-IL-VIS2.png

The last section is the Advanced Settings section. There are 3 options that you can set:

  • Show To Users Who Already Subscribed: This option allow you to decide whether or not you want your forms to display to visitors who have already subscribed via Sumo.
  • Hide From Users Who Opted Out: This options allows you to decide whether or not you want to hide the form from visitors who have opted out.
  • Subscriber Notifications: This option will allow you to receive notifications in the Sumo notification center when visitors subscribe.

List-Builder-IL-VIS3.png


 

Click Trigger Popup Visibility Page

In order to use the Click Trigger function, you will first need to create a new click trigger in order to get the code. On the Visibility page, you will just want to click on the "Add Another Click Trigger" button, name your Click Trigger and then click save.List-Builder-CT-Visibilty1.png

Once you create your Click Trigger you can copy the code to place in the HTML code of the element you want as the Click Trigger on your site.List-Builder-CT-Visibilty2.png

The last section is the Advanced Settings section. This is where you can choose to turn on/off notifications within Sumo when you get a subscriber via that Click Trigger form.List-Builder-CT-Visibilty3.png


 

Smart Bar Form Visibility Page

The Smart Bar form has multiple visibility options you can set. You can choose between 3 Smart Bar behaviors (how they will function on your site):

  • Sticky: Smart Bar moves along with the reader as they scroll your site
  • Static: Smart Bar does not move along with the reader
  • Smart: Smart Bar will hide when scrolling down and show when scrolling up

You will also be able to choose if you want the Smart Bar form to display at the top or bottom of your webpage.List-Builder-SB-Visibilty1.png

The next 2 sections you will see are the When and Display Rules section:

  • When: This section allows you to set the popup to not show to the same visitor until X amount of time has passed.
  • Display Rules allow you to set specific rules such as which pages or under which circumstances your form should show on. You can read more about the different types of Display Rules here.

List-Builder-SB-Visibilty-2.png

 The last section is the Advanced Settings section. There are 3 options that you can set:

  • Show To Users Who Already Subscribed: This option allow you to decide whether or not you want your forms to display to visitors who have already subscribed via Sumo.
  • Hide From Users Who Opted Out: This options allows you to decide whether or not you want to hide the form from visitors who have opted out.
  • Subscriber Notifications: This option will allow you to receive notifications in the Sumo notification center when visitors subscribe.

List-Builder-SB-Visibilty-3.png

Success

The Success section is where you can control all of your success events and how your form is being tracked.

  • Automatic Email Responder: This can be used to send a user an email after they subscribe. You can find more information about setting up the Auto Email Responder here.

List-Builder-Success-AR.png

The Subscribe Success Redirect section allows you to either redirect your subscriber or give them a download:

  • Download Content Upgrade: This will allow you to have a file that you choose automatically download for a user after they successfully subscribes.

List-Builder-AR-Success-SSR.png

  • Success Redirect URL: This will allow you to redirect the user to a specific URL you choose after they successfully subscribe. You also have the option to pass the subscribers email address to this Success Redirect URL using the POST or GET method.

List-Builder-AR-Success-SSR2.png 

Connect to Email Service

You can connect your form to one or multiple of the many Email Service Providers we provide integrations for. Choose your email service from the list, connect, select a list and Save. If connecting within the popups themselves, make sure you change the toggle at the top of your service window from Global over to Campaign instead so that list will save.List-Builder-ESP.png

⇈ back to top

Managing List Builder Forms

Once you start creating forms, it will be important to know how to manage them. List Builder has many management features that will allow you to set the state of forms, edit and rename forms, cloning forms and downloading the CSV list of subscribers.

Controlling Form State

Once you have a form created, you can set the state of the form. This means you can choose to have the form Live on your site or paused. You will see a button on all of your popups that will either say Pause Form (meaning that form is live) or Make Form Live (meaning that popup is paused).List-Builder-form-state1.png

Editing and Renaming Forms

There are two ways that you can open an existing form to make edits. You can either click on the title of the form on the far left OR you can click on the Edit button on the right.List-Builder-edit-form.png

You can change the name of your forms as well by hovering over the dropdown next to the edit button and selecting the Rename option.List-Builder-edit-form-2.png

Cloning Forms

List Builder gives you the ability to clone existing forms. This can be used if you have a popup that you like and want to make modified version of without putting it into a test. You can clone a popup by hovering over the dropdown next to the edit button and selecting the Clone Form option.List-Builder-clone-form.png

Downloading Form CSV's

Sumo stores all emails collected through your forms in a CSV file. You have two options to download your CSV file. The first option is to download the individual CSV for your forms by hovering over the dropdown next to the edit button and selecting the Download CSV option.List-Builder-CSV1.png

The other option is to download the full CSV file of all emails you have collected in the List Builder app. You can do this by going to the Stats tab and the top and then clicking on the Download CSV button in the top right corner.List-Builder-CSV-2.png

⇈ back to top

Creating A/B tests

Setting up tests

1. Open the List Builder app and go to the Tests tab at the top then click on Create New Test buttonList-Builder-create-test.png

2. Select the popup that you would like to create a test with and then click Start TestList-Builder-create-test2.png

3. Next, you will be taken to the popup design screen. This is where you will design a variant of your popup to test with. Once you finish your design edit on this screen, just click Save and Exit at the bottom right.List-Builder-variant-create.png

4. That's it! Your test is now created and running on your website.

Managing tests

Creating your tests it just the first step, you want to make sure you manage and monitor them as well. There are many important parts of managing your tests. The first thing you will want to do after creating your test is set the chance that each of the popups in the test has of displaying to your visitors. By default it will be set evenly across forms in the test, but you can change it as you'd like.List-Builder-variant-test1.png

The next important part of your tests is the Test Stats section:

  • Views: How many times each Form was viewed
  • Conversions: How many times each Form converted (email submitted or call to action clicked)
  • Conversion rate: The percentage of Forms viewed that converted
  • Statistical Significance: Shows how accurate the results of your Test are. You shouldn't end a test with lower than 95% statistical significance in order to make sure the results are useful.
  • Improvement: Baseline is the base Form you're testing against Variants. Each variant will show a percentage compared to the baseline's performance.

List-Builder-variant-test2.png

Choosing which form you ultimately want to use and ending the test is the final step of managing a test. It is important to know that once you click the Use This button on one of the forms of a test, that form becomes the main form and the other variants/forms in that test will no longer be accessible. If you have a variant/form that you'd like to make its own form that you can use separate from that test, you can copy it as a form. To do this, hover over the dropdown next to the edit button on the variant and select the Copy as Form option.List-Builder-variant-test3.png

 

⇈ back to top

Viewing Stats

List Builder collects stats on all of your forms and they can all be seen by going to the Stats tab at the top.List-Builder-stats1.png

  1. Time Span/Form Filter: This section allow you to filter to view different date ranges and choose between overall form stats or the stats for your individual forms.
  2. Download CSV: This button allows you to download the CSV file of email subscribers you have collected in List Builder.
  3. Views: How many times each Form(s) was viewed
  4. Emails Collected: How many email addresses have been collected in your Form(s)
  5. Clicks: How many clicks have been made on your Call To Action button on your Form(s)
  6. Average Conversion: The average percent of views that result in a conversion for your Form(s)
  7. Graphical Representation: Here you can see the above stats in graph form over the time span you have selected

list-builder-stats--01.png

⇈ back to top

Frequently Asked Questions

  • Why is my list not saving after I select it?

The reason your selection keeps reverting back to --Don't push to list-- is becuase you are using the Global settings. If you open your Sumo dashboard of apps and then go to the "Integrations" app, you can select your service and select the list you wish to push to. Once you do this and save, it will push these settings to ALL of your apps, so you do not have to connect them 1 by 1. If you want to connect a popup to a different list than the global list, you will just want to make sure when connecting within that app (not integrations app) you change the "Global" toggle on the page where you select your list to "Campaign" instead.

  • How do I setup the Auto-responder?

We have an awesome article that covers this here!

  • How will Google's change to mobile SEO affect List Builder forms on my site?

We cover all of this in our Google Mobile User Experience article here!

  • What do all of the Display Rules do?

We cover all of our Display Rules here!

  • How do I setup a Google Analytics pixel for my form?

We have an awesome guide that shows you how to set your pixel up here!

⇈ back to top

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.