In this tutorial we learn how to create an Age Gate Popup. We’ll explore three different methods to achieve this. The first will make use of the buttons widget. In the second method we’ll use the acceptance field on a form. And in the third and final solution, we’ll utilize some custom Javascript to allow the user to enter their date of birth.
The tutorial will cover:
✔︎ How to create a popup
✔︎ How to create an age gate using buttons
✔︎ How to create an age gate using the acceptance field on a form
✔︎ How to create an age gate using the date field on a form
✔︎ And much more!
Custom Javascript:
Hey there, it’s Ash from Elementor.
In today’s tutorial we’re going to learn how to create an age gate for a website. This incredibly useful feature can be utilized when you need to restrict your website’s content for a particular age category. Some use cases could be a bar, brewery, or in our case, a wine merchant.
We’ll explore three different methods to accomplish this task, all of which will make good use of the Elementor popup feature.
The first will be created using two buttons. If the user is old enough they can select so and they are granted access to the website. If they’re not old enough, an error message is displayed and they will be unable to navigate any further.
Our second method will utilize the acceptance box on a form. If left unchecked, the user will not be able to navigate past the popup. When checked and submitted however, the popup will disappear and allow them to view the website.
Our final and most advanced method will make use of the date field in a form, which will allow the user to enter their date of birth. We’ll then add in some custom Javascript to work out whether or not the visitor is old enough to view the website.
Feel free to jump to any of these methods using the timestamps below. Now, without further ado, let’s get started.
The first step in creating our age gate feature is to create the ‘Entry Denied’ popup. This will show if the user selects ‘no’ via our button method , or if they enter a date of birth which doesn’t fit within our parameters.
We’ll configure this popup so that the user is unable to navigate past it, therefore restricting access to underage visitors.
Let’s head over to ‘templates > popups’ to create this.
We’ll add a new popup…give it a name…create the template…and dismiss the library.
Select the gear icon first and let’s configure some basic settings.
We’ll set our width to 100vw and the height to ‘fit to screen’.
Leave ‘Overlay’ as hidden, as our design already fills the users screen. Hide the ‘Close Button’ to eliminate this way of a user bypassing the ‘Entry Denied’ screen.
And then we’ll set some subtle animations for the popup.
Now in the style tab, we’ll set a gradient background. The primary color…the secondary color…and the type.
Switch over the advanced tab now and let’s further strengthen our popup to restrict a user being to close it.
We can leave ‘Prevent Closing on Overlay’ as it is, as our design doesn’t use this function. If yours does however, you will want to enable this to stop your visitors being able to close the popup.
‘Prevent Closing on Escape Key’ we will enable to stop the user being able to close the popup using the escape key. This combined with the lack of a close button will make it difficult for a user to bypass the ‘Entry Denied’ screen.
Finally we’ll disable the page scrolling when the popup is displayed.
Let’s now add in a new single column section and build our ‘Entry Denied’ message.
Set the height to ‘Fit to Screen’, and the column position to ‘Stretch’.
Select the column handle and then set the vertical align to ‘middle’, and the horizontal align to ‘center’.
If we now open the widgets menu, you’ll see we’ve already added several widgets to our favourites for easy access.
Drop in the logo widget first of all…then drop in the heading widget. Here we’ll amend the text like so…alignment…then in the style tab, the size, and the line height. In the advanced tab next, we’ll unlink the margin values and add 60px to the top.
Now add in the text editor widget.
We’ll add in our ‘Entry Denied’ message…set the alignment…font size…line height…and add some margin.
OK, this is looking great so far and will provide a clear message to our visitors if they happen to be underage.
We’re going to save this as a template first of all, as it will provide us with a good base for creating our Age Gate popups, saving us lots of time.
Select the arrow next to the publish button, and choose ‘Save as Template’.
Give the template a name…and save. Dismiss the window and now publish the ‘Entry Denied’ popup.
We’ll add a condition so that the popup can be loaded on any page of our website.
Once finished, save and close.
With our ‘Entry Denied’ popup created, and saved as a template, we’re now ready to create our first ‘Age Gate’.
Using your keyboard, bring up the Elementor Finder, but typing CMD or CTRL + E…typing popups and select.
Add a new popup…give your popup a name like so…and create template.
Select ‘My Templates’ and insert the template we’ve just created.
Let’s now make some adjustments. We’ll delete the heading first…and then amend the text like so.
Choose the widgets menu next and add in the inner section widget.
Now drop in the button widget.
We’ll set the text to ‘No’ and then select the dynamic tags icon where we’ll choose popup from the dropdown.
Selecting the wrench icon allows us to choose an action…and then we can search for a previously created popup.
When selected, this button will now launch the ‘Entry Denied’ popup.
With our ‘Entry Denied’ popup created, and saved as a template, we’re now ready to create our first ‘Age Gate’.
Using your keyboard, bring up the Elementor Finder, but typing CMD or CTRL + E…typing popups and select.
Add a new popup…give your popup a name like so…and create template.
Select ‘My Templates’ and insert the template we’ve just created.
Let’s now make some adjustments. We’ll delete the heading first…and then amend the text like so.
Choose the widgets menu next and add in the inner section widget.
Now drop in the button widget.
We’ll set the text to ‘No’ and then select the dynamic tags icon where we’ll choose popup from the dropdown.
Selecting the wrench icon allows us to choose an action…and then we can search for a previously created popup.
When selected, this button will now launch the ‘Entry Denied’ popup.
Adjust the alignment next…and then in the style tab we’ll set our background color.
Right click the button next and copy it.
Now in the empty column, let’s paste the button.
We’ll amend the text this time to ‘Yes’…and under the link options, choose the wrench icon and this time choose ‘Close Popup’ under actions.
We’ll enable the ‘Don’t Show Again’ option, to ensure our users do not see this message again whilst browsing our website.
And then we’ll set the alignment.
Let’s now publish and set our display conditions.
We’ll first set this to show on our entire website, this way it doesn’t matter which page a user lands on they, they will see the popup regardless.
Under triggers we’ll toggle ‘On Page Load’ to ‘Yes’ and then save and close.
Let’s now test this out.
Be sure to open up an incognito window to ensure you’re testing is effective.
We’ll visit the website, and as you can see the Age Gate popup appears straight away. If we select ‘No’, the ‘Entry Denied’ message appears and stops us from accessing the website’s content.
Let’s do a hard reload now and this time we’ll select yes. The popup now disappears and allows us to continue viewing the website’s content.
OK, we’ve made great process so far and learnt how to create one method of an ‘Age Gate’.
Let’s now move onto the acceptance method.
Let’s add a new popup…give it name…and create.
Add in our pre-created template next.
Delete the heading…and amend the text.
In the widgets menu let drop in the forms widget.
Delete the first two fields, as these aren’t needed, and now amend the third field.
We’ll change the type to acceptance…delete the label…set this as a required field…and then add in our acceptance text.
Expand the buttons tab now…enter the button text…and configure the alignment.
In the additional options area we’ll enable custom messages, and then remove the success message. We’ve removed this because we’re not using the form to actually submit any information, and not require any messages to appear via the form widget.
Expand the ‘Actions After Submit’ tab next, and remove all of the default selections.
Now add a new selection and choose popup.
Open the new popup tab and select ‘Close Popup’ under actions…and set ‘Don’t Show Again’ as ‘Yes’.
With the functionality of our acceptance box created, let’s now apply some styling.
We’ll set our typography first…font size…weight…and line height.
Now the buttons…the font size…background color…text color…followed by the hover text color.
Now in the advanced tab, we’ll set the positioning to a custom width like so.
Let’s now publish and test this Age Gate method out.
Select publish…followed by adding a condition to load this popup across our entire website.
Under triggers we’ll set this to load on page.
If we now save and close, then open up a fresh incognito window you’ll see the Acceptance Box message appears…and if we try to enter without checking the box we are not granted access to the website, but if we do check the box, the popup disappears and allows us in.
The third and final method will teach you how to create an age gate popup where the user has to enter their date of birth. If they are old enough to view the website’s content, the popup disappears and doesn’t show for them again. If they’re not old enough, they are presented with the ‘Entry Denied’ popup which they cannot bypass.
Let’s find out how to do this.
Add a new popup…and give it a name…then create.
Insert the pre-created popup from earlier on…delete the heading…and amend the text.
From the widgets menu, drop in the form widget.
Delete the first two fields and then expand the third field and change it to the date field. Delete the label…delete the placeholder…set it as required…toggle the native HTML to ‘yes’ and in the advanced tab enter dateofbirth all lowercase with no spaces in the ID field.
Now expand the buttons tab.
Set the alignment…the button text…and in the button ID enter dateofbirthsubmit, again all lowercase with no spaces.
Expand the actions after submit tab next, then delete the collect submissions and email options. Now add in a popup option.
Open the newly added popup tab…under action select ‘Close Popup’ and ‘Don’t show again’ we’ll set to ‘Yes’.
Finally, in the additional options area, switch on custom messages and leave the success message blank.
We’ve kept open the previous popup so let’s copy the styles from that form widget and paste them onto ours to save some time.
OK, great stuff, we’re making great progress here.
Let’s just double check our popup settings before we add our custom Javascript to enable the functionality.
The close button is hidden…and our advanced settings are configured.
Open the widget menu now and drop in the HTML widget.
Within the HTML widget paste in the Javascript code which you copy from the video description. Just be sure to add the opening and closing ‘Script’ tags to ensure this works correctly.
Before we amend and test this code, let’s learn exactly what this Javascript does.
First, you’ll notice that our Javascript is enclosed within script tags. This is important, as it tells the browser what type of code this is. Please note you will need to add these yourself when copying the code from this video description.
Next, we have targeted the ID of the button in our form using an event listener. This tells the browser to perform an action when this button is clicked.
Now we must target the date field within the form and apply some actions to test whether or not the user is old enough to enter our website.
The Javascript works by taking today’s date and subtracting the user’s date of birth.
If the user is 18 or younger, the access denied popup will launch. We’ve also included a fail safe configuration here, so that the form is not submitted if a user is underage. Without this, the user could simply refresh their page and access the website’s content.
If the user is old enough, the popup simply disappears and is not shown to the user again.
We’ve also included another fail safe which displays an error message, in case the user tries to submit the form with no date of birth.
We have just one amendment to make to this code which is to add the ID of our ‘Entry Denied’ popup.
Type CMD or CTRL + E to open the Elementor Finder. Type popups and open this in a new tab.
We’ll locate the ‘Entry Denied’ popup which we previously created and copy the ID which we can find in the shortcode field.
Now head back to the Age Gate popup and paste this ID directly into the Javascript code.
OK, our popup is now created and ready to be published and tested.
Select the publish button…set the popup to display across the entire website….then under triggers set ‘On Page Load’ to ‘Yes’.
Once finished, save and close.
Open up a new incognito window and visit your website.
OK, let’s test out all of the potential scenarios.
If you try to enter the website without entering a date of birth, you can see an error message appears.
If we enter an underage date of birth you can see we’re presented with the ‘Denied Access’ message.
Refresh now and let’s enter a valid date of birth.
Awesome! As you can see, the popup now disappears and we’re allowed to access the website.
And there we have it, three extremely effective methods of creating an age gate for your website.
Don’t forget to subscribe to our channel and comment below with what you’d like to see us create in our next tips and tricks tutorial.
document.getElementById("dateofbirthsubmit").addEventListener('click',function ()
{
var dateString = document.getElementById('form-field-dateofbirth').value;
if(dateString !=='')
{
var today = new Date();
var birthDate = new Date(dateString);
var age = today.getFullYear() - birthDate.getFullYear();
if(age < 18 || age > Infinity)
{
elementorProFrontend.modules.popup.showPopup( {id:50}, event);
event.preventDefault();
}
}
else
{
alert("You must provide your date of birth!");
}
} );
