How to add a checkbox validation to an Offer template?

In offer templates, there may be times when custom forms or email sign-ups require a checkbox to be selected before the user can move forward. If this is the case, there are a few steps to disable a button until the checkbox is checked.

First, you will need to add the following HTML to the offer template to create a checkbox:

1. Add id="submit" to the button.

2. Add the checkbox input and its label:

   HTML

   <p>
     <input
       id="checkbox"
       type="checkbox"
       name="terms"
       ng-model="termscheckbox"
       onchange="validateCheckbox();"
       required
     >
     <label for="checkbox">
       I have read and agreed to the
       <a href="#" target="_blank">terms of use</a>
       and
       <a href="#" target="_blank">privacy policy</a>
     </label>
   </p>
   

3. Add the variable to the submit button so it is passed on submission:
   

   external-event-terms-checkbox="{{termscheckbox}}"
   

4. Add the disabled feature to the submit button inherently:
   

   disabled="disabled"
   

5. Then you would need to insert the following JavaScript as the last step to the bottom of the HTML in a <script></script> tag:
   

   let checkboxValid;
   
   function validateCheckbox() {
     const checkbox = document.getElementById('checkbox');
     checkboxValid = checkbox.checked;
     validateForm();
   }
   
   function validateForm() {
     const activateButton = document.getElementById('submit');
     if (checkboxValid) {
       activateButton.removeAttribute('disabled');
     } else {
       activateButton.setAttribute('disabled', 'disabled');
     }
   }
   

6. Optional:

   Within the function, you can also choose to add styles to the disabled/active version of the button like this:
   

   activateButton.setAttribute('style', 'background-color: #00C0D1;');
   

   You may also make edits to how the button appears when disabled by using the :disabled selector in CSS.

Last updated: July 31, 2026