How to prompt pop-up modal until user inputs email

Design help Animations & Interactions
1

Hello!

I’m working on a site where users are able to download resources in the form of PDFs.

The client has requested that users are met with a pop-up window when they click on any of the “download” buttons throughout the page. This pop-up window would prompt the user to input their email address in order to download the PDF. However, once the user has put in their email, they should never see that pop-up again. So I assume I need some sort of cookie storing functionality so the same user can start a later session and download links without seeing the pop-up as they’ve already provided their email.

So I could use some input/advice on how to configure a modal that

  1. Prevents the download until the input criteria is met
  2. Shows until the user inputs their email
  3. Registers the same user in future sessions to not show the modal on click

Thank you for any and all help!

Unfortunately I don’t have a link to share as I’m still just trying to figure out if we can achieve this functionality :slight_smile:

2

Hi @Ryan_Shadow_Creative, thanks for your post. I have a few comments for your project:

You probably could use a cookie script like js-cookie: GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies. Jquery and javascript are built in to Webflow for custom code.

Here is how to use custom code: Custom code in head and body tags - Webflow University Documentation, plus there are lots of resources here in the community.

  1. Prevents the download until the input criteria is met

– In download modal, you can create a form with buttons for download

  1. Shows until the user inputs their email

– In custom code, you put an event.preventdefault on the form so that when the submit button is pressed, the form is not submitted and rather a javascript function is run to check if the email provided is valid

– If code if the email is valid, you can submit the form using code, then provide the link to the customer

  1. Registers the same user in future sessions to not show the modal on click

– In javascript function, you check if email is provided, if so, then set cookie indicating a status for the download which can be checked later when modal re-opened.

I hope this helps to give some ideas, a little javascript or jquery required, but probably doable.