Pop-ups or modal windows are an effective way to offer users more information and options. In this article, I'll discuss the advantages and disadvantages of modal windows and teach you how to build a custom pop-up contact form in Webflow.

Your options when adding modal windows (pop-ups)

Sign-up form or lead capture

Use modal windows to gather data from your users. Register and log in them on your website, or offer to leave their contact information so that you could get back to them and help. Popups here is a great option to provide users with functionality without breaking their journey as they stay on the same page.

Modals for Newsletters

Another way to use modals is to offer users subscribe to your newsletter. The best way to do it is to open a popup when users scrolled till the end of an article which means they might be interested in your content. Why not offering them to subscribe then? Just remember, your popups shouldn’t be intrusive, so don’t show them when a user is in the process of reading. Give them time to finish and then act.

Modals to share your contact information

I know your contact information is important. There are many cases when you want to push your contacts on the main screen and the most noticeable part of your website. If that’s your case, skip this point. 

But if you design a cool minimalist website to showcasing different values of your business, nice galleries, or visual content you will surely want to save space for it. In this case, consider placing your contact information inside a popup. Don’t forget to make the trigger (‘Contact us’ call to action) well-noticeable and clear to meet your users’ expectations (‘if I click this button this happens’).

Capture users attention

Another popular method is using a popup whenever a visitor is going to leave your website. This might be annoying though so use it smartly. Users' response might be to close the popup immediately, so you have about 1-2 seconds to grab their attention. How? Offer them a real value. Give them a coupon or a discount which they can use right now to get the best out of your services. Make it visual and noticeable. Make them want to stay longer on your website and become your client.

Pro tip: you can combine the use methods, e.g. place your contact information together with a contact form inside a popup, or offer value and collect data at the same time (‘I will call you within 30 seconds to help, just leave your phone’).

Why and how you should use modals

The three main benefits of Modals are:

They are eye-catching

Consider using full-screen popups instead of small ones located somewhere in the corner. Thus you grab users attention and have a good space to place your business proposition, or a contact form, or offer a discount.

They are great for conversions

Modals are great at converting your website visitors into leads or subscribers if you use them smartly.

Easy to build in Webflow

You can build them without any third-party plugins or extensions, so you don't risk your page loading speed and website security.

Some UX designers argue though that modals can be bad for user experience for several reasons. As an internet user, you might have already guessed them:

• They can be intrusive, especially when people don't expect them to be there;
• They may be hard to operate with on smartphones (which is quite crucial in the era of mobile devices);
• They often prevent you from browsing a web page until you close the pop-up;
• It's often not obvious how you can close the pop-up window.

But good news — those are just warnings for you to consider when building a modal. If you decide to apply it to your website, use the list above as a preventive checklist to make sure your pop-up is user-friendly.  

Building a pop-up in Webflow for my client

Last year I built a website for Rica — Dental Clinic. The client’s old website had performance problems such as low page loading speed, low conversion, poor navigation. We decided to redesign and build it on Webflow.

The new website has many pages and detailed navigation in the menu. We needed a simple design solution for making users contact the clinic fast and easy without searching for contact information. 

I came up with one: a big well-noticeable contact button in the right bottom corner. This contact button is fixed and always stays visible when the page is scrolled for both desktop and mobile users. Most users are familiar with this position on the page. I believe you saw that many times too when you want to chat to a business. 

Here's the link to Rica's website. Check it out: https://www.rica-stom.ru/.

The contact button opens a modal window on click with 3 contact options. But it works like this only on the desktop.

As I mentioned above, modals are not user-friendly on mobile devices. So from a UX point of view, it's better to start a direct call on mobile than give them a pop-up. You can check out an article I’ve written on UX best practices and what to look out for here.

That's why I built a different button for mobile though it looks the same and is in the exact bottom right corner. And I set it to start a direct call.

The three contact options in the desktop modal are:

• call the clinic directly using a telephone number,
• make an appointment via WhatsApp,
• leave a telephone number in a contact form for a call-back.

