Stop subscription form from popping up every access

Design help General
1

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

Can someone please help.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Check out this tutorial from @PixelGeek, it should give you exactly what you’re looking for.

3

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 :slight_smile:

4

I have followed the tutorial @mikeyevin but with no luck sadly.
It is still loading everytime.

Do I tried changing where it said ‘modal’ and updating it to what it is called in my webflow ‘Modalscreen’ but that didn’t work either.

Do you know code and could take a look at my read-only link and potentially see why it isnt working?

Thank you

5

@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.

1 Like
6

Hello @lizard,

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

  1. define the attribute of your cookie
  2. check if there is such a cookie in the user’s browser
  3. if not cookie found, unhide the popup
  4. once the user clicks close button of the popup, setup and store a new cookie for a year

Vanilla :icecream: 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

<div id="cookie-wrapper">
  <button class="popup-button" id="cookie-agree">agree</button>
  <button class="popup-button" id="cookie-close">close</button>
</div>

CSS

#cookie-wrapper {
  display: none;
}

Don’t forget to add the js-cookie library at the top of the body tag:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

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.

Hope that helps!
Anthony

8

Thank you Anthony for your reply.

This is a little bit beyond my know how. Some of this sounded like another language :confused:

I pasted the java script code into custom code but it didn’t work? I have probably done something wrong.

9

@lizard would you have a read-only link for us to have a quick look at ?