Free Exit Popup Generator Online

Choose a template to start with:

Tip: Choose based on layout. Image and color scheme can be changed easily.

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!

Choose a List Manager:

SendSteed (LeadsLeap Inhouse List Manager)

3rd-Party List Manager

Not an opt-in form

For example, you want to create a popup to
allow visitors to click a button or link to a URL.
Note: HTML Form type will be disabled,
since you're not creating a form.

I'll do it later

Select the Form Type you want to create:

Type #1: Popup Form

	Lightbox Gracefully animate to the center of the browser, with the background darken.
	Screenfill A full page popup that animates to fill the whole screen.
	Slidebar Slides from the top or bottom of the browser.
	Cornerblock Slides from any corner of the browser.

Type #2: Inline Form

	Javascript Form Can be animated, tracked and modified remotely.
	HTML Form Raw HTML code. No animation, tracking, or remote editing.
	Html Form option is disabled because you've selected I'm not collecting email in 3. List.

Select an animation effect:

What triggers 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