Set up lightbox email signup

Article author
Miguel Panayotty
  • Updated

In 2021, we launched a new lightbox option with ReCAPTCHA. If you are using an older version, we recommend following the steps below to upgrade to the new code.


Screenshot of lightbox feature with an image with fields to collect Email, First Name, Last Name and ReCAPTCHA


WordFly offers multiple options for setting up a subscribe form. Lightbox email signup is a snippet of code that can be added to one or more pages of your website with the purpose of building your subscriber list in WordFly.


How it works

Lightbox email signup is code installed on your website that will display a pop-up signup form on your page. The signup form is generally one to three fields such as email, first name, and last name. The accessibility to the form and minimal information collected make it one of the most ideal signup options for subscribers. Your website homepage is generally the best location for your lightbox email signup code.


Lightboxes can usually be configured to display immediately when a subscriber lands on your website or when a subscriber clicks a subscribe button. WordFly’s Lightbox Signup feature gives you both options for display on your site (auto pop-up or click to open). If you choose the auto pop-up option, the form will only display the first time a visitor loads the page.


What to expect

  • Lightbox should be a quick signup. Avoid adding too many subscriber data fields. Preferences cannot be collected.
  • Signups go into the list selected on the Settings tab. Both the main signup and lightbox share a subscribe list.
  • Lightbox signups have a WordFlyOrigin data field set to confirm the signup came through lightbox.
  • A cookie is set after the first display to a user and keeps it from displaying again.
  • The lightbox must be previewed in the Preview and Test section for the code to activate and work in production.
  • Lightbox has no awareness of what page it has been configured for on your site. Your web team will need to work out the logistics of displaying the code on all pages or only desired pages.


Screenshot of Lightbox tab showing preview button and code field



Configure Lightbox Signup in WordFly


1. In the Pages section, open the Subscribe page


2. On the Settings page, ensure that you have selected a list from the Add Addresses to List menu and click Save. This will activate the Lightbox tab.


3. Click the Lightbox tab


4. Configure your lightbox behavior and design


Behavior options:

  • Open when button is clicked
    With this option, a visitor to your site will click a Subscribe button that you've placed on your page. This will then open the lightbox form.
  • Open when page loads
    With this option, a visitor to your site will automatically see the lightbox form when the page loads. A button will not display. They will only see the form the first time they visit the page.

Design options:

  • Set a Button Size: You can select small, medium or large as your button size.
  • Select a Branding Color: Select one of your pre-saved colors or enter your unique hex color code in the color field.
  • Add an Image: You can configure an image to display in your form. Use the Image dropdown to select top, bottom, left, right or background for your image placement. In the example screenshot above we have selected 'left'. In the Image URL field, browse to or upload your image. Image Alt Text provides alternative information for an image if a site visitor cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).


5. Set up the data fields for your lightbox

  • Email will always be the first data field on the lightbox form
  • Select and add additional fields, then drag to reorder them, if needed
  • Check the Required checkbox, if needed (Email is always Required)


6. Update the text for your lightbox

Set up the text messaging you would like to display in your lightbox: Enter a Headline, Description, Submit button text, and Success Message for the Lightbox form. Feel free to use the defaults that are already set up.


7. Click Save, then scroll up to the top of the page. Preview and test the button.

Note: This step is required for lightbox code to activate.

  • Click the Subscribe button. When your form loads, fill out all the fields you set up and click your submit button. If you do not enter required fields the form will show a friendly error. You should see a success message after clicking your submit button.
  • Since this is a live preview of your form, you are actually signing up through this Lightbox. Check the inbox of the address you used for testing the form, you should have an email to verify the signup. This is the same email you will receive when testing your main subscribe form.
  • Confirm your subscription from the confirmation email and then see that you are now on the Subscribe list by looking up your email address in WordFly.


8. Click on the code field to copy your Lightbox code to your clipboard.

Once copied you can add it to your website.




Add Lightbox Signup to your website

After you have completed the steps above, you can now add your lightbox to your website. Provide the code to your website developer. Depending on the behavior you selected, you will place the lightbox code snippet in a slightly different location in your website HTML.


If you selected Open when button is clicked

To add this option to your site, paste the code snippet into the <body> of the host page wherever you would like the Subscribe button to appear. With this option, a visitor to your site will click a Subscribe button that you've placed on your page. This will then open the lightbox form.


If you selected Open when page loads

To add this option to your site, paste the code snippet anywhere within the <body> of the html. When a site visitor loads the page, the lightbox opens automatically. Cookies are used with this option to prevent a subscriber from being "lightboxed" every time they visit the host site. The cookie only uses “first person” data which doesn’t collect anything for advertising or any other purposes and is compliant with the EU Safe Harbor Framework.


Test your lightbox as soon as you have it installed on your site. Make sure it loads, submits, and displays everything as expected.




Additional customizations


Validate form on submit

We’ve added an optional attribute to the lightbox snippet called data-wfoptions. If you set its value to validateOnBlur:false, the validation will only occur once the submit button is pressed.

<div id="wfgadget" data-wftype="subscribe-button" data-wforg="123" data-wfoptions="validateOnBlur:false"></div>


JavaScript function 

Under the More Options arrow, you can copy JavaScript function code that gives more flexibility to you and your website developers. You can use it to control how and when the lightbox displays, match the button style from your website, or use an image button instead. The function call also requires the pop-up code to be added to your website.




Technical details

The Lightbox Signup gadget is responsive and will dynamically adjust its display based on the dimensions of the viewport. It is built to avoid interfering with the parent page as much as possible. The script provided will add the gadget once the rest of the page is finished loading. Gadgets are contained within a set of iframes to protect both the gadget and host page from style and script pollution. Due to the nature of iframes, customization by way of CSS and JavaScript is limited.


Browser Support

iOS Safari
Android Chrome





Does this replace the main subscribe form?

No. The Lightbox signup is a quick, accessible way to signup for your prospect list. Use WordFly’s formal subscribe landing page to give subscribers options for setting email preferences and providing data for personalization.

Can I use both the subscribe and lightbox form?

Yes. Both the subscribe landing page and lightbox put subscribers into the same signup list.


Where should we put the lightbox?

Your website homepage is typically the best location for your lightbox but it depends on your goals. If you really want subscribers to sign up with preferences, then it would be best to make sure subscribers are going to your subscribe form with preferences first before being served the lightbox form.


Will the lightbox pop-up show every time someone visits?

Once a website visitor dismisses the lightbox, a cookie gets created and the lightbox doesn’t appear again. You should be aware of your country’s cookie policy.


What happens if a subscriber accidentally signs up twice?

The lightbox will accept the signup. The subscriber’s personal data can be updated but if they sign up with the same email address, they will not be added to the subscribe list twice. Instead they will show up as a duplicate on the subscribe list.