1 Forms

a Forms Dashboard

b Form Editor

c My Goal

d Form Type

e Design

f Visibility

g Success

h Connect to Email Service

2 Tests

3 Stats

Forms

Forms Dashboard

The Forms Dashboard is the first section of the List Builder tool. This is where the creation as well as the overall management of your Forms take place.

In order to access this, click Forms in the navigation menu of your Sumo installation.

At the top is a Search Bar that you can use to look for specific Forms you have already created. There is also a dropdown menu right next to it for different filters that you can apply to your search.

You can filter your pre-existing Forms based on their current status:

1 Active

2 Paused

3 Deleted

You can also filter for Variants from any of your A/B tests, as well as for any Legacy Forms that you imported from previous versions of List Builder.

Filters for all Form Types are also included:

1 Popup Scroll Box

2 Inline Popup

3 Click Trigger

4 Welcome Mat

5 Smart Bar

Forms List

You can rearrange your Forms List by clicking on any one of the following columns: Type, Last Edited, Views, Conversions, Conversion Rate, Test Variants, and Auto Resp. On/Off (whether or not Auto Responder is turned on).

Next to each Form listed are the following features:

1 Pause Form Button: Selecting this button will pause the Form.

2 Edit Button: Selecting this button will take you to the Form Editor.

Options dropdown menu:

1 Rename: this option gives you the option to change the name of the Form.

2 Clone Form: this option opens the Form Editor and creates a duplicate of the Form.

3 Create Test: this option opens a new Variant of the form in the Form Editor.

4 Download CSV: this option allows you to download a CSV file with all of the subscriber information gathered from this Form.

5 Delete: this option deletes the Form.

3 Create New Form: this option takes you to the Form Editor to work on a completely new Form.

List Builder Form Editor

1. My Goal

The first tab here is for choosing the goal of your Form from the following four options:

1 Collect Emails

2 Add a Call to Action

3 Get Social Shares

4 Collect Info With Custom Code

2. Form Type

The second tab is where you choose the type of Form you want to use on your website:

1 Popup: This Form Type displays in the middle of your webpage. It can be set to trigger after a set amount of time or when a user is leaving your site.

2 Scroll Box: This Form Type displays based on a customizable scroll percentage. The Scroll Box Form can also be set to display on any corner of your page.

3 Inline Form: This Form Type shows inline with the other content on your website. You have the option to either have Sumo auto-embed the Form on your site pages, or you can place the code for the Inline Form yourself where you want on the page.

4 Click Trigger Popup: This Form Type turns an element on your website into a click trigger for List Builder popups. Once you add the Click Trigger to your code, it displays your popup in the middle of the screen when clicked.

5 Welcome Mat: This Form Type fills the entire page. You can customize both its Landscape and Portrait versions (the Portrait version is where you can make mobile-specific optimizations).

6 Smart Bar: This Form Type displays a sticky, static, or smart mode bar at the top or bottom of your pages.

3. Design

The third tab is where you tweak the overall look and feel of your Form.

I. Templates

We offer over forty beautifully designed and optimized templates to choose from. They can be easily customized to suit your needs.

II. Size

The size only determines the largest dimension of the Form, so it will keep the same ratio while scaling for the chosen size. For example, if you choose Medium, which shows 512px as its size, then tall Forms will only be a maximum of 512px in height, and wide Forms will be only a maximum of 512px in width.

Here is a breakdown of all of the different sizes available based on Form Type (except for Welcome Mat, since it takes up the space of the entire page):

III. Animation

For Popups and Click Triggers Popups, you have the option to add an animation while those Form Types load on the page. We have 16 different animations to choose from, so feel free to play around with each and see which fits best.

IV. Include a Tab

You have the option to include a clickable tab along with your Popup form, which you can set to show either before the form is shown or after it is closed. This tab can be set to show in any of the corners as well as the top/side of your pages. Here is how to set it up:

1 Toggle on the Include a Tab option that shows in the design tab under the templates section.

2 Once toggled on, you will see the tab appear over in the right pane above the form preview. Click on that tab to get started editing it.

3 Look in the left pane and you will now see the options to customize your tab. This includes the ability to change when the tabs starts displaying, the location of the tab, shape of the tab, color etc.

V. Customization

The Forms Editor offers the following customization options:

Hidden Fields: These are fields that collect information while remaining unseen from your site visitors. You choose a Variable Name, a Variable Value, and whether or not to have it sync with an email address. Here are the pre-existing Variable Values you can choose from:

Add New: This option allows you to add the following elements to your Form, depending on its Form Type:

Layout: This option is specific to Welcome Mat. You have three different options for how you want to align the content of your Welcome Mat:

