Adding Age Verification To A Realtime Marketing Form Or Landing Page

Not all forms are for everyone. There may be occasions when an age verification is important such as when the service, product, or content you provide has legal or policy-based age restrictions. It could also be for competitions where the prize includes alcohol, or there are other reasons why the person filling out the form should be over a specific age. Although some cases might need a strict verification method, a simple age verification request can be added to a Realtime marketing form, prompting the person to add their birthdate prior to even accessing the form itself. Let’s take a look at how to do that.

First, this is our lovely form. It’s for a contest and we want to check and make sure someone is over 18 before being able to access it and proceed any further. Shout out to beefree where you can create free HTML Page Templates and Emails for the template and inspiration for the layout.

What we need is a nice little window overlay that will be displayed to check the date of birth initially to see if we can let the person through to the form.

This is pretty simple to do. There are three components we need to add to the HTML of the Realtime Marketing form.

1. Create The Age Verification Control

This is a block of code wrapped up in a DIV that is either displayed or hidden depending on if the age verification has been met. You can add this to your form in the main code area, but a logical place might be after all of the Event related standard code like you see below. You can adjust the text to say what you need, but this should give you an initial starting point.

<div id="age-gate-overlay" style="display: none;">
  <div id="age-gate">
    <h2>Age Verification</h2>
    <p>Please enter your date of birth to continue:</p>
    <input type="date" id="dob-input" required>
    <button id="submit-dob">Submit</button>
    <p id="age-error" style="display: none;">You must be at least 18 years old to enter.</p>
  </div>
</div>

2. Styling The Age Verification Control

Next, we need to add in some new styles to the style section of the form HTML. You can add this anywhere within the <style> and </style> tags, but I typically add anything custom to the top or bottom of this section. This is where you can determine the size of the pop up, the colours, fonts etc. I’ve shared my CSS for you as a starting point.

#age-gate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#age-gate {
    background-color: #fff;
    color: #333;
    padding: 70px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    border: #e81c76 1px solid;
}

#age-gate input[type="date"] {
    padding: 8px;
    margin: 10px 0;
    width: 80%;
    font-family: 'Oswald';
    font-size: 16px;
}

#age-gate button {
    background-color: #e81c76;
    color: white;
    padding: 10px 16px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Oswald';
    text-transform: uppercase;
}
p#age-error {
    font-family: 'Oswald';
    color: #e81c76 !important;
    font-weight: 600;
}

3. Displaying The Age Verification Control

Finally, we need a script to actually make it work. There are various ways you could store the information that the person is old enough or not, such as local storage of the browser or cookies, but I am using session storage of the browser. This stores information for the duration that the person is on the website. I am not advising legally what your approach should be, but for me, session storage is usually a good option. The script checks to see if the session storage contains a value for a key called ageVerified. If it does, the pop up will be hidden. If it doesn’t, the pop up is displayed. When the person submits their date of birth, the ageVerified key will be set to true and the user can carry on with the form. When the person closes the browser, the key and value will be removed. This is why you need to figure out the right approach for your own requirements. For local storage, just adjust the two parts that have sessionStorage and replace with localStorage instead.

<script>
const ageGateOverlay = document.getElementById('age-gate-overlay');
const dobInput = document.getElementById('dob-input');
const submitDob = document.getElementById('submit-dob');
const ageError = document.getElementById('age-error');

// Show age gate if not already passed
if (!sessionStorage.getItem('ageVerified')) {
  ageGateOverlay.style.display = 'flex';
}

submitDob.addEventListener('click', () => {
  const dob = new Date(dobInput.value);
  const today = new Date();
  const age = today.getFullYear() - dob.getFullYear();
  const monthDiff = today.getMonth() - dob.getMonth();
  const dayDiff = today.getDate() - dob.getDate();

  let isOldEnough = age > 18 || (age === 18 && (monthDiff > 0 || (monthDiff === 0 && dayDiff >= 0)));

  if (isOldEnough) {
    sessionStorage.setItem('ageVerified', 'true');
    ageGateOverlay.style.display = 'none';
  } else {
    ageError.style.display = 'block';
  }
});
</script>

If the person entering their date of birth submits something that would indicate they are not over 18, a message will appear. If you want to try it out for yourself, you can do so here: Age Verification Form Example

Obviously it’s not an official verification and someone could put a different date of birth in there (kind of like memorising a date of birth to use when you first went to the pub ) but it gives an extra level of checking when needed.

Original Post http://meganvwalker.com/adding-an-age-verification-to-a-realtime-marketing-form-or-landing-page/