what is unbounce

Become a Better Marketer. Anytime, Anywhere.

Listen and learn on the go with Unbounce’s Call to Action marketing podcast. Tune in and get inspired in the car, while you cook, or at the gym.

It’s My Form in a Box! Try This Simple A/B Test

angus photo (1)
♭Are you wise enough to know when a gift needs givin’?♮

There are plenty of ways to screw up a form.

Put your form above the fold, you’re a pushy salesman. Put it below the fold, you’re a pushover. And what’s good CTA copy? Three fields or two? There’s never a firm answer.

But since forms are the apex of lead gen campaigns, these are very important questions for every digital marketer. Everything you say — everything you design — should build towards persuading users to complete your form.

The problem is, that “apex” is a moving target. People arrive at purchasing decisions at all different times. So how can we appeal to different buyer types without placing nasty, unsightly forms all over our landing pages?

To solve this, we’ve uncovered a tactic for allowing users to tell you when and where they’re ready to fill out your form; something that allows you to place the same form in multiple sections of your landing page without taking up real estate.

The tactic: placing forms within a user-triggered lightbox, a.k.a. a lightbox form, and distributing CTAs to the same form throughout your landing page.

The form conundrum

Form placement wouldn’t be an issue if users all had the same buying habits, but we know that’s not the case.

In their 2006 book Waiting For Your Cat to Bark, Bryan and Jeffrey Eisenberg assert that customers can be segmented into four fundamental buyer modalities, (i.e., profiles that describe the behavior of different buyers):


Without going into too much detail (but here’s more if you need it), they break down like this:

  • Competitive buyers like making quick decisions based on logic; they view speed and decisiveness as an advantage.
  • Spontaneous buyers also make quick decisions, but these decisions are driven more by emotion than logic.
  • Methodical buyers take their time to make the most informed decision possible — they read the fine print before making a choice.
  • Humanistic buyers want to ensure their values align with a company before becoming a customer; ethical approval from peers is important.

These four buyer modalities tell us different people arrive at purchasing decisions at different times. But with only one form per page, how can marketers appeal to everyone?

If you bury your form below the fold, buyers who make decisions on a whim (competitive and spontaneous) may decide to bounce before they scroll down and see it.

If you put your form above the fold, methodical and humanistic buyers (who are busy devouring your copy three screens down) may forget where it is. Same result: they’ll bounce.

But in all this madness, there’s one thing common to every buyer type: they all have questions that need to be answered before they arrive at a purchasing decision.

And by answering these questions, marketers build momentum towards successfully converting visitors to leads and sales.

Conversion momentum

Every landing page tells a story. It’s not enough to just say the right words and have the right design. To convert prospects, you must address their questions in the right order.

Most landing pages follow a story similar to what’s known as Monroe’s motivated sequence — developed in the 1930s by Professor Alan Monroe — as a way to structure persuasive speeches.


Monroe’s sequence lends itself to the concept of building conversion momentum, (i.e., the forward movement your landing page creates when you address a prospect’s questions in logical order). You need conversion momentum in order to build and motivate prospects towards performing your desired action.

On a landing page, that normally means either clicking a call to action or filling out a form. But with the concept of lightbox forms, it means clicking a CTA to activate a form.

And when your landing page copy tells the story in the right order — the correct hierarchy of persuasion — a lightbox form will help you appeal to different buyer types at different stages of your funnel, all on the same landing page.

So what are lightbox forms?

A lightbox is a modal window that opens over a page, filling the screen and dimming what’s behind. It allows us to prominently display content requested by the user.

Click on any Facebook picture, and it displays in a lightbox:


Lightboxes are normally used to display media or extra copy, but lightbox forms are used to display, well, forms.

Here’s an example from Autopilot — a marketing automation platform — who uses lightbox forms on its webinar landing pages.


So unlike inline forms, which display on the page itself, lightbox forms only display once they’ve been consciously triggered by a user clicking your CTA.

The concept takes advantage of what’s called the Zeigarnik effect, developed by Russian psychologist Bluma Zeigarnik, which suggests people are much more likely to finish processes they’ve already started. It states that people have trouble focusing on new goals when they’ve left previous tasks incomplete.

In this context, the Zergarnik effect suggests users who click a CTA are more likely to complete your form, since they’ve already taken the first step.

And remember those buyer modalities? With lightbox forms, we can distribute multiple CTAs throughout the page — all linking to the same form — allowing us to appeal to competitive, spontaneous, methodical and humanistic buyers.