1 Single Column, Centered

2 Single Column, Left

3 Single Column, Right

4. Visibility

This tab determines how and when the user sees your Form.

1 Smart Mode: this mode uses the default settings per Form Type, without any Display Rules.

2 Manual Mode: this mode allows you to set the exact time or event that triggers your Form.

I. Popup Visibility

Under the When section of this tab, you can choose between the Timed option, or the User Leaves option.

1 Timed: this setting allows you to choose how long after the page loads for the user to see the Form. You can also set the Form to show based on the last time the user has seen a popup, or to have it always show regardless.

2 User Leaves: this setting will have the Form appear when the user leaves your site. Like the Timed setting, you can also set the Form to show based on the last time the user has seen a popup, or to have it always show regardless.

The option above allows you to decide whether or not to show the Form to the user when they leave the site, based on the period of time that has passed since they last saw a popup.

II. Scroll Box Visibility

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

1 Show Scroll Box after user has scrolled this percent: This is where you set the scroll percentage in order for the Scroll Box to trigger.

2 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.

3 Slide Scroll Box in from this side: This option allows you to choose the side the Scroll Box slides in from. If you choose the Top Left corner, you can then choose if the Box should slide in from either the top or the left of the screen.

Under the When section, you can set the Scroll Box to not show to the same visitor until a certain amount of time has passed, or to always show the Scroll Box regardless of whether the visitor has already seen it.

III. Inline Form Visibility

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

1 Manual Embed: The Manual embed option allows you to copy the provided embed code and place it where you would like it to display in your site's HTML.

2 Auto-Embed: Under the phrase "Or would you like us to automatically embed this popup for you?" is a toggle for you to turn on the Auto-Embed option. This option allows Sumo to place that form automatically for you on your pages. You can choose a percentage to determine how far down the page this popup is embedded.

IV. Click Trigger Visibility

The Visibility section for Click Triggers allows you to add any additional Click Triggers.

After you create a Click Trigger, you can copy the code of your Click Trigger to add it to any HTML element on your site that you desire.

V. Welcome Mat Visibility

Under the When section, you can set the Welcome Mat to not show to the same visitor until a certain amount of time has passed, or to always show the Welcome Mat regardless of whether the visitor has already seen it.

Under the How section, you can set an option to prevent visitors from scrolling while the Welcome Mat is visible.

Also available under this section is a Display Mode for changing the display behavior of your Welcome Mat. You can choose between the following 3 options:

1 Normal: This option will have Welcome Mat display regardless of whether the user tries to scroll down the page.

2 Embedded: This option allows you to set where exactly your Welcome Mat should be placed on the page, with the user scrolling away from it. Simply put the following span tag in your code for wherever you want your Welcome Mat to display:

<span class="sumome-welcomemat-anchor"></span>

3 Parallax: This option will slowly have Welcome Mat crawl upward as the user scrolls down the page.

Note: For both Embedded and Parallax, the highest that a Welcome Mat will ever show is below the fold. Make sure you put your embed code for the Embedded option where it will appear just below the fold on your site.

VI. Smart Bar Visibility

1 Sticky: Smart Bar moves along with the reader as they scroll your site. Static: Smart Bar stays static.

2 Smart: Smart Bar hides when scrolling down and shows when scrolling up.

You will also be able to choose if you want the Smart Bar to display at the top or bottom of your webpage.

I. Display Rules

Here you can add new rules as to when your Form should and shouldn't appear on your site, as well as load any particular set of rules you may have already created. For an in-depth guide on Display Rules, click here.

II. Advanced Settings

There are 4 options here that you can toggle on or off:

1 Show To Users Who Already Subscribed: This option allows you to decide whether or not you want your Forms to display to visitors who have already subscribed via Sumo.

2 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. Users are opted out after using a button that has a Click Action set to Opt-out, which then sets a cookie on the user's browser to hide the Form.

3 Yield Tech: This option is used to have your Form yield to other Sumo Forms on your site. Its purpose is to only allow one Form to show per page load to prevent annoying your visitors.

4 Subscriber Notifications: This option allows you to receive notifications in the Sumo notification center when visitors subscribe. You can find your Notifications in two places in the screenshot below:

5. Success

This tab allows you to set up any additional events that should happen after a visitor successfully subscribes to your email list.

I. Automatic Email Responder

This feature allows you to send an email to a visitor after they successfully subscribe.

II. Add New Email: selecting this button will take you to an editor where you can design an email that you would like your subscribers to receive.

The dropdown menu next to Add New Email offers the following ready-made template options:

1 Content Upgrade Template: this template allows you to send your new subscriber a Content Upgrade.

