Getting Started 🔞
Block website access until users confirm an appropriate age. Redirect them if they don't meet your age requirements.
Block website access until users confirm their age to ensure compliance with age-restricted content. Redirect users who don’t meet your age requirements. This article explains how to add an age gate to your Webflow site, allowing users to confirm their age via a date selector or a simple yes/no option.
This Booster can be added directly into any Webflow projects with our official Webflow App. You can install the Webflow Boosters App and add all the structure and attributes in one click.
Install Instructions ✍️
1. Add the booster script to your project
Copy the script source listed below, and add it to the <head> tag of your custom code settings. If you aren't sure about custom code in Webflow, you can click here to learn more.
<!-- Flowbase Booster [Age Gate] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-age-gate@1.1.0/dist/age-gate.min.js" type="text/javascript"></script>2. Add a div block to your page body
Start by adding a ▭ div-block to your page to cover your content and serve as the main container for the age gate. For this guide, we will name this element "Age Gate." It will be hidden for x amount of days once access is granted.
Set the element’s position to absolute to cover your page and adjust the z-index to ensure it sits above all other content. If you're using the app, the component will automatically include the necessary attributes and component, so you can skip these setup steps.
Add the following attributes to the 'Age Gate' element added above.
- Name:
fb-age-gateand Value:true. - Name:
fb-age-gate-typeand Value:date. Choose between the date method or button method - Name:
fb-age-gate-minimumand Value:18. This value sets the minimum age required for access. - Name:
fb-age-gate-redirectand Value:mywebsite.com. This value sets the URL which redirects users who do not meet the age requirements
3. Select the Age Gate Method (Date or Button)
Choose between using a date input method or a button to confirm age. Each method requires different attributes, detailed below.
4. Date Method
The date method is common as it lets users enter their birthdate, which we can check against the minimum age requirement. Since Webflow doesn’t provide date input fields by default, we’ll add extra attributes. If you prefer the button method, skip to step 5.
4.1. Add Date Input Fields
Inside the "Age Gate" element, add a form block with three text inputs for day, month, and year. Remove the default form submit button as it’s not needed.
Add the following attributes to the corresponding input fields
- Add the attribute Name:
fb-age-gate-fieldand Value:day. - Add the attribute Name:
fb-age-gate-fieldand Value:month. - Add the attribute Name:
fb-age-gate-fieldand Value:year.
For better user experience, also include these HTML attributes:
- Add the attribute Name:
maxlengthand Value:2- adjust as needed, e.g., 4 for year - Add the attribute Name:
inputmodeand Value:numeric
4.2. Add Enter & Confirm Button
After users enter their date, they need a button to confirm their details. Add a button or link-block to your site and assign the following attribute:
- Add the attribute Name:
fb-age-gate-buttonand Value:enter.
Avoid using the default form submit button to prevent form submission to Webflow. Set the default button to hidden and use your custom enter button as described.
5. Button Method
The button method operates similarly to the date method but uses buttons for age confirmation instead of date inputs. Users can choose between confirming they are over or under the age requirement.
5.1. Add Two Buttons Inside Your Wrapper
In the "Age Gate" element, add two buttons and style them as needed. Assign the following attributes:
- Add the attribute Name:
fb-age-gate-buttonand Value:over. - Add the attribute Name:
fb-age-gate-buttonand Value:under.
If a user selects the button with the value "under," they will be redirected away from your website.
6. Add This in a Single Click with Our Free App
For a quicker setup, use our free Boosters app to add this feature without following the manual steps. Download the app from the Webflow marketplace and start using it right away at no cost.
7. Publish & Test
Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test the Booster in action.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
Add this booster + more with the official webflow application.
Join our community and
claim free products
No Spam. Only sweet content and updates of our products.
Join 55,000+ other creators in our community
