How to Add an Age Gate

Overview

Sometimes when running a contest that deals with age-sensitive subject matter or that gives away an age-restricted prize, you'll need to put something in place that checks a visitor's birthdate before they access the page. ShortStack makes that easy by allowing you to set up an age gate that allows visitors into your campaign if they're the appropriate age, but shows a message (or redirects them away) if they're not quite there. Here's a quick video walkthrough:

Hiding Your Content

You'll need to use widget visibility settings to hide any of the content that you'd like to gate behind your age form.

1. This can be made easier by adding all of your to-be-gated content to a single Container Widget. If it isn't already, hold down Shift and click each widget in the Edit Widgets Panel that you would like to have hidden - they'll be highlighted when you're finished.
2. Click the Add to Container icon at the very bottom of the panel. This will move each of the selected widgets to a single container.
3. Go into the widget settings for your new container by clicking the edit icon on the widget.
4. In the pop-up, click Visibility on the left.
5. In this section, click the Starts Hidden option, then Save & Exit.
   
   

Adding Your Underage Message

In order to provide clarity, add a message to your campaign that will let underage folks know that they don't qualify for your contest.

1. Add a new Rich Text Widget to your campaign.
2. In the widget settings, type in your message (e.g. "Sorry, you must be 21 to enter.").
3. In the Visibility section, click the Starts Hidden option.
4. Click Save & Exit.
5. (Optional) To keep things organized, rename the widget Underage Text (or something similar).
   
   

Building Your Age Form

Now, you'll add the form to your campaign that will accept the visitors' dates of birth to determine whether or not they can enter.

1. Add a Form Container Widget, and make sure that you are connecting it to a new list; otherwise, the birthdate submissions will end up in the same list as your contest entries.
2. In the After Submit section of the widget settings, make sure the Use other widgets option is selected.
3. (Optional) You'll also want to change the name of this Form Container so that it's not confused with any other form on your campaign.
4. Click Save & Exit.
5. Add a new Field Widget to your Form Container.
6. In the widget settings for the new field, choose the Custom Field type Date, then click Next.
7. In the Field Settings section, choose the date layout, add a field label, then add a year range in the Validation subsection - to catch all potential submissions, you'll want to go back a bit for your starting year (early 1900s) and make your ending year within the last year or two.
8. Click Save & Exit.
   
   

Adding the Actions

You've now hidden your main content, added a message for people who don't qualify, and have your age form in place. The only thing left is to add the Action Widgets that will make all of these pieces work together.

Of Age Action

We'll start by setting up an action that will show your campaign to visitors who are of age.

1. Add a new Action Widget to your campaign.
2. Click Add Condition.
3. In the Trigger Configuration subsection, set the widget dropdown to select your age verification form, and the event dropdown to is submitted. Then click Save.
4. Click Add Condition again.
5. In the Trigger Configuration subsection, set the widget dropdown to select your date field, and the event dropdown to is before the last - then, you'll select the number of years. So, for example, if you want your entrants to be 21 years or older, you'd set it to 21 years. Click Save.
6. Click Add Action.
7. In the Widget subsection, use the drop-down to select the Container Widget that houses your hidden campaign content.
8. In the Action subsection, select Show. Then, click Save.
9. Click Add Action again.
10. In the Widget subsection, use the drop-down to select your Age Verification Form Container.
11. In the Action subsection, select Hide. This will hide the form once it's been submitted and keeps your campaign looking clean. Then, click Save.
12. Click Save & Exit.

At this point, you can go into Preview mode in your Campaign Builder and test the age verification form to check that your new action fires properly when an appropriate birthdate is selected. The final step is to set up what happens when someone underage submits their birthdate.

Underage Action

A lot of these steps will be similar to the previous section, but the Action Widget will instead target folks who submit a birthdate that's outside of the appropriate range.

1. Add a new Action Widget to your campaign.
2. Click Add Condition.
3. In the Trigger Configuration subsection, set the widget dropdown to select your age verification form, and the event dropdown to is submitted. Then click Save.
4. Click Add Condition again.
5. In the Trigger Configuration subsection, set the widget dropdown to select your date field, and the event dropdown to is after the last - then, again you'll select the number of years. Ideally, this number would match what you set in the of-age section. Click Save.
6. Click Add Action.
7. In the Widget subsection, use the drop-down to select the Rich Text Widget containing the message you set up for your underage visitors.
8. In the Action subsection, select Show. Then, click Save.
9. Click Add Action again.
10. In the Widget subsection, use the drop-down to select your Age Verification Form Container.
11. In the Action subsection, select Hide. This will hide the form once it's been submitted and keeps your campaign looking clean. Then, click Save.
12. Click Save & Exit.

Once again, you can go into Preview mode in your Campaign Builder and test the age verification form - this time to check that your new action fires properly when an underage birthdate is selected. When you've tested both conditions and they're working as needed, you're done!