Complete Form Customization With List Builder

Step 1 - Creating a New Form

Before we can get started, we need to be logged in to Sumo. Navigate to your Sumo Sites, then click on the Manage button next to the Site you want to work on.

After you log in for the first time, you're taken directly to List Builder

You should now be in the Forms Dashboard. This is where you can create new Forms and manage existing ones. Let's go ahead and create a new one by clicking on the Create New Form button.

Step 2 - Selecting your Goal

To get started in setting up your Form, you first 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.

We're going to focus on building your email list first, so let's choose Collect Emails.

Step 3 - Choosing a Form Type

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.

For now, let's go over our most popular Form Type, the Popup.

Step 4 - Designing and Customizing your Form

In this section, we're going to cover how to design your new email list building popup!

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.

1. 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.
2. 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).
3. 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!
4. 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.

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.

Step 5 - Configuring your Form's Visibility

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.

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.

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

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 are be leaving these options at their defaults and moving on.

Step 6 - Configuring your Form's Success Events

The Success tab is where you can determine what happens after a conversion happens.

You can set up an automatic email response for new subscribers, add a content upgrade, a redirect to a specific URL, or add Tracking Pixels! Feel free to explore the linked content for more information on setting up these features.