Free Exit Popup Generator Online

Select a template

Choose based on layout. (Image, text and color can be changed easily.)

Opt-in

No opt-in

Blank Page

Start from scratch

Image Background

Gradient background

Image Background

With video

Yes or No

Bottom bar

With remnant

Bottom bar

With remnant

Bottom bar

Top bar

With video

Bottom right

Offset from bottom

Top left

With Video

With remnant

Bottom right

End of post optin

Sidebar optin

Simple form

Lanscape

Portrait

Select a list manager

Connect a manager to collect emails (or disable opt-in).

SendSteed

LeadsLeap in-house List Manager.

3rd-Party List Manager

Use an external autoresponder.

No opt-in

This form will not collect emails.

No list manager is selected now

To collect emails, you must connect this form to a List Manager. You can change the List Manager anytime.

Select a form type

Choose how your form will appear on your website.

Popup Form

Overlay forms that appear on top of your page.

Lightbox

Center popup with a dimmed background.

Screenfill

Full-page popup that covers the screen.

Slidebar

Slides in from the top or bottom.

Cornerblock

Slides in from a corner of the browser.

Inline forms

Forms embedded directly into your content.

Javascript form

Animated, trackable and editable remotely.

HTML form

Raw HTML with no animation or tracking.

Select an animation effect

When to trigger the form?

Advanced Setting: Customization By Cookies

(Pro Member only)

Do not show when this cookie exists:

Only show when this cookie exists:

Advanced Setting: Customization By URL

(Pro Member only)

Do not show when URL contains these phrases:

Only show when URL contains these phrases:

Advanced Setting: Self-hosted Wordpress Customization

(Pro Member only)

How to assign Class to an Element?

1) Click the Element to open its Editor. For example, if you want to assign a Class to an image, click the image to open its Editor.

2) Scroll to the bottom section of the Editor. You’ll see something like this:

3) Click 'ID & Class +' to expand the options.

4) Enter your Class name in the Class input field.

5) A quick view of the assigned Class will appear at the top-right corner of the Editor.

Note: You can assign the same Class to multiple Elements. This lets you show/hide multiple Elements together.

How to hide an Element?

Before showing Element(s) by Class, you must first hide them.

To hide an Element, go to its Editor and click this

How to assign ID to an Element?

1) Click the Element to open its Editor. For example, if you want to assign a ID to an image, click the image to open its Editor.

2) Scroll to the bottom section of the Editor. You’ll see something like this:

3) Click 'ID & Class +' to expand the options.

4) Enter your ID in the ID input field.

5) A quick view of the assigned ID will appear at the top-left corner of the Editor.

Note: An ID must be unique, unlike a Class.

Add New Element:

Base Dimensions

Base Width
px

Base Height
px

Tip 1: Dragto move elements forward/backward.

Tip 2: Swipe across to group/ungroup elements.

ScreenFill Background

Background Color

Image

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Appearance / Text Edit

Double-click text • Hover here

Text

Color

Alignment

Font

Case

— AA aa Aa

Size

Line Height

Spacing

Shadow

Opacity

(0 - 1)

Bullet

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Link Setting

Go To

Placeholder: ~source~

Link Target

Link Title

Appearance / Text Edit

Double-click text • Hover here

Text

Color

Alignment

Font

Case

— AA aa Aa

Size

Line Height

Spacing

Shadow

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Action

On Click

Appearance / Icon Edit

Icon

Color

Crop

Flip

Rotate

Skew

Box Style

BG Color

Border

Radius

Padding

Shadow

Opacity

Blur

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height Auto

Input Setting

Input Type

Input Name

Incorrect Input Name will break your opt-in form. Make sure it is correct.

For SendSteed, please use these:

To Collect:	Use Input Name:
Email First name Last name Other custom fields	email name lastname any1word (e.g. tel)

Do Not Submit

Required Field

Action

On Select

Appearance / Text Edit

Double-click text • Hover here

Text

Color

Font

Size

Line Height

Spacing

Shadow

Box Style

BG Color

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Appearance

Background

Image

Position

Crop

Fade

Flip

Grayscale

Opacity

Blur

Brightness

(-9 to 9)

Box Style

BG Color

Frosted

Border

Radius

Shadow

Rotate

Skew

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Appearance

Table Structure

Number of Columns

Number of Rows

Header

BG color

Height

Content

Background color

Height

Footer

Background color

Height

Box Style

Outer Border

Inner Border

Radius

Padding

Shadow

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Action

On Click

Appearance / Image Edit

Image

Position

Crop

Fade

Flip

Grayscale

Opacity

Blur

Brightness

Box Style

Border

Radius

Shadow

Rotate

Skew

ID & Class

ID apply to <div>

Class apply to <div>

Position & Size

Left Offset px	Top Offset px
Width px	Height px

Action

On Click

Appearance / Text Edit

Double-click text • Hover here

Text

Color

Alignment

Font

Case

— AA aa Aa

Size

Line Height

Spacing

Box Style

BG Color

Image

Position

Border

Radius

Padding

Shadow

Rotate

(-180 to 180)

ID & Class

ID apply to <button>

Class apply to <div>

Name

Posts
	show on all Posts
	only show on Post IDs:
	no show on Post IDs:
	only show in Categories:
	no show in Categories:

Pages
	show on all Pages
	only show on Page IDs:
	no show on Page IDs:

Insert/Edit Link