Create Popup Forms

Create Popup Forms


Create Popup Forms

Display an eye-catching CTA

Need a signup form with some pop?

Then you should try the tinyEmail popup form. Our Popup option hovers a sticky form on every web page. It's designed to be a call to action (CTA) that, well, isn't easy to ignore.


Other forms

Looking for a different form style? You can also create an embedded form or flyout with tinyEmail.

  • Oh, BTW, we also have a growing library of prebuilt forms. Click to learn more about these templates.

tinyEmail popup form

To build a popup form, add an audience and create the structure. After that, quickly customize the design and install the code. 


Starting a form

The first step is to launch the workflow and assign an audience. The audience database is where you build your subscriber list.

  1. Log into your account.
  2. Click Forms on the side menu.
  3. On the next page, click the Create form button.
  4. In the pop-up window, enter a unique name.
  5. Click the field and select an existing audience. Optionally, you can create a new audience. (see below)
  6. Click the Save & Continue button to open the Form builder.


Creating a new audience

If you don't want to connect the popup form to an existing list, create a new audience.

  1. Click the subscriber field.
  2. Enter a unique name for the new audience (i.e. list).
  3. Click the plus (+) icon.

create a popup form

Click the audience name on the drop-down menu. tinyEmail adds the list to the form. The first step is now complete! Click the Save & Continue button to open the Form builder.

add audience list to form


Creating the popup

When the Form builder opens, you'll see four menu tabs at the top of the screen. Each tab opens a different set of options.

  • Appearance Customize the form's shape and design (see below).
  • Content  Add or remove form fields and configure component properties (we show you how in a different article).
  • Editor The form builder canvas.
  • Preview Quickly see what the form looks like.

The Form builder page doesn't have an auto-save function. That's because the changes you make to a published form automatically appear in the live form (e.g. on your website). If you're working on a draft or unpublished form, be sure to click Save at the top of the Code page.


Appearance

Form type

Under the Form type heading, you'll find three options. Select Popup.

select form style


Selecting a trigger

Next, select a trigger (the event that causes the popup form to display).

add form trigger

  • Show on page load  The popup form displays on every page load, including the Home page.
  • Show based on rules  Choose this option to control when the form displays. Check a box to enable one or both rules. Change the default settings. (optional).

add form trigger delay

  • Only show on custom trigger Choose this option to trigger the form with a custom event. It's an advanced feature, so you'll need some JavaScript skills to write code (and paste it into the field) that fires an event on your site (e.g. mouse action, button click, etc.).

add custom trigger


Form details

Scroll down to the Form details heading. This is where you can customize the size of the popup. Adjust the width and height so that the form looks good on your site. You can define form sizes with pixels (e.g. 600px) or percent (e.g. 50%).

set form dimensions

Customize the background color or leave it blank (neutral). Use the color picker to select an option. Open the font selector and choose a specific typeface or leave the default Inherit option enabled. If you select Inherit, the form's code picks up the default font on your website, a time-saving feature that helps maintain a consistent look on your site.

  • FYI Any changes you make to a published form appear almost instantly on your site's live form. If you can't see the changes, refresh the website page.


Form success message

Add a short message that lets subscribers know they were added to the list.

add form message


Final steps

Now that the form structure is ready to go, click here and learn how to: 

  1. customize layout orientation
  2. add or remove components
  3. configure component properties (e.g. field labels, font color, cell alignment, etc.)
  4. install the form code on your site


Happy list building with tinyEmail!


    • Related Articles

    • Create Flyout Forms

      Create Flyout Forms Display a subtle CTA in the corner Need a signup form that doesn't hinder the user experience? Take a look at the tinyEmail flyout form. Customizable, mobile responsive, and sticky, the flyoutoption appears in the bottom right ...
    • Create Embedded Forms

      Create Embedded Forms Add subscribers to your tinyEmail list Are you growing a list of subscribers or leads with a form on a website? If yes, I've got great news. You can build an embedded form with tinyEmail and paste the code on your website. That ...
    • Create a New Email Template

      Create a New Email Template Build beautiful templates in 3 minutes Fun fact about time allocation. Before tinyEmail, we were spending about 75% of our email marketing time playing around with email design tools and 25% of the time crafting meaningful ...
    • Create and Send Email Campaigns

      Create and Send Email Campaigns They're easy and intuitive Creating and sending tinyEmail campaigns is easy. Let me show you the whole process from start to finish. That should take about two minutes. Entering the email campaign creation workflow ...
    • How to Create Anchor Links

      How to Create Anchor Links Help readers jump to content Anchor links are a reader-friendly feature that should be part of your email design toolkit. They improve readability and the user experience. Readers can skip the fluff and jump to the content ...