How to Create Click-Trigger Popups in Webflow to Grow Your Email List

by Shane Rostad - Want to get the next post delivered to your inbox? Subscribe Now.

I came across an article by Bryan Harris in which he recommends using click-trigger popup forms to grow your email list.

After a little searching I found that leadpages and SumoMe both offer this functionality, but cost $50 and $29 per month respectively.

So, instead of adding another subscription to what feels like an ever-growing list of SaaS tools, I decided to build it myself in Webflow.

In just 20 minutes I was able to build a feature (for free) that would have cost me over $300 this year! So yea, Webflow just paid for itself.

The best part of it all? You can build it too without any knowledge of how to code. That’s why I decided to write this step-by-step tutorial on building on-click popups to generate new email subscribers.

Still unsure what I mean? Here’s the finished popup using the strategy Bryan laid out in his article on growing your email list:


Step 1: Add the on-click button to your page

To get started, we need to add the element you want people to click on to open the popup form.

To do this, you’re going to head to the collection page for your blog posts:

Once there, you’re going to add a byline (or edit your existing one) by simply adding a new paragraph element, and changing the text to: “By (your name) - Get Free Updates on New Posts Here”:

Style and align it with your content however you’d like, but be sure to not make it too large. We don’t want this to be too distracting to readers that it turns them off.

Now you’ve got your call to action, and the last thing you’re going to want to do is create a link on the word ‘Here’. Simply highlight the word and press the ‘insert link’ button.

By default your link will be directed to ‘#’, which is actually what we want. Remember, we’re not sending people somewhere new, we just need the link to initiate our popup.

Last thing to do here is to ensure it looks okay on all screen sizes, and adjust the styles to ensure a good experience on mobile.

Step 2: Creating the popup

It’s time to get down to creating our popup. For the purposes of this article, I’m not going to get deep into the science behind pop-up designs. Instead, I’ll focus on showing you how to build the exact popup Bryan uses, and you can tweak it from there.

Open your Webflow navigator and select the highest level container on the page:

Then you’re going to add a new container, which will hold your popup.

Don’t worry about it messing up your page, we’re going to fix that right now.

Go to your styles tab and change the position of your container to fixed top, and set the z-index of your container to 3.

This does a few things for us. By ‘fixing’ the container to the top of the page it, and any contents within it, will stay in the same position as a user scrolls. By increasing the z-index, we’re basically telling our site ‘put this above anything else on the page’.


Next up we’re going to add a div to our container, which will be our popup.

You can add your own styling later, but for now just add the styles I list here:

Now your screen should be looking like this:

Hooray! We’ve got our blank popup. It’s time to start adding some content, and then I’ll show you how to add the onclick functionality.

Step 3: Add content to your popup

The most important thing to have on a popup is an exit option. There’s no better way to piss off your readers than showing a popup they can’t remove.

There’s a few ways to do this but we’re going to simply add an X using text.

Add a new paragraph to your Popup div, and replace the text with a single uppercase ‘X’.

Next, we’re going to turn this x into a clickable box by giving it an explicit height and width of 30px, a bit of top and bottom padding, and floating it to the right.

And lastly, change the cursor to a pointer as a way to cue people to the fact it is a clickable element.

Now let’s fill out the rest of the popup by adding an H3, a form, a paragraph element, and moving the popup to the middle of the screen. We’re going to take the copy directly from Bryan’s post to use as an example here.

To move the popup to the middle of the screen, add a top-margin of 140px to the popup container.

Then add an H3 element and set the clear value to ‘both’:

This will push your heading below our exit button.

Finally, add your form element and the 100% privacy paragraph text.

Then, pat yourself on the back because you’ve just made a popup independent of any tools! Now comes the fun part in which we’re going to add the on-click functionality.

Step 4: add the on-click functionality

Of course we don’t want this popup sitting in the middle of your screen. To fix this, we’re going to change the display value of the popup using interactions.

Head to your Navigator and select the container for your popup element.

While selected, go to the interactions panel and add a new ‘Mouse Click’ element trigger:

Under ‘On 1st Click’, add a new action and choose ‘Start an animation’.

Press the ‘+’ button to add a new animation.

Then add a new timed action and choose ‘Hide/Show’ from the dropdown.

Keep the setting for ‘Affect’ as ‘Selected Element’, and set the display value to ‘Block’:

This interaction is going to be used to open the popup on click, so name it "Trigger Popup."

We’re going to need to add another interaction to hide the popup. Go back through the steps above, but this time create an animation named ‘Hide Popup’ and set the display value to none:

Now head back to the interactions panel and remove any of the animations you’ve just created. This:

Should be changed to:

You’re probably wondering why we just made those interactions to remove them. That’s because we created two animations:

The first one will change the display value of the popup container when an element is clicked. The element we want people to click on to activate the animation is where we need to add the trigger. Let’s do that now.

Select your container element again and change the display value to ‘None’:

Now your popup is hidden. This is how we want your popup to be as a default state.

Select your link element we created in the beginning of this tutorial and add the ’trigger popup’ animation to it:

If you go to preview mode, you’ll now see that when you click on the link your popup shows up.

For the second interaction select the paragraph element we created as an exit button for our form:

Then head back to the interaction panel and assign this paragraph the ‘hide popup’ interaction.

And just like that you now have a click-trigger popup!

Was this helpful? Do you want me to make any specific Webflow tutorials? Let me know on Twitter!

Shane Rostad

I’m a web designer who cares as much about business results as I do making things look good.

Get the next post delivered straight to your inbox

SUBSCRIBE

© 2019 All rights reserved

HOMEWRITINGCONTACT