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

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 the eye icon to select 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, and resize it smaller by dragging the handles. In the Properties panel, click General Properties, and change the button label to ‘Close’.
  6. Click to select the Close button, and click Actions in the top toolbar. 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 eye icon to hide your layer. The panel and its contents should disappear from the canvas, leaving your main page visible.
  9. Screen Shot 2017-10-24 at 11.44.43.png
  10. 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.
  11. 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.