Set up Lightbox email signup

In June 2021, we launched a new place to set up a more secure lightbox with ReCAPTCHA. If you are using an older version, we recommend upgrading to the new code.

 

 

In this article

What is Lightbox Signup?

Set up Lightbox Signup in WordFly

Set up Lightbox Signup on your website

Technical details

Additional customizations

FAQs

 

WordFly offers a few options for setting up a subscribe form. There’s a formal subscribe landing page which gives subscribers options for setting email preferences and providing data for personalization. There’s also an option for a basic single field email signup. The 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.

 

 

What is Lightbox Signup?

 

A lightbox email signup is some code installed on your website that will display a pop-up signup form on your website. 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.

 

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.

 

Your website homepage is generally the best location for your lightbox email signup code. When visitors land on your website the lightbox will display based on your settings.

 

What to expect with Lightbox signup:

  • Lightbox should be a quick signup. Avoid populating too many subscriber data fields.
  • Preferences cannot be collected.
  • Signups go into the list selected on the Subscribe 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.
  • The only options available for loading and behavior are the options available in WordFly.
  • A cookie is set after the first display to a user and keeps it from displaying again.
  • The Lightbox must be previewed in WordFly under Account > Subscribe Settings 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.

 

 

 

Set up Lightbox Signup in WordFly

 

Lightbox is now set up in the Pages feature.

 

1. Go to Pages

 

2. Open the Subscribe page

 

3. Ensure that you have selected a list from the Add Addresses to List menu and click Save. This will activate the Lightbox tab.

 

4. Click the Lightbox tab

 

5. Configure your lightbox

You’ll configure a few areas in WordFly for your lightbox form.

 

BEHAVIOR

Set the Lightbox Behavior: There are two options for your lightbox behavior, select one of the available options.

  • Show lightbox 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.
  • Show lightbox 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.

 

 

DESIGN

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 to your lightbox: You can configure an image to display in your form.

  • First select where you want the image to display. Use the Image dropdown to select top, bottom, left, right or background for your image placement. In the example screenshot above we have selected 'top'.
  • In the Image URL field, browse to or upload your image.
  • Enter Image Alt Text in the open field. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

 

 

DATA

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)

 

TEXT

Add Lightbox Button Text: This is the text that will display for your Lightbox Signup button when the code is inserted on your website. If the text here says 'Subscribe' the button on your website that opens the lightbox will also say 'Subscribe'.

 

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.

 

6. Click Save, then scroll up to the top of the page to preview and test the button

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

 

Notes for testing:

  • 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.

 

 

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

Once copied you can add it to your website.

 

 

 

 

Set up Lightbox Signup on your website

After you have completed the steps above, you can now add your lightbox to your website. Provide the code to your website administrator. 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 the Behavior 'Show lightbox 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.


If you selected the Behavior 'Show lightbox 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.


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

 

 

 

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

Chrome
Firefox
Safari
IE9+
Edge
iOS Safari
Android Chrome
Responsive

 

 

 

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>

 

 

 

FAQs

 

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.