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

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:

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 Button onto your page.

   

   
   

2. Go to Element Properties > Button Settings, 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 so you will need to position it to  ‘Send it back’.  In Element Properties > General Properties, 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 Button to your opt-in, making sure they’re contained within the panel.

   

   
   
6. Add another Button, and resize it smaller by dragging the handles. In Element Properties > Button Settings, choose Trigger from the Mode dropdown and change the button label to ‘Close’. Click the Start dropdown in the Quick Actions toolbar, and choose Start Hidden (selected element only).

7. Click Add an Action, then Add New Action and configure the action as follows:

   Event Type > On Click

   Action > Fade Out

   Target > (the name of your opt-in container element)

   

   
   

8. Select your Sign Up Now button on your main page. Go to Element Properties > Button Settings, and choose Trigger from the Mode dropdown. Click Add New Action, and configure the action as follows:

   Event Type > On Click

   Action > Fade In

   Target > (the name of your opt-in container element) and switch on Include Contained Elements

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.