Social Media

How to build a Fly-out form using Contlo

Related AI


In this video

Creating an Engaging Fly-out Form with Contlo


In our previous tutorial, we discussed how to create an interactive pop-up form using Contlo. This time, we're going to explore another engaging way to gather customer data: the fly-out form. This type of form is an excellent tool for engaging website visitors and gathering important data without disrupting their browsing experience. Let's delve into the process of creating a fly-out form in Contlo.

Building a Fly-out Form from Scratch

Starting with Fly-out Form

To start, you need to select 'Fly-out' instead of 'Pop-up' when creating a form from scratch. Inside the form builder, the first step is defining the form's style. Contlo provides an option to position your fly-out form anywhere on the screen. For our tutorial, we'll position the form at the bottom right corner and adjust its size to large.

Choosing Layout and Adding Elements

Similar to the pop-up form, you can select a layout and add an image. This time, let's choose an image layout on the right side. Next, add more fields using the drag and drop form builder.

Incorporating a Discount Block

Unlike the pop-up form where we used a timer block, we'll now integrate a discount block. This feature allows you to display a unique discount code to users. Simply select the discount block, change the coupon type to dynamic, and assign a percentage value of 50. This setup will offer a unique 50% discount coupon to the user upon successful form submission.

Advanced Targeting and Behavior Settings

Displaying Form Based on User Behavior

In Contlo, you can target when to display your fly-out form based on user behavior. For instance, you can set the form to display after the visitor scrolls past a certain percentage of the page. For this example, we'll set the display setting to 40%. This user-friendly feature allows visitors to continue scrolling without having to close the form.

Configuring Teaser Settings

Another popular practice is configuring your fly-out form as a teaser. To do this, navigate to the 'Behavior' tab and turn on the 'Teaser' button. This setting will open the form once the visitor clicks on a floating blob that can be positioned anywhere on the screen. Contlo also offers multiple base styles for the blob, and it's customizable to align with your brand style.


Creating a beautiful and effective fly-out form is straightforward and quick with Contlo. The platform's numerous customization options and advanced targeting settings make it an excellent tool for capturing customer data while maintaining a user-friendly browsing experience. In our next tutorial, we'll dive deeper into creating embedded forms. Stay tuned!



We Use Cookies to Enhance Your Experience

Our website uses cookies to provide you with a personalized experience and to improve our website. By clicking 'Accept', you consent to our use of cookies. To learn more about how we use cookies and your options, please see our Cookie Policy page.