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?

To ensure that a sign-up form modal on your Webflow homepage only appears once, you can use cookies to track whether a user has seen or interacted with the modal. Below are the steps you can follow to achieve this.

​

1. Add a Display Condition to the Modal

• Set the modal to be hidden by default using Webflow’s built-in settings. You can do this by setting the display property to "none" for the modal element in the designer.

​

2. Use JavaScript to Control Modal Display

• Insert a custom JavaScript code that checks for a cookie when the page loads.
• If the cookie is not found, display the modal.
• Add the following code in the Page Settings under the "Custom Code" section: 
• Go to Page Settings > Before Body Tag Paste Area and insert the JavaScript code.

​

3. Set the Cookie After Modal Interaction

• Create a function to set a cookie once the modal is closed or the user signs up.
• Insert JavaScript that listens for the modal close event or form submission event.
• Use document.cookie to create a cookie, e.g., document.cookie = "modalShown=true; path=/; expires=Fri, 31 Dec 9999 23:59:59 GMT";.

​

4. Check for the Cookie on Page Load

• Insert a script that checks for the presence of the cookie on page load.
• If the cookie modalShown is detected, keep the modal hidden.
• If the cookie is not detected, display the modal by changing the CSS display property.

​

Summary

To make a sign-up form modal on Webflow's homepage appear only once, use a combination of display settings, JavaScript, and cookies. First, set the modal to hidden by default, then insert custom JavaScript code to manage the modal's visibility based on a cookie's presence. Adjust this setup in your Page Settings to ensure a seamless user experience.