Spontaneous and competitive buyers can be captured with CTAs earlier in the story, while methodical and humanistic buyers can click your CTA after getting more information.

Of course, there’s no such thing as a guaranteed conversion lift. Lightbox forms are a great testing opportunity, not a sure thing. So if you’re interested in giving it a shot, follow the step-by-step tutorial below.

Putting your form in a box

If you use Unbounce, you can follow this process to set up your first lightbox forms. If you don’t use Unbounce, you can grab a free account and follow along.

If neither option works for you, check out this handy tutorial on setting up lightboxes with CSS and jQuery.

Step 1 of 4: Create a page (or use an existing page)

Open up the Unbounce App. If you have an existing lead gen page you want to test, click Start with a Copy of Your Existing Page.


If you don’t have an existing page, click Create New Page, give it a name and click Start with this Template.


Step 2 of 4: Create a lightbox

From the tool panel on your left, select Lightbox Button, and drag and drop it onto your page.

button (1)

After dropping your button and typing your CTA copy, a menu called Lightbox will appear just above your page preview window. Click this menu.


Step 3 of 4: Put your form in that box!

Your page should turn blank, and the tool panel will reappear. Select Form and drag it onto your page.


You’ll now be prompted to select your form fields, just as if you were setting up a normal form. Select your fields and click Done.


Crop your form, click Save Changes. The entire sequence is demonstrated in the GIF below.

lightbox form demo

Step 4 of 4: Make ’em open the box (distribute more CTAs)

As discussed earlier, one of the advantages of lightbox forms is you can link multiple CTAs throughout your landing page to the same form. This helps us appeal to multiple buyer types.

Scroll down, and when you find somewhere to place an additional CTA, drag and drop another Lightbox Button (the same as you did in Step 2). Highlight the button, and in the Properties menu on your right, options for “Click Action” will appear, as per the screenshot below.

Selecting Lightbox will link to your original form. Rinse and repeat for every additional CTA you wish to add to your landing page.

NOTE: At this point, you’ll probably notice the builder gives you the option to use multiple lightboxes (Lightbox 2, Lightbox 3) under “Click Action.” Since we generally advise against having more than one goal on a landing page, this tutorial only discusses linking to a single form.

Setting up your A/B test

Now for the fun part! Setting up your A/B test is pretty simple, so you can follow the step-by-step instructions below, OR just watch this 60-second tutorial :)

Step 1 of 3: Duplicate your page

If you started this tutorial by copying an existing page, skip this step.

If you started by creating a new page, open that page by clicking it in your Admin Toolbar.


Next, click Start with a Copy of Your Existing Page.


After duplicating your page, you will need to work backwards and create a variant that has an inline form, instead of a lightbox form.

In your new variant, delete the lightbox CTA.


Next, go to the same Lightbox menu above the tool panel. Click the actual form to highlight it, and then click delete. (Note: If this isn’t completed properly, you won’t be able to add a new form in the next step.)


Next, drag and drop the “Form” widget from the tool panel, select your fields and click Done. You’ll be left with an inline form like this:


Since any other CTAs you’ve linked to the form (in the lightbox version) will no longer work, you’ll need to remove these from your page as well.

Step 2 of 3: Assign traffic

Now that both variants are set up, your dashboard should look something like this.


Next, it’s time to assign traffic to your “Challenger” variant. Simply click the “0%” and assign a traffic value of “50.” Your dashboard should now look like this.


Step 3 of 3: Publish (or re-publish)

From your dashboard, click the blue Publish button towards the top of your screen. If you copied an existing page way back at the beginning, this button will say Republish.


Mazel tov! Your test is ready :)

So what can you expect?

When you test lightbox forms, a blessing of unicorns won’t carry you to a 300% lift, nor will your landing page will be imbued with the strength of 10 fallen kings.

But like any form-based A/B test, you will see a change in the way users interact with your offer. Whether that change is positive depends on your aforementioned hierarchy of persuasion, which you can learn more about in this episode of the Landing Page Sessions.

In essence, lightbox forms are a nuts-and-bolts, throw-on-your-hard-hat type of A/B testing opportunity you can implement without too much pain and agony (e.g. endless hypothesizing).

♭And that’s the way you do it!♮

