Pop-ups or modal windows are an effective way to offer users more information and options. Here’s how you can use and build them in Webflow.
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.
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.
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.
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’).
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’).
The three main benefits of Modals are:
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.
Modals are great at converting your website visitors into leads or subscribers if you use them smartly.
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:
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.
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:
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!
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.
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:
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:
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:
That's my preference for this modal — I like to have it as a 1 column grid with 20px between rows.
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:
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.
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:
Then let's start adding actions there step-by-step, and we'll start with the modal wrapper:
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.
Let's do a very similar process for modal window element:
And now play your animation to preview and test it! Click 'Done' to save your animation and move to the next step.
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!
Almost there! Now the modal closes, but it looks too fast and sharp. Let's also add smoothness to it.
Let's repeat the last steps for another element:
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:
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.
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.
Build beautiful and fully responsive websites in no-code that work perfectly on all devices