Keep an eye on your inbox!
Hmm, that didn't work. Try again?

How to create a pop-up modal in Webflow

Design an effective sign-up experience with subtle animation and a clean design.

Mat Vogels
December 1, 2015
Tutorials

Modals are an incredibly common design pattern. We’ll show you how to create your own in Webflow.

For this example, we’ll create a pop-up that appears when someone clicks a button on the page.

The magic happens with a click of that button.

I’ll use our free blog template, Escape, and just add the subscribe button and pop-up to the template. Watch the video to see how and keep reading for details!

 

Step 1: Add the pop-up modal wrapper

First, we’ll drag in a Div Block that will serve as the wrapper for the modal.

As you’re dragging that in, make sure it goes to the top of your site’s body — it’s easiest to do this using the Navigator pane.

‍Make sure the wrapper goes at the top of your site’s body.

Step 2: Style the pop-up modal wrapper

Once we’ve added the Div Block to the top of our page, we’ll give it a class so we can style it:

Class Name: Modal Wrapper

Top Padding: 80px

Height: 100%

Position: Fixed, cover full

Z-index: 9999

Text-align: Center

Background Color: rgba(0,0,0,0.5)

Now your screen should look like this:

Step 3: Add your sign-up wrapper

Now we’ll add another Div Block to our Modal Wrapper to actually hold our content, including our sign-up form.

Simply drag in a Div Block and drop it inside your Modal Wrapper.

‍Make sure your new Div Block goes inside the Modal Wrapper.

Step 4: Style the sign-up wrapper

Now that we have the new sign-up wrapper inside our modal wrapper, let’s give it a class and style it:

Class Name: Signup Wrapper

Padding - All sides: 20px

Margin: Auto

Width: 450px

Max-Width: 100%

Background Color: White

Step 5: Add our modal's content

With our structure in place, let’s add the rest of the content.

First, we’ll drag in a Heading (H3), some paragraph text, and a Form element.

Now add some content to your modal.

I’m going to cut the form element down to an Email field, and create classes around the form elements.

Class Name: Form Field

Height: 50px

Border: 2px #4aaec2

Class Name:Subscribe Submit Button

Height: 50px

Width: 100%

Background Color: #5cc489

(I also updated the default copy for the heading and paragraph text. Because you always want to design with real content.)

Step 6: Add a close link

Next, we’ll add a text link so people can close the modal once they’ve signed up.

Just drag a Text Link to the top of our Signup Wrapper, and give it a class with the following styles.

Class Name: Close Link

Display: Block

Text-align: Center

Font Size: 12px

Font Color: #999999

Step 7: Add an interaction to the modal wrapper

The final steps are all about interactions. We need to add an interaction to the Modal Wrapper, the Subscribe Button, and the Close Link.

Starting with the Modal Wrapper, we’ll add an interaction called Modal Wrapper.

We’ll set the Initial Appearance to:

Scale: 1.10

Opacity: 0%

Display: None

‍The Interactions panel for your modal wrapper.

That’s it! This just ensures that when the page loads, the modal doesn’t display.

Step 8: Add an interaction to the subscribe button

Now we’ll add an interaction to the Subscribe Button that will open the Modal Wrapper on click.

First, select the Subscribe button, then add a new interaction. We’ll skip the Initial Appearance and go straight to setting up the Click Trigger.

Then, we’ll add the Modal Wrapper as the element we want this interaction to affect. To do this, simply type “Modal Wrapper” in the first text field.

Add an interaction to the button, but have it affect the Modal Wrapper.

Now any interaction we add will affect the Modal Wrapper, not the button.

Let’s add the following for our First Click:

Step 1:

Display: Block

Step 2:

Scale: 1

Opacity: 100%

Since we don’t need it, we’ll leave the Second Click empty.

Step 9: Add an interaction to the close link

We’re almost done! The final piece is to add an interaction to the Close Link in the modal.

We’ll click on the link, then add an interaction to it.

Just as we did with the Subscribe Button, we want to add an interaction that affects the Modal Wrapper element.

Add a close link, then add an interaction to it, again set to affect the Modal Wrapper.

Add the following interactions to the First Click:

Step 1:

Scale: 1.1

Opacity: 0%

Step 2:

Display: None

Step 10: That’s it!

What we’ve done here is reproduce the interaction we created in the Modal Wrapper’s Initial Appearance, since we want this link to return the Modal Wrapper to its initial state of being invisible.

We’ve done it! If you take a look in Preview mode, you should see something that works like this:

When you're all done, switch to Preview mode to test the interaction!

Check out the pop-up modal in Webflow.

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.