How to Create a 2-Step Opt-In Using Layers

This article describes how to create a 2-step opt-in where the user needs to click a button to reveal the form, but there is only one submission.  To create a 2-Step opt-in with multiple submissions, so data is captured at every stage, see:

Full Walkthrough: Setting Up A 2-Step Opt-In

Video Tutorial:

Article:

A 2-step opt-in is a method of collecting sign-ups where, instead of putting your sign up form in plain sight on your page, the user clicks a button to reveal the form (usually in a pop-up). Adding an extra step to the opt-in gets prospects to complete a small action before prompting them to ‘complete’ it: the logic is that people are more likely to round off one unfinished task than complete two whole ones.

To create a simple 2-step opt-in:

  1. In the Page Builder, click on Form Elements in the Elements tray and drag a Submit button onto your page.
  2. In the Properties panel, click Button Settings and change the button label to a call to action (e.g. ‘sign up now’).
  3. Click the Layers button in the top toolbar, and click New Layer. Give the new layer a name and click OK. Click the Select checkbox next to its name to edit it.
  4. Drag a panel element from the Elements Tray onto the canvas. Then, click on Form Elements in the elements tray, drag over Text Input and Submit button elements and position them on the panel.
  5. Add another Submit button to your container panel, and resize it smaller by dragging the handles. In the Properties panel, click Button Settings. Change the button label to ‘Close’, and choose Trigger from the Mode dropdown.

  6. Click to Add an Action. Under Element Triggers, click the plus icon to add a new action.
  7. Click the Trigger dropdown, and choose Click. In the Behaviour dropdown, choose Fade Out, and under the Subject dropdown, choose your opt-in layer.
  8. In the Layers panel, click the Select checkbox to hide your layer. The panel and its contents should disappear from the canvas, leaving your main page visible. Toggle Visible to Hidden to make the layer hidden on page load.
  9. Click to select your CTA button on the main page, then click Actions in the top toolbar. Under Element Triggers, click the plus icon to add a new action.
  10. Click the Trigger dropdown, and choose Click. In the Behaviour dropdown, choose Fade In, and under the Subject dropdown, choose your opt-in layer.

Click Save, then Preview to see your page. Click on your CTA button, and the layer containing your opt-in form should appear. Click on your Close button, and the opt-in form should disappear.