Streaming live at 10am (PST)

Help with Modal Pop Up Automatically

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.

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.

There’s a few ways to do this:

  1. Adding a download link to your Form’s Success Message: Upon completion of your form, users should see a message of some sort, which comes default with Webflow form elements. You can upload the file (if it is supported by Webflow) to the Webflow Assets manager and create a text link that links to a copy of the file. (Please see Configuring Success and Error Messages here AND Using Assets here.

  2. Redirecting on form submission: You could also either create a separate page that contains the file download link OR host the file on a service like Box, Google Drive, or Dropbox - and simply redirect the user to that page/link after they fill out the form. (Please see this forum post.)

Do either of these options have a “verify email” option? I would prefer to have real emails and not fake ones just to get the ebook. lol

Unfortunately not, as far as I know. I would recommend looking into Mailchimp, Constant Contact, AWeber, et cetera for that type of functionality. I know Mailchimp has built-in pop-up modals and can do email verification links to ensure (to the best of its abilities) that you’re getting real email addresses.

Ok. I have Mailchimp and use it currently. After all I went through to get my modal styled and created, I would hate to start over with another modal in Mailchimp. Is there a way I can use the modal I have in webflow now and verify emails (confirmation) in Mailchimp?

Yes the modal works, I’m viewing on a standard 15" laptop and I can’t fill in form though because of the set px height

Here is a little video to help make your popup responsive
https://www.loom.com/share/8be7e0c64ee6404cb6d9de5a49de0920

Here is the webflow university video for setting up mailchimp with the forms

always
Jeremy

Jeremy, thank you for the video and tips. I learn a lot. Videos are awesome!

On the mailchimp integration, it’s not working. Are you able to see what I’m missing? It’s so simple on the video but for some reason it’s not working.

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

Your id doesn’t quit look quite right I just checked on my id from a recent project and it is a series of letters and numbers. Yours is only numbers. Can you send me a direct message with a copy of your code you copied to your text editor. and I can try to help you figure it out. I don’t want you to post the private info here for everyone to see.

Jeremy

Hi @mattvaru @jbleroux ,
I have successfully created the timed popup modal but do you know how to disable the page scroll when that timed modal is on?