Help with Modal Pop Up Automatically

I’m about to scream. ALL day I’ve been working on this modal and I can’t figure it out.

This is what I’m trying to do.

https://university.webflow.com/article/popup-modal-in-webflow-using-interactions

I have everything set up EXCEPT for the “subscribe” button isn’t activating the modal. Initially I wanted the modal to pop up when a visitor visited the page.

Any clues on what I’m missing or how I can remove the subscribe button and just have the modal pop up after X amount of seconds.


Here is my public share link: LINK
([how to access public share link][2])

[2]: Share a read-only link | Webflow University strong text

Can you repost your public share link? Its not working. I’d be happy to take a look at it.

It’s the webflow tutorial on how to create a modal. I’m just trying to figure out how to design the modal so it pops up 10 seconds or so after someone visits my site. I’m not sure how to create that in interactions.

1 Like

I think Stevin is referring to your project’s read-only link — it allows us folks in the Forum to check out the project you’re working in and see what’s going on + see if there’s a solution. Do you have a Webflow project that you’re trying to re-create the pop-up modal in?

If so, you can learn how to share your read-only link here.

1 Like

Oh! hahaha sorry. My first time on this forum.

https://preview.webflow.com/preview/creativeclicks-site?utm_source=creativeclicks-site&preview=e0c17831c3a566972dc7505cc765aec1

1 Like

No worries, and welcome! :slight_smile:

I’ll take a look right now.

Are you referring to the following modal on the homepage?

If so, are you wanting to have the modal pop-up automatically after 10 seconds? Or are you wanting to have it pop-up when someone clicks subscribe? Or both?

Both. I actually figured out and got the subscribe to work. Now I just need to get it to pop up as well when visiting the home page.

Sorry for the delay. This forum wouldn’t let me respond until 5 minutes passed. It said I was replying to quickly??? LOL

No worries - this video should show you how to build out the timed portion of your pop-up modal!

Hope this helps. :grin:

2 Likes

OMG your amazing!! You saved me so much time and I learned a lot.

1 Like

No problem! I should have been more specific! but looks like you found a solution! Best of luck and awesome!

There’s also a great template from Vin.
Great for user experience. Avoids popups to show on page refresh.

https://webflow.com/website/Webflow-Cookie-Template

1 Like

You guys are so amazing! Thank you everyone for being such a great help and providing such a wonderful first impression to this forum.

Well I’m back already and about to scream again. I had the modal working when you visit the page and than the modal pops up. I tried to add a subscribe button as well and messes everything up. Now neither are working.

https://preview.webflow.com/preview/creativeclicks-site?utm_source=creativeclicks-site&preview=e0c17831c3a566972dc7505cc765aec1

Any ideas on what I did wrong?

Ok for some reason I don’t see the interaction applied. good news though.
It is still there you just need to apply it to the modal window again.
click on pop up modal, go to interactions then add page load interaction you will see it there.

one thing I noticed in my screen and will get you into trouble with different screen sizes is you are using pixel values to set the width and height of the middle form. Problem is like on my laptop screen I can’t sign up for your form. I can still click the x which is good but. you’d be better using % or VH and VW viewport height/width.
you can set your max widths in pixels if you want to not exceed a certain size but Here is what it looks like on my screen with %

and here is what it looks like without

percentages will also save your life in mobile esp with pop ups.
I get in the habit of using them for most things and then set max pixel sizes esp on desktop where the sizes vary so much

always
Jeremy

1 Like

Thanks for sending me this message. I am new to interactions so I’m not sure “how” to activate it I guess. Can you tell me how to do that?

It looks like I figured it out? Can ya’ll click on it and see?

https://preview.webflow.com/preview/creativeclicks-site?utm_source=creativeclicks-site&preview=e0c17831c3a566972dc7505cc765aec1

It works for me in the Designer! Nice work. :grin:

Thanks mattvaru! And thank you jbleroux for the tip about sizing. I adjusted that as well.

One last question (I hope)…

Obviously I’m trying to set it up so once you enter your email in the modal, you receive and email confirming your email address and then are prompted to download the file. Any direction on how to start this process would be greatly appreciated.