Simple Email Marketing
Home > Have a question? We're here to help. > Account how-to > Customize your lightbox form

Customize your lightbox form

There are two signup form options to add new subscribers to your audience: lightbox forms and classic forms. Lightbox forms allow you to collect new audience members from your website, while a classic signup form can collect subscribers from your emails or your website. 

How to set up your lightbox form

click to create a new lightbox form, you'll see a generic preview that needs to be customized.

  1. Head over to the Audience tab and click Forms on the left-hand side. 
  2. Click Create a lightbox form on the right side of your page.
  3. Enter your form's title and your website's URL. Click Next.
  4. Select which fields you want to display on your form. (Fewer form fields get a better completion rate, so only ask your subscribers to tell you the information you're going to use.) Click Next.
  5. Reorder your fields, if you have more than one field on your form, to change their order. Use the three lines to the right of each field to drag and drop it into place. Click Next.
  6. Here's where you'll style your form. Add a heading and its font color, body text and its font color and a submission button and its background color. Determine how transparent the overlay should be. Click Next.
    Screen Shot 2015-02-25 at 9.33.45 AM.png
  7. Determine which group or groups subscribers who go through this form should be automatically added to. You can use the search bar to filter through your groups, and click the checkmark next to a group to select it. Click Next.
  8. Choose the location and timing of the form's appearance on your site -- Should it appear on all pages? Only specific pages? All pages except a couple specific pages? Immediately? After the site visitor views X pages? All these determinations and more are made on this step. Note: The form will not display after a person has already signed up. Click Next.
    Screen Shot 2015-02-25 at 9.30.14 AM.png
  9. Set the confirmation message and button presentation that displays after a subscriber submits their information. Here, you can also turn off the automatic confirmation email that sends to them so you can set up your own automated, custom welcome email. Click Next.
    Screen Shot 2015-11-30 at 4.45.39 PM.png
  10. Code is generated here for you to share with your web developer, who will embed this code on your site to see it in action.
  11. And that's it! Toggle between the desktop and mobile buttons at the top of the form to view its different displays, and choose whether you're viewing the signup form or confirmation message. Click Confirm when you're finished.
    Screen Shot 2015-02-25 at 9.31.08 AM.png

Helpful tips

  • Asking for more than first name and email address up front can drastically drop your opt-in rates. Consider grabbing a little bit of information in your lightbox form and then asking for more once your subscribers are invested in your content, perhaps at the end of your automated welcome series.
  • If you have multiple active forms created for the same URL, the first activated form is the one that will display.

Adding a lightbox form to your website

Depending on the site you use, your lightbox form is added in a different way. Below is how some popular providers deal with embed codes. Regardless of your platform, the embed code should always be placed just before the closing </body> tag in your HTML. Most websites will automatically apply the code to each page, but with some sites, it may be necessary to apply the code on each page you want your lightbox to appear.

It's important that you're code-savvy or you may inadvertently disable your whole website. We aren't able to offer support beyond this.


Note: Working with WordPress themes may require an experienced web professional.

  1. To add the embed code to your WordPress website, log in to your WordPress Admin, look for the Appearance option 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 </body> tag and after the <?php wp_footer();?> code, add your lightbox code snippet.
  4. Click update, and you're done.


  1. To add the embed code to your Weebly website, log in to your Weebly account, look for the Settings tab and select the SEO option.
  2. Paste the embed code into the text box labeled Footer code. Click the Save button.


  1. To add the embed code to your Squarespace website, log in to your Squarespace account and look for Settings in the Home menu. Click Advanced, and then click Code Injection.
  2. Look for the Footer section, and paste the code into the corresponding text box. Click Save.


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


  1. If you have FTP access to your website, you can add the embed code directly to your HTML pages.
  2. From your FTP program, locate and open the HTML page to which you'd like to add the embed code.
  3. Scroll down until you see the </body> tag. Paste the embed code just before that tag. Save your file.


  1. To add the embed code to your Shopify website, log in as your Shopify admin. Once inside your store area, 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. In the theme.liquid file, scroll to the bottom and paste the embed code just before the </body> tag. Click to save.
Last modified



This page has no classifications.


Emma phone support will be unavailable on November XX, between the hours of XX:XX and XX:XX. You can still contact support using the link above and we will respond as soon as we can.

App status