Trigger Popup with Link or Button a.k.a. Two-Step Signup Froms

In this guide, I will show you how to create 2-step sign up forms.

Requirements:

  • Magic Action Box 2.16.9
  • Magic Action Popup 2.5

Create your popup

Follow the steps to creating your first popup.

Get your popup ID

Popup ID

Store the Popup ID for later user. In this guide I will be using the Popup ID 1724.

Create your trigger link

A trigger is basically a link which looks likes this:

<a href="#" class="mab-popup" data-popupid="1724">Click to popup</a>

There are two important things required for the trigger to work: a custom class – mab-popup – and data attribute – data-popupid.

As you can see, our trigger code above has those two things.

If you are adding your trigger link within your blog post or page content, you will want to switch to Text mode.

Switching to text mode

You may also use an image as your trigger. If you know how to create an image as a link, then creating the trigger will almost be the same process.

Make sure you are in Text mode.

Create trigger link

Delete link text

Add the image

Add media

Choose your image

choose button image

Resulting html code when viewed in Text mode

Result code

Switch back to Visual mode

Visual mode

Two-step sign up sample

signup

No comments yet.

Leave a Reply