How to add a checkbox validation to an Offer template?

In offer templates, there may be times where 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:\n

   HTML

   <p>\n<input ng-model="termscheckbox" id="checkbox" type="checkbox" onchange="validateCheckbox();" required name="terms">\n\n<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>\n</label>\n</p>
   

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

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

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

   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:
   \n

   let checkboxValid;\n\nfunction validateCheckbox() {\n\tlet checkbox = document.getElementById('checkbox');\n\tif (checkbox.checked) {\n\t\tcheckboxValid = true;\n\t} else {\n\t\tcheckboxValid = false;\n\t}\n\tvalidateForm();\n}\n\nfunction validateForm() {\n\tlet activateButton = document.getElementById('submit');\n\tif ((checkboxValid == true)) {\n\t\tactivateButton.removeAttribute('disabled');\n\t} else {\n\t\tactivateButton.setAttribute('disabled', 'disabled');\n\t}\n}
   

6. Optional:\n

   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: June 26, 2026