2 Coupon Code Template: this template allows you to send your new subscriber a Coupon Code.

3 Welcome Template: this is the default template with a general welcome message for your new subscriber.

III. Subscribe Success Redirect: use this setting to decide which event you want to happen after the user successfully subscribes:

1 Download Content Upgrade: use this option to allow the user to download content of your choosing.

2 Redirect URL: use this option to redirect the user to a specific URL.

IV. Add Subscribers To Group: use this feature if you wish to send subscribers to a specific group created in Sumo

V. Pixel Code

This Pro feature offers three different options for adding pixel code to your site. You can add IMG, IFRAME, or SCRIPT tags (e.g. Google Analytics tracking code) to any of the three options below:

1 Tracking Pixels: This Pro feature is where you can add code that fires once a visitor is shown the Form on your site.

2 Subscribe Pixels: This Pro feature is where you can add code that fires once a visitor subscribes to your email list. You can set a placeholder token to grab the subscriber's email (e.g. {sumome-subscriber-email}).

3 Click Pixels: This Pro feature is where you can add code that fires once a visitor clicks a Call to Action. It will only fire on the first click action done by the visitor.

6. Connect to Email Service

You can hook your Form to a wide variety ESPs. Most of them are available on the Free plan, but some advanced ones require a Pro subscription. See here for our full list of ESPs.

Tests

The Tests Dashboard is the second section in List Builder. This is where the creation as well as the management of your tests take place.

Tests Dashboard

At the top is a Search Bar that you can use to look for specific Tests you have already created.

You can rearrange your Tests List by clicking on any one of the following columns: Name, Type, Views, Conversions, Conversion Rate, Statistical Significance, Improvement, and % of Traffic (this refers to how the Variant is weighted).

If you have no pre-existing Tests on the dashboard, you can see a link at the bottom that says "Click here to create your first test and start A/B testing." This takes you to another screen that prompts you to select a Form to create a Test from, and after that you are taken to the Forms Editor to work on the new Variant for your A/B Testing.

Next to each Variant, you can see the following options:

1 Use This : Select this to declare a winner from your testing. Note that once you do this, any other Variants for this test become unavailable.

2 Edit : Select this to enter the Forms Editor and make additional changes to the Variant.

Next to the Edit button of each original Form Variant within a test is a dropdown menu that offers the following options:

1 Rename: Choose this to change the name of the Variant.

2 Clone Variant: Choose this to make a duplicate of the Variant for your to work off of in the Forms Editor.

3 Delete Test: Choose this option to delete the entire test.

Next to the Edit button of each Test Variant is another dropdown menu, with slightly different options:

1 Rename: Choose this to change the name of the Variant.

2 Clone Variant: Choose this to make a duplicate of the Variant for your to work off of in the Forms Editor.

3 Copy as Form: Choose this option to make a separate Form copy of this Variant in the Forms Dashboard.

Below each test are the buttons Add New Variation and View Stats Graph:

Add New Variation takes you to the Form Editor to work on a new Variation for the test, and View Stats Graph reveals the Stats Graph for the test.

Finally, on the top right corner is the button for Create New Test. Click this, and you will be asked for a Form to base your test on, and then be taken to the Form Editor to make tweaks to the new Variation. Feel free to refer to the Forms Editor section for more information on making edits to your Variant.

Note: If your original Form Type that you based your testing on is a Popup, a Scroll Box, or a Smart Bar, you can change your other Variants' From Types to any one of those three options. However, if your original Form Type was an Inline Form or a Click Trigger, then you cannot change the Form Type of your subsequent Variants in your testing.

Stats

The Stats Dashboard is the third section in the List Builder tool. Here you can see a complete breakdown of your site's List Builder stats as well as the option to download your Stat History.

Stats Dashboard

The first dropdown menu in the top-left allows you to filter your stats based on the following time periods:

This Week Last Week [Pro] This Month [Pro] Last Month [Pro] This Year [Pro]

Additionally, the second dropdown allows you to filter the stats of either a single Form or all of the Forms combined.

The Stats are broken down into following categories:

1 Views: This is the number of times your Form or Forms have been displayed to a visitor.

2 Emails Collected: This is the number of emails you have successfully collected.

3 Clicks: This is the number of clicks recorded for your Call to Action and Social buttons.

4 Average Conversion: The formula for your Average Conversion is (Emails + Clicks) / Views * 100.

By clicking on any Stat, you can see its historical graph:

Finally, in the top-right you have these options:

1 Download CSV button: selecting this button downloads your entire email list.

2 Dropdown menu (Download 7 Days): selecting this option downloads the emails that were collected in the last seven days.

​