I have a modal subscription form that appears on my home page.
I dont want it to appear EVERY time the same person goes to the home page.
I know that it has something to do with (“cookie”) this cookie will tell the browser to not show up again the form when the user goes to the home page (or other page that the user has already visited with the form).
I don’t have the knowledge to implement this.
I saw this other post and tried to use this code but it didn’t work
As you can see I never got an answer. If you don’t need the 5 time rule and just a normal pop-up that you see once. You can use the script mikeyevin linked to. That usually works great
@krubens - I never saw that original post from February and while I admittedly know almost nothing about cookies (outside of what I learned from PixelGeek’s tutorial) I believe with some adjustment you should be able to get that code working. A quick search points me towards using localStorage and assigning a number to the cookie. If the cookie == 5, display the modal, otherwise hide it. Obviously an oversimplification, but it may help you out.
@lizard - Without seeing your read-only link I wouldn’t be able to troubleshoot the issue, however I’m happy to look at it if you’d like. Like I said above, I admittedly don’t know really anything about cookies, but sometimes an extra pair of eyes can find any issues in the code.
If you wish to use cookies, you can use the js-cookie.js library and a few lines of javascript.
The idea of the script is the following
define the attribute of your cookie
check if there is such a cookie in the user’s browser
if not cookie found, unhide the popup
once the user clicks close button of the popup, setup and store a new cookie for a year
Vanilla Javascript:
/*
* cookie check + cookie creation + popup reveal
*/
document.addEventListener("DOMContentLoaded", () => {
// options
const cookieName = "Your Cookie Name",
cookieValue = "true",
cookieDomain = "yourwebsite.com",
popupDelay = 5, // delay in seconds after which the popup appears
dayStored = 365; // days during which the cookie is stored in user's browser
const log = console.log,
cookieWrapper = document.getElementById("cookie-wrapper"),
popupButtons = new Set(document.getElementsByClassName("popup-button"));
// 🧠 if no cookie found
if (!Cookies.get(cookieName)) {
log("no 🍪 was found");
// display popup after x amount of seconds
setTimeout(() => {
cookieWrapper.style.display = "flex";
}, popupDelay * 1000);
// set date to be equal to x amount of days from current date time in ms
let date = new Date();
date.setTime(date.getTime() + dayStored * 24 * 60 * 60 * 1000);
// 🧠 create cookie on button click to expire on newly defined date
popupButtons.forEach((popupButton) => {
popupButton.addEventListener("click", () => {
log("🍪 created and stored");
Cookies.set(cookieName, cookieValue, {
expires: date
// domain: cookieDomain // ⚠️ activate domain for production
}); // end set cookie
}); // end listener
}); // end forEach
} else {
log(`Yay, 🍪 ${cookieName} "${cookieValue}" has been found, popup remains hidden.`);
} // end if
}); // end DOMloaded
HTML and CSS can obviously be done within Webflow. We are not yet talking about being GDPR compliant, but that is one way to setup a cookie on your website. If you wish to be GDPR compliant, there is a more advanced technique, using Google Tag Manager and a Cookie manager script, like CookieHub.
Javascript: