To set up a Webflow popup form to only appear on a visitor's first visit to your home page and not on subsequent visits, you can follow the steps below:
1. Create the Popup:
- In the Webflow Designer, navigate to the page where you want the popup to appear.
- Drag and drop a new div block onto the canvas, and design it as your popup.
- Set its initial display property to "none" in the Style panel to hide it initially.
2. Create a New Cookie:
- Go to your project settings by clicking on the gear icon in the left sidebar.
- Under the Hosting tab, scroll down to the Cookie section.
- Click on the "+ Add Cookie" button to create a new cookie.
- Give it a name (e.g., "FirstVisitCookie") and set the value to "false".
3. Add Custom Code:
- Select the page where the popup should appear and go to the Page Settings.
- Click on the Custom Code tab.
- In the Head Code section, add the following script:
```html
```
Make sure to replace `'popup'` with the ID of your actual popup element.
4. Apply the Popup Trigger:
- Add a new button or link to your home page to close the popup (optional).
- Add an onclick event to the button/link and set its action to close the popup.
```html
onclick="document.getElementById('popup').style.display = 'none'"
```
Again, replace `'popup'` with the ID of your actual popup element.
That's it! Now the popup form will only show on a visitor's first visit to your home page. The script uses a cookie to track whether the visitor has already seen the popup and prevents it from showing again on subsequent visits. Remember to test the functionality to ensure it works as expected.