Implementing an Acknowledgement Checkbox with Terms and Conditions Popup

Introduction

Some applications require users to acknowledge terms and conditions before completing a registration or submission. This article demonstrates how to implement a dynamic acknowledgement checkbox in Joget, where users can view terms in a pop-up and confirm their agreement before enabling the form submission button.

How does it work?

The implementation uses a combination of a terms management form, a registration form, a checkbox input, and a Custom HTML element with JavaScript to handle user interactions. The script fetches the terms' content dynamically, displays it in a modal popup, and controls the checkbox state based on user confirmation.

1. Create 2 forms: an All Terms for the Terms of Conditions form and a Register form for the user acknowledgment.
2. In the All Terms form, create the title and content fields. Use this form to manage all terms.
   
3. In the Register form, display the terms as a checkbox list. Select Form Data in the Load Data From property to link to the terms form.
4. Add a Custom HTML element to the Register form and insert the following script.
   Update the script by replacing:

• • terms_all with the checkbox input ID in your Register form.

  • url with your app ID and terms form ID.

  • popupContent with the content input from the terms form (data?.<content-input-id>).

<script>
  var selectedOptionEl = null;

  $(document).ready(function () {
    const saveBtnEl = $('#submit');
    $(saveBtnEl).prop('disabled', true);
    $('input[name="terms_all"]') //$('input[name="<checkbox-input-id>"]')
      .parent()
      .on("click", (ev) => {
        if (ev) {
          $(saveBtnEl).prop('disabled', true);
          ev.stopPropagation();
          ev.preventDefault();
        }
        const selectedOption = ev?.target;
        if (selectedOption) {
          const selectedOptionInput = $(selectedOption).find('input[type="checkbox"]');
          if (selectedOptionInput?.length > 0) {
            const checkBoxId = selectedOptionInput[0].value;
            if (checkBoxId) {
              selectedOptionEl = selectedOptionInput[0];
              if ($(selectedOptionEl).is(":checked")) {
                $(selectedOptionEl).removeAttr("checked");
                return;
              }
              fetchTermsData(checkBoxId, selectedOptionInput[0]);
            }
          }
        }
      });

    $("#cancel-btn").on("click", () => {
      if (selectedOptionEl) {
        $(selectedOptionEl).prop("checked", false);
        $(saveBtnEl).prop('disabled', true);
        closePopup();
        selectedOptionEl = null;
      }
    });

    $("#agree-btn").on("click", () => {
      if (selectedOptionEl) {
        $(selectedOptionEl).prop("checked", true);
        $(saveBtnEl).prop('disabled', false);
        closePopup();
      }
    });
  });

  function fetchTermsData(termsId, selectedOption) {
    $.ajax({
      url: `/jw/web/json/data/form/load/checkBoxPopup/main/${termsId}`,
      type: "GET",
      dataType: "json",
      success: function (data) {
        const popupContent = data?.content || "";
        if (!popupContent || !selectedOptionEl) return;
        openTermsInPopup(popupContent, selectedOption);
      },
      error: function (request, error) {
        console.log("error :>> ", error);
      },
    });
  }

  function openTermsInPopup(content, selectedEl) {
    $("#modal-content").html(content);
    $("#terms-modal").modal("toggle");
  }

  function closePopup() {
    $("#terms-modal").modal("hide");
  }
</script>

<div id="terms-modal" class="modal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close ms-auto" onclick="closePopup()">
          <i class="fa fa-close"></i>
        </button>
      </div>
      <div class="modal-body">
        <div id="modal-content"></div>
        <div class="action-btns" style="margin-top: 16px; text-align: right;">
          <button id="agree-btn" type="button" class="form-button btn button">Yes</button>
          <button id="cancel-btn" type="button" class="form-button btn button btn-secondary">No</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .form-cell-value label { cursor: pointer; }
  #terms-modal .modal-dialog { max-width: 70%; }
  .modal-body { max-height: 70vh; overflow-y: auto; }
  #modal-content { margin: 16px 0; }
</style>

5. In the Manage Terms section, add, edit, or delete terms as needed.
6. In the Register form, the checkbox list will automatically display the available terms. Clicking a checkbox opens the pop-up with the terms content. Selecting Yes will check the checkbox and enable the Save/Submit button; selecting No will leave it unchecked.
7. Save the form and launch the app to see the acknowledgement workflow in action.

Expected Outcome

Users will be required to view and acknowledge the terms and conditions via a pop-up before the registration submission button is enabled. The pop-up ensures visibility of the terms, and the checkbox accurately reflects the user’s consent.

Not accepting the terms and conditions first will prevent users from checking the Terms and Conditions checkbox and saving the form.

Download sample app