How can I make the sign-up form modal in Webflow's homepage only appear once, either after initial load or after the user has signed up or closed out, and how and where can I insert the code to set a cookie?

TL;DR

Design your sign-up form modal in Webflow and ensure it triggers on page load or user action.
Use Webflow's custom code editor to insert JavaScript that checks and sets a cookie when the modal is interacted with.
Implement cookie logic in the code to show the modal once per session, then apply this on the homepage settings to activate after the page loads.

To ensure your sign-up form modal on Webflow only appears once per user session, you can use cookies to track user interaction with the modal. Here's how you can set this up:

1. Create a Sign-Up Form Modal

Ensure Modal Design: First, ensure your modal is designed in Webflow and set it to initially be hidden.
Trigger Mechanism: Set it to appear either on page load or on a specific user action (e.g., clicking a button).

2. Use Custom Code to Set a Cookie

Access to Code Editor: In Webflow, go to Project Settings > Custom Code.
Inside the <head> Section: Place a JavaScript snippet to check for a cookie and set it if not present.

3. JavaScript Snippet for Setting a Cookie

JavaScript Logic: Use the following logic in your site’s Custom Code—specifically, inside Page Settings for the homepage or your site-wide settings:

Checking the Cookie: When the page loads, check for an existing cookie.
Display the Modal: If the cookie does not exist, display the modal.
Set the Cookie Upon Interaction: Once the user closes the modal or submits the form, set the cookie to prevent the modal from appearing again.

4. Example JavaScript Code (Explain Inline)

Purpose of the Code: The script identifies whether a cookie is set and proceeds accordingly.
Interaction Logic: Add an event listener on the modal close action and form submission to set the cookie.

document.addEventListener("DOMContentLoaded", function() {
  function setCookie(name, value, days) {
    var expires = "";
    if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
  }

  function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
  }

  if (!getCookie('modalDisplayed')) {
    // Display your modal here
    setCookie('modalDisplayed', 'true', 1); // 1-day expiration
  }

  // Assume `modalElement` is defined somewhere with your modal
  document.querySelector('#your-modal-id').addEventListener('click', function() {
    setCookie('modalDisplayed', 'true', 1);
    // Close the modal
  });
});

5. Apply JavaScript Code in Webflow

Homepage Settings: Implement this code in the homepage Page Settings under the Custom Code section.
Footer Code: You may place it in the Footer of the page to ensure it's triggered after the entire page has loaded.

Summary

To create a modal that appears only once on Webflow's homepage, use JavaScript to set a cookie based on user interaction (modal closure or form submission). Apply the code in Webflow’s custom code editor in the respective page settings and ensure the cookie logic aligns with your modal triggers.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer