How to make a pop-up modal on home page?

Design help General
1

Hi friends, I need to make a small popup on my home page that appears when the user first arrives at the site. I don’t want it to appear if a user returns to the home page from another page within the site, though. Is this possible? I found a great video on creating modals from buttons, but this did not help.

1 Like
2

Hi @troyANFT

Maybe something along the lines of @vincent - http://cookie-template.webflow.io/

Is it a cookie type pop-up you are looking for or for some other reason?

3

Hi StuM,

Yes, that’s exactly what I need. Is there any way to build this in WebFlow?

Thanks!

4

That site was indeed built in Webflow - and uses some custom code…

Click to close the cookie and you’ll see both the instructions on how to make (bake) it, and also you can duplicate (clone) the site too…because @vincent is a bit of a legend :slightly_smiling_face:

5

Yikes, I didn’t even glance at the website after closing the popup. What a silly question. Thanks for your help!

6

Unfortunately this is way over my head. I know a little Python, but that’s it. No JS and not really any HTML/CSS.

I copied Vin’s code into the Home Page Settings section “before body tag” as instructed. But I don’t know what to do after that.

I don’t know how to design the popup-overlay element, and I don’t know how to design my own popup (like where to set the text and all that).

7

Hey there!

If you are wondering on how you can implement a pop-up modal on your Home Page, then this is the right place for you. Usually, pop-up modals are used if you want to show some ads, additional information or other messages that are not part of the main body of your form.

You can see following code:

%20Then%20the%20content%20of%20it%20will%20be%20this%20HTML%20code_%20_p__a%20class%3D_button_%20href%3D_%23open__Open%20Pop-Up__a___p_%20_div%20id%3D_open_%20class%3D_modalBox___div__a%20class%3D_close_%20title%3D_Close
%20Then%20the%20content%20of%20it%20will%20be%20this%20HTML%20code_%20_p__a%20class%3D_button_%20href%3D_%23open__Open%20Pop-Up__a___p_%20_div%20id%3D_open_%20class%3D_modalBox___div__a%20class%3D_close_%20title%3D_Close700×500 85.1 KB

Hope this Helps!

8

Hi Daniel,

This says “We need a text field on our form.”

What form? The form element? Or by ‘form’ does it mean the home page itself?