I should say that fewer contact channel options are always better — offer them 1 or 2. Email or Whatsapp is a good choice example for a B2b website. But in this case, we decided to keep all 3 contact channels there because the clinic has worked since 2011 and had them on their old website. 

Their long-term clients check the website sometimes and are used to the things that always were there. That’s why we decided to reuse all 3 options. 

For UX’s sake, don’t frustrate your users by changing core website functionality when you redesign it. Your loyal users are already stressed enough with the new look! :)

 And that's enough of pre-history and theory. Let’s move on to the step-by-step guide!

How to build a modal in Webflow: a step-by-step guide

Step 1: Add a trigger

First, let's build and style the button that will trigger later the modal opening.

I drag and drop a Div Block into Body, give it a class 'call-button', and style it. I set its position to fixed and gave it a higher Z-index (1000) to always be above all the layers.  I also set the cursor to a pointer for this element.

Step 2: Add a modal wrapper

Then I drag in another Div Block into Body and give it a class of 'modal-wrapper'. I set its position to fixed and full because I don't want users to scroll when it's open. I gave it a Z-index 2000 — higher than the contact button because I want it to be above the call button. Give it display parameters:

• Display: flex;
• Direction: horizontal;
• Align: centre;
• Justify: centre.

Step 3: Add a tint layer

Once I've added the modal wrapper, I drag in another Div Block inside of the wrapper and give it a class 'modal-bg'. You need it to make your modal window more noticeable by giving a shadow to its background. Also, we will use this element to close the modal window on click outside of it.

Let's style it:

• Position: absolute, full;
• Z-index: 2100 (higher than the modal wrapper);
• Background color: rgba(0, 0, 0, 0.35)

Step 4: Design a modal window

Let's add another Div Block inside of the modal wrapper and give it a class 'modal-window'. Make sure you don't place it inside of our tint div block — they must be sibling elements.

Let's style it. I applied:

• Display: grid;
• Justify items: centre;

That's my preference for this modal — I like to have it as a 1 column grid with 20px between rows.

• Padding: 60, 60, 60, 60;
• Width: 100%;
• Max width: 600px;
• Position: relative;
• Z-index: 2200 (higher than the modal-bg);
• Background color: #fff.

Don't forget your pop-up must have a close button. Let's drag in a Div Block with a close icon (I add an image element inside of the div or set a background image for it), give it 'close-modal' class and style it:

• Width: 60px;
• Height: 60px;
• Position: absolute, top right;
• Cursor: pointer.

And then I add the other elements to my modal window — contact details and the form. I simply drag in the elements I need into the modal-window element — text block, links (for the phone numbers) and form, and style them. And when I finish styling I pass to set the interactions.Modal window styling.

Step 5: Set the interactions to open the modal

Now we pass to the most fun process — setting the interactions. Webflow makes animations super easy without coding. And I'm so excited to tell you how to create those!

Let's select our modal-wrapper element again and set its Display to 'None' because we want to continue our design process. Don't worry, we'll set interactions right now for it so that users could open it on click.

Let's start with selecting the 'call-button' element — our popup trigger, and go to the Interactions panel (short-cut H). Here we need to do:

1. Add the 'Mouse click (tap)' element trigger;
2. In the trigger settings select 'class'.
3. Select 'Start an animation' on 1st click;
4. Create a new timed animation and name it 'open-modal-animation';

Then let's start adding actions there step-by-step, and we'll start with the modal wrapper:

1. Select 'modal-wrapper' element in the navigator panel;
2. Add a new action by clicking a plus icon next to 'Actions' or inside the panel and select 'Hide/Show';
3. Set affect to 'class' and 'all elements with this class';
4. In timing switch it to 'Set as initial state';
5. Set Display to 'none'.
6. Repeat the second step: add a new action by clicking the plus sign and select 'Hide/Show' again; 
7. Set display to 'Flex' (as we had it initially in our design).

You'll see the modal window appear. If it doesn't show, please follow the steps again carefully.

We've set our basic interaction, and now let's add some smoothness to it by playing with our background tint and modal window opacity.

