How to Create a 2-Step Opt-in Using Hidden Elements

Video Tutorial:

Article:

If you only have a simple opt-in in mind, or already have multiple layers and want to keep things simple, you can create a simple pop-up opt-in using hidden elements.

  1. In the Page Builder, click on Form Inputs in the Elements tray and drag a Submit button onto your page.
  2. In the Properties panel, click General Properties, then change the button label to a call to action (e.g. ‘sign up now’).
  3. Drag a panel element from the Elements Tray onto the canvas where you want the opt-in to appear: this is your container panel. In the Properties panel, click on General Properties and give your container a name (e.g. My Container).
  4. With your panel selected, click the Start dropdown in the Quick Actions toolbar, and choose Start Hidden Including Contents.
  5. Add elements like Form Inputs and a Submit button to your opt-in, making sure they’re contained within the panel.
  6. 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’.
  7. With the Close button selected, click Actions in the top toolbar. Under Element Triggers, click the plus icon to add a new action. Click the Trigger dropdown, and choose Click. In the Behaviour dropdown, choose Fade Out, and under the Subject dropdown, choose your container panel.
  8. Select your Sign Up Now button. In the Actions panel, under Element Triggers, click the plus icon to add a new action. Click the Trigger dropdown, and choose Click. In the Behaviour dropdown, choose Fade In, and under the Subject dropdown, choose your container panel.

Click Save, then Preview. Click your sign up button to fade in the opt in, and you’ll be able to click the Close button to dismiss it.