In this article
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.
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.
- A cookie is set after the first display to a user and keeps it from displaying again.
- Preferences cannot be collected.
- Signups go into the WordFly Signup subscribe list selected under Account > Subscribe Settings. 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.
- 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.
Lightbox is set up under Account > Subscribe Settings.
1. Go to Account
2. Select Subscribe Options > Settings
3. Scroll down to Lightbox Signup
4. Configure your lightbox form...
You'll configure a few areas in WordFly for your lightbox form. Set up will include: selecting default behavior for your lightbox pop-up, setting up the fields for your subscribers to fill out and reorder, adding your subscribe button text and size, adding messaging text and setting a brand color for the lightbox. Let's review each option...
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. 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.
Set up the data Fields for your Lightbox:
- Email will always be the first data field on the lightbox form.
- Insert additional fields by selecting Add and then using the dropdown to select a new field.
- Click Remove to the left of the field to delete the field.
- Use the hamburger icon to reorder where the fields display.
- Check the Required checkbox to delineate which fields a subscriber must fill out (Email is always Required).
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 a Button Size: You can select small, medium or large as your button size.
Select a Branding Color for your form: There are 5 default colors and a field for inserting your specific brand hex color code. Select one of the default colors or enter your unique hex color code in the color field.
Insert an Image in your lightbox: (Optional) You can configure an image to display in your form.
- First select where you want the image to display. Use the Image (optional) dropdown to select top, bottom, left, right or background for your image placement. In the example screenshot below we have selected 'top'.
- In the Image URL field, paste in the URL to your image. You can upload your image into your WordFly media library and copy the URL from there for this field.
- 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).
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.
5. Select Preview + Grab the Code to test your lightbox and copy the code.
This button will also save your selections.
6. Test your Lightbox signup right here in WordFly by clicking on your 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 sign up. 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.
In Chrome clicking on the code snippet will automatically copy the code to your clipboard. In Safari and Firefox clicking on the code will highlight it so that you can copy it in the browser. Once copied you can install it on your website!
8. Click the circled x in the upper right of this screen to close the lightbox preview.
After you have completed all the steps in Setting up your Lightbox in WordFly and have copied your Lightbox code snippet (step 7 in that process), you can now add your lightbox to your website.
Provide the code to your website administrator. The code should be added to the HTML <body> wherever you'd like it to appear on your website.
Depending on the Behavior you selected in Setting up your Lightbox in WordFly, 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.
As we get feedback about Lightbox, we will add customizations for organizations to modify parts of the behavior or display.
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>
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?
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.