With the pop-up forms widget any of your opt-in forms can be dynamically loaded inside a layered or modal window (what we simply call pop-up).
You do this by appending a code snippet at the bottom of the pages where you want to load the popup.
Note that this is not a pop-up window like the ones that may be stopped by pop-up blockers. It is a layer added on the existing window content.

You have 2 methods

  1. iFrame: appends a layer and loads an iframe inside.
  2. Modal: Uses Bootstrap modals. We load a custom version of Bootstrap that only affects elements in a div with the class "bootstrap_nvm". Styling may be affected by the existing css of the host page.
  3. In your opt-in forms you will find ready to copy-paste the code into your website pages.
  4. Each method has its own files where optionally you can further control the styling and other parameters. This page demonstrates the 1st method.

You can have 3 different pop-up effects

  1. Exit: when the visitor is about to leave your page by moving the mouse outside the page's body.
  2. Slide-in: it loads periodically at the bottom right corner of your page. Not available for the 2nd method.
  3. On-time: it loads after x minutes the visitor stays at the page.
    In addition, a pop-up can be triggered with:
  • By adding a class="nsl_pop" to any hyperlink, text or phrase.
  • By adding onclick or onmouseover events to hyperlinks, div, span elements and buttons (text, paragraph, image etc).
    See the examples below.

Configuration options

  1. Set the number of times to show the popup. The popup will stop showing if the visitor completes the form and subscribes. But in order to avoid being annoying you can limit the number of pop-ups. E.g. don't pop more than 5 times.
  2. Minutes passed until the 1st pop-up shows.
  3. Minutes passed between 2 consecutive pop-ups.

Examples: adding a class or an onclick/onmouseover event

  1. Mouse over an element (span, div, image): Mouse over
    <span onmouseover="nvPopUp(8);">Mouse over</span>
    In this case we can assign different forms to different elements.
  2. Using an onclick event: Click me
    <a onclick="nvPopUp(9);return false;" href="#">Click me</a>
    We can again change the loaded form.
  3. Elements having the class nsl_pop: Click here
    <span class="nsl_pop">Click here</span>
    We cannot change the loaded form in this case. It will take the general one defined in the code snippet (unless you overwrite it in the code).
  4. Using a button you can also assign different forms to different buttons:
    <button onclick="nvPopUp(10);">Register</button>
  5. Clicking the close button redirects to another page: Test it!
    <a href="#" onclick="nvPopUpLayer(nvmUrl, 11, 'https://www.nuevomailer.com');return false;">Test it</a>
    11 is the form ID and https://www.nuevomailer.com is the redirection URL when the user closes the popup or presses the escape key.

The code

Since nuevoMailer v.10.1, after you create your form, go to your opt-in forms page and you will find the code to copy-paste. In addition all options and parameters are explained in detail.
For earlier nuevoMailer versions you can have a look at this document.
You don't really need technical skills but basic copy-paste work.
The code snippet should be included in all pages where you want to trigger the popup. You can include the snippet into a footer file shared by all your website pages. Here is a sample:

<script language="JavaScript" type="text/javascript">
var nvmUrl="https://www.yourdomain.com/mailer";
var idForm=32;
var maxPopTimes = 5;
var popTimeLapse = 0.2;
var nextPopTimeLapse = 2;
var nvPopEffect='slidein';
var height = 500;
var width = 600;
var script = document.createElement('script');
script.src = nvmUrl+'/inc/pop/nvPop.js';
script.async = true;
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(script, firstScript);     

Other features

  • It's responsive. Resize your browser and test the examples again. When the form is larger than the screen different styles and sizing is applied.
  • Gives you many styling options. In this page we use standard nuevoMailer forms and the default css files. The background can be defined when creating / editing the form.
  • You can optionally use cookies to stop showing pop-ups when an opt-in is recorded. Expiration is set to 30 days but that can also change if needed.
  • It can also work in cross domain installations; when nuevoMailer is installed in a different domain from the one you want to load the pop-ups but this depends on the captcha method you will use.
  • You will see your available options after creating your form.

See also,

Top of page