HOW TO CUSTOMIZE A LIGHTBOX FORM
How to customize a Lightbox form
This article provides details on adding a Lightbox form to your Emma account and how to customize it for use on a website or landing page.
Your Emma account comes with a few different signup form options that are mainly used to add new subscribers to your audience: there is the Lightbox form, the Regular signup form, and the Classic signup form.
The Lightbox form is a dynamic pop up form that is only available to embed on a website and includes advanced time delay and more customizable options. Whereas, both the Regular and Classic signup forms are static forms that you can add to a website and a link to this signup form is automatically included in the footer of all of your email templates. You can create and customize as many forms as you like, just be sure you selected the right type of form and that you label them appropriately so you don't get them confused.
How to setup and customize your Lightbox form
After signing into your account, click on the Audience tab in the main navigation menu, then click Forms on the left. Click on the down arrow next to Classic Forms and then select the Lightbox forms.
Click the Create new form button on the righthand side of the page and you will be brought to the customization funnel on step 1 of 9.
You'll first need to give the form a title and enter your website's URL in the righthand section, both fields are required. After you have done this, click Next in the bottom right corner.
Select which fields you want to display on your form and they will instantly show in the preview. Click Next.explore.
Please note: Asking people for more than their name and email address upon first signing up can drastically drop your opt-in rates. When you are using a Lightbox form for initial signup purposes, it's best to only ask your subscribers for the information you're going to use (like name and email), then once your subscribers are invested in your content, ask for more details about them.
Determine the order of the fields. If you have more than one field on your form, you can adjust their order by using the three lines to the right of each field to drag and drop it into place. Click Next.
Set the data privacy consent for your form. Here you'll find four options for subscribers to consent to your privacy terms. You can toggle each one to see it load on the preview of your form, select the option(s) you prefer, and click Next.
Adjust the style of your form. You can change the heading and its font color, the body text and its font color, the submission button and its background color, the form's background color, and either toggle the overlay transparency to be on or off. Once the form looks the way you want it to, click Next.
Select the audience group(s). In this step, you'll determine which group or groups the subscribers who signup 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. Choose the option(s) you prefer and click Next.
Choose the location and timing of the form on your site. The first tab for Location is where you'll decide if the form should show on all pages, or select which pages it should be on by inputting the URLs of those pages. The Timing tab is where you'll decide when the form should pop up, if there should be a delay for it, and if the form should only be displayed once, always, or how often. Make your selections and click Next. explore.
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. Make your selections and click Next.
The final step of the process generates a code of your customized Lightbox form for you to share with your web developer, who will embed the code on your site to see it in action. Before you click on Save & activate, you'll want to make sure everything looks right and to do this, you can toggle between the desktop and mobile buttons at the top of the form to view its different displays, where you can also choose whether you're viewing the signup form or confirmation message. Then finally, once everything is to your liking, click Save & activate when you're finished.
How to add a Lightbox form to your website
The Lightbox form is added to sites in different ways depending on the type of website you have. Below is a list of 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.
Squarespace
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.
WordPress
Please 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, 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 to Update or Save when you're done.
Shopify
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.
Weebly
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.
Tumblr
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.
FTP
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.
Additional Lightbox form tips
If you have multiple active forms created for the same URL, the first activated form is the one that will display.
Because the Lightbox form is dynamic, the form will not display after a person has already signed up.
Asking for more than a person's name and email address with your 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 this.
You can also watch the same on YouTube video,
https://www.youtube.com/watch?v=2MumkxFw54I&list=PLWZmvpcD2i1kOkXy_3WtSFUxrNnQTBEnX&index=3