There are two signup form options: lightbox forms, below, and classic forms. The former is our new tool, including advanced time delay and customization options. The latter is a tool that has been around for a while, so you may be familiar with it already.
These data collection forms allow new subscribers to sign up from your emails and, if you choose, your website. You can create as many signup forms as you'd like, and they'll show up in the "Your signup forms section" of the Audience page. You can sort your forms alphabetically by name by clicking on the little arrow at the top of the "Signup name" list.
How to set up your lightbox form
When you click to create a new lightbox form, you'll see a generic preview that needs to be customized.
- Enter your form's title and your website's URL. Click Next.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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. Note: 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.
- To add the embed code to your WordPress website, log in to your WordPress Admin, look for the Appearance option and select Editor.
- 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>
- Before the </body> tag and after the <?php wp_footer();?> code, add your lightbox code snippet.
- Click update, and you're done.
- 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.
- Paste the embed code into the text box labeled Footer code. Click the Save button.
- 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.
- Look for the Footer section, and paste the code into the corresponding text box. Click Save.
- To add the embed code to your Tumblr website, log in to your Tumblr account, click the account icon and then click Settings.
- Choose your blog on the right, scroll down and click Edit Theme. Near the top of the left column, click Edit HTML.
- 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.
- If you have FTP access to your website, you can add the embed code directly to your HTML pages.
- From your FTP program, locate and open the HTML page to which you'd like to add the embed code.
- Scroll down until you see the </body> tag. Paste the embed code just before that tag. Save your file.
- 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.
- Choose Customize theme at the top-right of the page.
- At the top of the page, click Theme options, and select Edit HTML/CSS.
- 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.