1. Select 'modal-bg' element in the navigator panel;
2. Hover on our initial state modal wrapper in actions and click the plus icon next to it;
3. Select 'opacity';
4. Set affect to 'class' and 'all elements with this class';
5. Set the opacity to 0%.
6. The timing has to be already set as an initial state because you clicked next to initial state action for modal wrapper;
7. Add a new action below the modal wrapper: select opacity;
8. In timing select easing: 'Out quad'; 
9. Set the duration to 0.5s;
10. Set the opacity to 100%;

Let's do a very similar process for modal window element:

1. Select 'modal-window' element in the navigator panel;
2. Hover on our initial state modal wrapper in actions and click the plus icon next to it;
3. Select 'opacity';
4. Set affect to 'class' and 'all elements with this class';
5. Set opacity to '0%'.
6. The timing has to be already set as an initial state;
7. Add a new action below the modal wrapper: select opacity;
8. In timing select easing: 'Out quad'; 
9. Set the duration to 0.5s;
10. Also, set the delay to 0.5s (to start the animation after the tint became visible);
11. Set the opacity to 100%;

And now play your animation to preview and test it! Click 'Done' to save your animation and move to the next step.

Step 6: Set the interactions to close the modal

You can test your web page in the preview mode and see that you open your contact modal window but can't close it. There are 2 ways we want our pop-up to get closed and they are: 1) close icon inside the pop-up, 2) and on click outside of the pop-up. These 2 are our triggers for closing. To do this we need to create another interaction for them — only one that will be applied to both. Let's do it!

1. Select 'modal-bg' in the navigator;
2. Go to Interactions (H);
3. Add a Mouse click (tap) element trigger;
4. In the trigger settings select 'class';
5. Create a new timed animation;
6. Name your new animation 'close-modal-animation';
7. Select 'modal-wrapper' element in the navigator;
8. Create a new action for it: Hide/Show;
9. Set affect to 'class' and 'all elements with this class';
10. Set Display to 'none'.

Almost there! Now the modal closes, but it looks too fast and sharp. Let's also add smoothness to it.

1. Select 'modal-bg' in the navigator;  
2. Add a new action above the created one (so that 'modal-wrapper' closing action is the last one in the list) and select opacity;
3. Set affect to 'class' and 'all elements with this class';
4. In timing select easing 'Out quad';
5. Set the duration to 0.3s;
6. Set the opacity to 0%;

Let's repeat the last steps for another element:

1. Select 'modal-window' in the navigator;  
2. Add a new action above the created one (so that 'modal-wrapper' closing action is the last one in the list) and select opacity;
3. Set affect to 'class' and 'all elements with this class';
4. In timing select easing 'Out quad';
5. Set the duration to 0.3s;
6. Set the opacity to 0%;

Click 'Done' to save your animation.

The last thing we need to do is to apply this interaction to the close button within our modal window. It's just a few clicks:

1. Select 'close-modal' in the navigator;
2. Go to Interactions (H);
3. Add a Mouse click (tap) element trigger;
4. Select 'close-modal-animation'.

Great job! You finished!

Preview, publish and test it. You can also customise this guide and play with your animation duration, easing, whatever. Don't forget to test if your contact links and form are functioning as well.

A quick tip: you can also wrap your trigger button and the modal div into another div, give it a class ‘modal’ of something, and make it a symbol. Then you can reuse it on your other web pages and edit it quickly for all.

Summary

The contact button I've built for Rica clinic is noticeable, functional and conversional. It helps users find contact information fast without searching for it. It collects users' contact information as well. And it was so easy to build it in Webflow.

Go on and build your first site for free! Webflow has a free trial which allows creating a 2 pages website. You can take as long as you need and add a site plan when you're ready to add more pages and publish on a custom domain. 

Of course, incorporating these contact modals depends largely on your business itself. The goal is to customize the element to fit your business, its goals, and its needs. While a healthcare business finds direct contact via phone more efficient, an entrepreneur running a company in X industry might find it more fitting to use email. Use the method that fits your users and your market.