Basics of Form Building
Estimated read time: 15 mins
4 Designing and Customizing your Form
5 Configuring your Form's Visibility
6 Configuring your Form's Success Events
7 Connecting Your Form to an Email Service
In the last section we setup a shortcut, so now your site is collecting emails and you can start seeing results! But what if you want to design your own form, instead of using our preconfigured shortcuts? That's where our List Builder app comes in handy! With List Builder you can change change your form from an email collection form to a Call To Action form, switch from a popup to a full-screen Welcome Mat, customize what pages the form displays on, set tracking and conversion pixels... and more! So, let's get started!
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.
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, or add Tracking Pixels! 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.
8) Next Steps
Congratulations! You made it through the Getting Started Guide! In this guide we covered how to install Sumo, how to monetize Sumo by setting up a shortcut, and the basics of building your own customized form. You're well on your way to Sumo mastery!
So what's next?
We suggest taking a look at some of our Frequently Asked Questions, as well as our Guides. Here are a few of our personal recommendations:
1 Why Can't I See My Sumo Form?
2 Is there a way to schedule a form to appear at a later time?
3 How do I prevent forms from showing on certain pages?