Skip to main content
All CollectionsGetting Started
Complete Form Customization
Complete Form Customization
Davey Jones avatar
Written by Davey Jones
Updated over a week ago

If you're looking to completely customize the design and behavior of your forms, you have come to the right place! With your BDOW! (formerly Sumo), there is a nearly endless amount of possibilities to brand and direct your forms to your ideal client. This guide will show you how to create a level of customization you have yet to experience. Let's get started!

Step 1 - Getting Started: Create a Form

  1. Login to BDOW! and go to "My Sites." Click "Manage" next to the website you want to work with.

After you log in for the first time, you're taken directly to the dashboard. Soon this will be filled with stats that will blow you away! But first you have to set up your first form.

Go ahead and click on "Forms" next to "Dashboard" at the top to get started.

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- Choose the Goal of the Form

Start by choosing what you want your form to achieve:

List Builder Goals
  • Collect Emails: Gather email addresses and other info for your email list.

  • Add a Call to Action: Direct visitors to a specific URL or offer downloadable content.

  • Get Social Shares: Boost your social media presence.

  • Collect Info With Custom Code: Display your own HTML/CSS form (*No conversion tracking with custom forms and javascript).

Click on the box next to "Collect Emails." Let's focus on building your email list for now.

Step 3 - Pick a the Type of Form

From banners to popups, BDOW! has a number of different form types to best capture the attention of your site visitors. There are several different displays to choose from:

List Builder Form Types
  • Popup: Appears in the center of the page, triggered by time or exit intent.

  • Scroll Box: Pops up in a corner after visitors scroll a certain percentage.

  • Inline Form: An embedded HTML snippet.

  • Click Trigger Popup: Activated by clicking an element on your page.

  • Welcome Mat: Displays a full-screen call to action that shows when visitors land on your site.

  • Smart Bar: A banner at the top or bottom of your page.

We'll focus on the Popup, a popular choice. Click on the box next to "Popup."



Step 4 - Designing and Customizing your Form

Now the fun part, let's design your email popup!

There are numerous template designs for you to choose from in your Pro account. (Free Users: Even with the default popup, you can customize til your hearts content!)

  • Pick one as a starting point (they're all easy to customize later).

  • 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 blue.

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

  • 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!

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

5.png


Step 5 - Configure your Form's Visibility

Hey, your BDOW! popup is starting to look pretty awesome! Now let's make sure that your visitors can see it at the best possible time for conversion!

Make it easy on yourself with this first pop-up. You can leave your Form in "Smart Mode" and we'll optimize the timing of your Form's visibility for you.

If you are feeling confident in your lead generator skills, 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 super confident form builders can scroll down from "Display Rules" and dabble with "Advanced Settings" allow you to further customize your form's behaviors.

For our purposes, we are be leaving these options at their defaults and moving on.

Refresher:

  • Smart Mode optimizes timing automatically.

  • Manual Mode allows additional tweaks like timed appearance or exit intent.

  • Display Rules for precise placement on your website.

  • Advanced Settings offer further customization.



Step 6 - Customize your Form's Success Events

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

Decide what happens after someone interacts with your form:

Bonus Tip:

  • Keep your form short and sweet – people don't like filling out long things online.

This breakdown will help you navigate through the process of customizing BDOW! (formerly Sumo) forms with clarity and ease! If you get stuck anywhere along the way, email us at [email protected]

Did this answer your question?