This article explains how to create a lightbox form and add it to your website.

In Emma, there are two main categories of signup forms: Lightbox forms and regular / classic forms. Within the regular / classic form category, there are two different types: forms made with our current form builder and forms made with our legacy form builder. The two types function similarly, but the process of editing them is a little different.

Lightbox forms are also commonly called pop-up forms. They are dynamic forms that must be embedded on a website and they include advanced time delays and other customizable options.

	In This Article
	Video Tutorial Creating a Lightbox Form Adding a Lightbox Form to Your Website Lightbox Form Tips Additional Resources

Watch a Quick Video Tutorial About Lightbox Forms

In this short video, you'll learn how to use the lightbox form as a tool to streamline the process of adding new subscribers to your audience list.

Creating a Lightbox Form

1. Navigate to your Audience tab.
2. Click on the Forms section in the panel on the left.
3. Click on the Create new form button on the right.
4. In the pop-up window that appears, click on the Build a lightbox form option.
5. Click on the Next button to proceed to the form builder.

The form builder is made up of two main sections: the preview section, which takes up the left two-thirds of the screen, and the builder steps, which are located in the panel on the right side of the screen. Throughout the building process, the form shown in the preview section will change to reflect the updates you make. There are nine steps in the building process.

Step 1: Title and URL

In the fields provided, give your form a title and enter your website's URL. Both fields are required.

Step 2: Select Fields

Click on fields to select them and add them to your form.

When using a lightbox form, the best practice is to ask for as little information as possible - ideally only name and email address. This is because asking for more information increases the likelihood that visitors will just click away from your form, thus causing your signup rates to plummet.

Step 3: Field Order

If you have more than one field on your form, you can reorder them by clicking on one and then dragging and dropping it into the order that you'd like.

Step 4: Data Privacy

Here you'll find four options for subscribers to consent to your privacy terms. You can toggle each one on and off, customize the verbiage, and select the option(s) you prefer.

Step 5: Style

Adjust the font color, heading, body, button, and background color to your preferences. You can also toggle the overlay transparency to be on or off.

Step 6: Groups

Click on a group to select it; the form will automatically add contacts who sign up to the selected group(s). You can select multiple groups, but you must select at least one in order to proceed.

Step 7: Display Details

• Location: The location tab lets you choose whether you want the form to display on all pages, only certain pages, or all pages excluding certain ones.
• Timing: The timing tab lets you choose whether the form should appear immediately, after a delay, or after viewing a certain number of pages. It also allows you to choose how often the form will appear for a visitor who has not filled out the form yet.

Step 8: Confirmation Message

Adjust the font color, heading, body, button, and background color of the confirmation message to your preferences. You can also choose whether you'd like the form to send a plaintext confirmation email or not.

Step 9: Final Preview & Code

The final step of the process generates the code for your customized lightbox form. Before you click on the Save & activate button, use the final preview to toggle between the desktop and mobile buttons at the top of the form. You can also choose whether you're viewing the signup form or confirmation message. Once everything is to your liking, copy and paste the code into a separate document to share with your web developer and then click on the Save & activate button.

Adding a Lightbox Form to Your Website

The way to add your lightbox form to your website depends on the type of website that you have. We've made a list of some popular providers and instructions for how to work with embed codes.

☑	Tip
	Regardless of your platform, the code for your lightbox form should always be placed just before the closing tag in your HTML. Many websites will automatically apply the code to each page, but with some sites, you may need to manually add the code to each page where you want your lightbox form to appear.

Shopify

To add the embed code to your Shopify website, log in as your Shopify admin. Once inside your store area, follow these steps:

1. Click on Themes in the left navigation panel.
2. Choose Customize theme at the top-right of the page.
3. At the top of the page, click Theme options, and select Edit HTML/CSS.
4. In the left panel, click on theme.liquid under the layout folder.
5. In the theme.liquid file, scroll to the bottom and paste the embed code just before the </body> tag.

Squarespace

To add the embed code to your Squarespace website, log in to your Squarespace account and follow these steps:

1. In the Home menu, choose Settings and click on Advanced.
2. Next, click on Code Injection.
3. Look for the "Footer" section and paste the code into the corresponding text box.
4. Click Save.

Tumblr

To add the embed code to your Tumblr website, log in to your Tumblr account and follow these steps:

1. Click the account icon and then click Settings.
2. Choose your blog on the right, scroll down, and click Edit Theme.
3. Near the top of the left column, click Edit HTML.
4. In the Edit HTML panel, scroll to the bottom and paste the embed code just before the </body> tag.
5. Click Update Preview, then click Save.

Weebly

To add the embed code to your Weebly website, log in to your Weebly account and follow these steps:

1. Navigate to the Settings tab and select the SEO option.
2. Paste the embed code into the text box labeled "Footer code".
3. Click the Save button.

WordPress

✎	Note
	Working with WordPress themes may require an experienced web developer.

 

To add the embed code to your WordPress website, log in to your WordPress Admin and follow these steps:

1. Navigate to the Appearance section and select Editor.
2. Look for a list of files on the right side of the screen and select the footer.php file. Make sure this file contains < ?php wp_footer();? > AND ​< /body >.
3. Before the tag and after the code, add your lightbox code snippet.
4. Click Update or Save when you're done.

FTP

If you have FTP access to your website, you can add the embed code directly to your HTML pages. From your FTP program, follow these steps:

1. Locate and open the HTML page to which you'd like to add the embed code.
2. Scroll down until you see the </body> tag.
3. Paste the embed code just before that tag.
4. Save your file.

Lightbox Form Tips

• If you have multiple active forms created for the same URL, the first activated form is the one that will display.
• Lightbox forms do not work with reCaptcha.
• Asking for more than a person's name and email address with your lightbox form can drastically drop your opt-in rates; instead, you could create an automated welcome series and ask for more info from your subscribers once they are invested in your content.
• When adding a lightbox form to a website, it's important that you're code-savvy or you may inadvertently disable your whole website. This is why our directions include giving the lightbox code to your web developer because we aren't able to offer support beyond what's in this article.
• Because the lightbox form is dynamic, the form will not display after a person has already signed up.

✎

Note

Lightbox forms rely on cookies to determine if a visitor has already signed up, as well as how long to wait before displaying the form again. If a visitor clears their cache and cookies, or if they use a tool that blocks cookies, the lightbox form will not be able to tell if the visitor has already signed up or how long it has been since they dismissed the form. As a result, the form may display to users who have already filled it out and may reappear before the full time has elapsed.

Additional Resources

• Audience Tab: Managing Contacts
• Audience Tab: Overview
• Building a Signup Form
• Creating a Subscriber Re-Engagement Campaign
• How to Use the Automation Workflow Builder
• How to View or Change a Contact's Status
• Trigger Events: Email Signup