Lightbox form
About Angus Lynch
As a freelance copywriter, Angus helped ecommerce site owners increase conversion rates. In 2014, he joined Rooster Engagement Tools, which was purchased by Unbounce in April 2015. He now serves as copywriter on the Unbounce Marketing Team.
» More blog posts by


  1. Stephanie Saretsky

    Angus, you always know how to be informative yet hilarious. You also pick the best models for your post photos.

  2. Corey Zeimen

    Should the form be up top or down below? My data suggests both ALWAYS.

    Also, a lightbox with a form in it is much better than sending someone to a cluttered contact page. I am glad unbounce added this feature recently.

    • Angus Lynch

      Hey Corey – Yes, we see very similar data. There never seems to be a clear answer on form placement.

      And yes, many a designer would consider it a UX atrocity to dump a nasty form in the middle of their beautifully designed page. It’s hard to make them pretty!

      If you can distribute CTAs smartly throughout your page, lightbox forms have the potential to 1) increase engagement with your form and 2) help improve your user experience.

      Are you planning to try this? We’d love to hear about your results :)

      Thanks again,


      • Corey Zeimen


        Yes, I am going to let my landing page designer sprinkle in more CTA’s using the lighbox feature on the next landing page design I have for sure. Great idea using these in the middle of the page in conjunction with the top and bottom of page CTA’s to create even more engagement.

    • Craig Atkins

      Yep, always both, at least in my experience. And I can’t really fathom a situation where not having both wouldn’t be ideal.

  3. Paul

    Thanks Angus very useful. But where does the data entered actually go? Can this be directed to Hotmail? I find web email systems unreliable and full of spam and would love to find a form that could go straight to Hotmail.

    • Angus Lynch

      Hey Paul,

      Thanks for the kind words. If you use Unbounce, you can send data to pretty much any marketing automation or CRM platform, however Hotmail (Outlook) is a web-based email service — so it works a bit differently.

      In order to pass data directly to Outlook, you would need to use a tool called Zapier to create what’s called a “webhook” that would essentially act as the glue between Unbounce and Outlook. That said, Zapier’s Outlook service hasn’t yet been released (it’s in production) so this isn’t possible at the moment.

      I hope this was helpful!


  4. aisha

    Hey Angus

    Isn’t what you are referring to as a lightbox form simply a two-step opt-in form that gets triggered when a user clicks the CTA button?

  5. Angus Lynch

    Hey Aisha,

    Yes, these are usually referred to as two-step opt-in forms, however we found many Unbounce users were unclear as to what that means.

    Our use of the term “lightbox form” is an attempt to give a clearer description of what a “two-step opt-in” actually is.

    Thanks for your comment!


  6. kamal

    Nice article. I appreciate this topic. Thanks for sharing .
    Tempo Travel Hire in Mohali

  7. Tom Tailor

    Hello, Angus!
    By reading your article, I found out a lot of new for me! I think that lightbox is a really good decision for online marketing! There’s no need for customers to go through the pages and it is the main advantage!! Thank you a lot for visual representation which helps to imagine how it works! Waiting patiently for your next posts!

  8. Matthew Warren

    This is really making me question where to put my form! Thank for the information about lightbox forms, as well as the great visuals to support your steps.

  9. dark souls 3

    I love how you still write and share about your day and experiences! You feel like such a real, nice, and humble person because of this!

  10. bharat

    Thanks for sharing this info with us. It is like a much needed info for me.

  11. สอนพิเศษตามบ้าน

    Unquestionably imagine that which you said.

    Your favourite reason appeared to be at the net the easiest thing to take into accout of.
    I say to you, I certainly get irked whilst folks consider
    issues that they just don’t recognise about. You controlled to hit the nail upon the highest and also outlined out the
    whole thing with no need side-effects , folks can take a signal.
    Will likely be back to get more. Thanks

    • Angus Lynch

      สอนพิเศษตามบ้าน, I like you. Control those nail hits upon the highest, and don’t get too irked whilst the folks consider :)))

  12. dhanush

    Nice Post
    Thanks for the share

  13. Amit

    Question – we use CTA in a sticky headers (so it keeps following a user as he scrolls down ) and when clicked , take him to a form placed at the end. Lightbox form solves problem of those who have a dilemma of where to put the form, however a sticky header solves that to an extent. Will be interested in knowing your opinion on how will light box form perform as compared to this.. (ofcourse, i will try this out too)

    • Amit

      A follow up to my above comment. Can you place a 50% completion bar on top of form.. (or give an option) , IMHO, that builds a certain pressure on the user to complete it..

  14. Angus Lynch

    Both awesome ideas Amit. Definitely writing those down on my “Must Test” ideas list. Thanks for the comment :)

  15. Jeebon

    Thanks for sharing the tutorial. I do have a question. Most A/B testing tools automatically calculate significance of results. So, how long should I run the test?