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

Image Background

Gradient background

Image Background

With video

Yes or No

These templates are inspiration for you. You can easily design anything. Be unique!

Bottom bar

With remnant

Bottom bar

With remnant

Bottom bar

Top bar

With video

These templates are inspiration for you. You can easily design anything. Be unique!

Bottom right

Offset from bottom

Top left

With Video

With remnant

Bottom right

These templates are inspiration for you. You can easily design anything. Be unique!

End of post optin

Sidebar optin

These templates are inspiration for you. You can easily design anything. Be unique!

Simple form

Lanscape

Portrait

These templates are inspiration for you. You can easily design anything. Be unique!

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.

Select the publishing platform:

Select where you want to put this form:

(Note: Once this code is added, for future editing, you simply have to change it using this PopupXpert editor. The form on your website will be updated automatically!)

Copy and paste the code below into the html file of your website where you want the form to appear.
(Note: Once this code is added, for future editing, you simply have to change it using this PopupXpert editor. The form on your website will be updated automatically!)

Select the publishing platform:

(Note: Once this code is added, for future editing, you simply have to change it using this PopupXpert editor. The form on your website will be updated automatically!)

Copy the code below and paste it into the html code of your website, IMMEDIATELY AFTER the end of the article content. (If you won't be using the option: 'When Scroll To End Of Post', then you can simply insert the code just before the </body> tag.)
(Note: Once this code is added, for future editing, you simply have to change it using this PopupXpert editor. The form on your website will be updated automatically!)

Add New Element:

Base Dimensions

Base Width:
px

Base Height:
px

Tip 1: Sort editor to move element to front / back.
Tip 2. Click and swipe over to group/ungroup elements.

ScreenFill Background

Background Color:

Background Image:

Image URL

Position:

Grayscale:

Blur: (0 - 20)

Brightness: (-9 to 9)

Position & Size

Left Offset: px	Top Offset: px
Width: px

Link Setting

Link URL:

Placeholder: ~source~

Link Target:

Link Title:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Default Alignment:

Text Font:

Text Size: px

Text Line Height:

Text Shadow:

Rotate: (-180 to 180)

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

Bkground Padding:

ID & Class

ID: apply to <div>

Class: apply to <div>

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Icon Setting

Current Icon:

Crop Icon:

Action

On Click:

Appearance

Color:

Shadow:

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Background Color:

Bkground Border:

Bkground Radius:

Bkground Padding:

ID & Class

ID: apply to <div>

Class: apply to <div>

Position & Size

Left Offset: px	Top Offset: px
Width: px

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: (Uncheck if optional)

Action

On Select:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Font:

Text Size: px

Text Line Height:

Text Shadow:

Rotate: (-180 to 180)

Background Color:

Bkground Shadow:

Bkground Border:

Bkground Radius:

Bkground Padding:

Animation

Type:

Speed:

Repeat:

Start Delay:

ID & Class

ID: apply to <div>

Class: apply to <div>

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Appearance

Background Color:

Background Image:

Image URL

Position:

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Grayscale:

Bkground Brightness: (-9 to 9)

Bkground Shadow:

Bkground Border:

Bkground Radius:

ID & Class

ID: apply to <div>

Class: apply to <div>

Position & Size

Left Offset: px	Top Offset: px
Width: px	Height: px

Image Setting

Image URL:

Position:

Crop Image:

Action

On Click:

Appearance

Rotate: (-180 to 180)

Blur: (0 - 20)

Skew: (-180 to 180)

Opacity: (0 - 1)

Flip:

Grayscale:

Bkground Brightness: (-9 to 9)

Bkground Shadow:

Bkground Border:

Bkground Radius:

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:

Text Edit & Appearance

Double-click the text to start editing
or

Text Default Color:

Text Default Alignment:

Text Font:

Text Size: px

Text Line Height:

Button Color:

Button Image:

Image URL

Position:

Rotate: (-180 to 180)

Button Shadow:

Button Border:

Button Radius:

Button Padding:

ID & Class

ID: apply to <button>

Class: apply to <div>

Button 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