To make the sign-up form modal in Webflow's homepage appear only once, you can use a combination of Webflow and custom code. Here's a step-by-step guide on how to achieve this:
1. Design your sign-up form modal: Start by designing your sign-up form modal using the Webflow Designer. Customize its appearance, layout, and functionality according to your needs.
2. Create an interaction: In Webflow, interactions allow you to add dynamic behavior to elements on your website. Go to the Interactions panel and create an interaction that triggers when the page finishes loading or when the user clicks on a specific element (e.g., a close button).
3. Set initial state: In the interaction, set the initial state of the modal to "display: none" or "opacity: 0" so that it remains hidden until triggered.
4. Add a custom code embed: To set a cookie and control the visibility of the modal, you'll need to insert custom code. In the Webflow Designer, locate the appropriate section or container where you want to insert the code and add a custom code embed.
5. Write the JavaScript code: In the custom code embed, you can write JavaScript code to create and check cookies. Here's a sample code that sets a cookie when the modal is closed or when the user signs up:
```javascript
```
Make sure to replace `"yourModalID"` with the actual ID of your modal element.
6. Implement the functions: Depending on how your modal is designed, make sure to call the `closeModal()` function when the user closes the modal, and the `signup()` function when the user successfully signs up.
By using this approach, the modal will only appear once on the homepage, either after the initial page load or after the user has signed up. The cookie will help you keep track of whether the modal has been displayed before.
Remember, you can also customize the code further to suit your specific requirements or integrate it with other tools or analytics platforms if needed.