Gainsight/Custom_Templates/customer_templates/JJSV/sign_up.html.liquid

<main class="np-main np-box-container">
  <div class="np-box">
    {% include "header_minimal" %}
    <div class="np-box-content-container">

      <form class="np-form np-box-content" action="{% route sign_up %}" method="post" novalidate>
          <span class="np-form-terms">Use of this site constitutes your consent to the application of such laws and regulations and to our <a class="np-button-color" href="https://jnjinstitute.com/en-us/privacy-policy" target="_blank">Privacy Policy</a>. Your use of the information on this site is subject to the terms of our <a href="{{ current_school.terms_of_service_url }}" class="np-button-color" target="_blank">Terms of Use</a>.</span>
        <div class="np-form-title"> {% t .create_account %} </div>
        {% form_authenticity_token %}
        <div class="np-form-flex-desktop">
          <div class="np-form-field">
            <label class="np-input-label" for="learner_first_name">
              {% t shared.first_name %}
            </label>
            <input
              class="np-input"
              autofocus="autofocus"
              type="text"
              name="learner[first_name]"
              id="learner_first_name"
            >
          </div>
          <div class="np-form-field">
            <label class="np-input-label" for="learner_last_name">
              {% t shared.last_name %}
            </label>
            <input
              class="np-input"
              type="text"
              name="learner[last_name]"
              id="learner_last_name"
            >
          </div>
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_email">
            {% t shared.email_address %}
          </label>
          <input
            class="np-input"
            autofocus="autofocus"
            type="email"
            name="learner[email]"
            id="learner_email"
          >
        </div>
        <div class="np-form-field">
          <label class="np-input-label" for="learner_password">
            {% t shared.password %}
          </label>
          <input
            class="np-input"
            type="password"
            name="learner[password]"
            id="learner_password"
          >
        </div>
        <div class="np-form-field checkbox-field">
          <label class="checkbox-container">I attest that I am a Healthcare Professional or Johnson & Johnson employee.
            <input type="checkbox" id="attestationCheckbox">
            <span class="checkmark"></span>
          </label>
        </div>
        <button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
          Continue
        </button>
        {% comment %} <span class="np-form-terms">
          {% t .terms %}
          <a
            class="np-form-link np-button-color"
            target="_blank"
            href="{{ current_school.terms_of_service_url }}"
          >
            {% t .terms_link %}
          </a>
        </span> {% endcomment %}
        <div class="err-required" style="display:none;">Please complete all required fields.</div>
        
      </form>
    </div>
  </div>
</main>

<style>

.np-box-content-container {
  margin-top:0;
  padding-top:0;
}

.np-form-terms {
  text-align:left;
}
/* Customize the label (the container) */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height:24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:#486776;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #f2f4f5;
  border: 1px solid #ccd4d8;
  border-radius:3px;
}

.has-err .checkmark {
  background: #fcddd3;
  border: 1px solid #f05323;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccd4d8;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #009999;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 8px;
  top: 5px;
  width: 7px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.err-required {
  color:#f05323;
  font-size:12px;
  margin-top:12px;
}

@media (min-width:768px) {
  .np-box-header {
    height:130px;
  }
}

</style>

<script>
  //validate the checkbox is selected

  $('.np-form-action').click(function(e) {
    e.preventDefault()
    console.log("clicked")

    if($("#attestationCheckbox").is(":checked")) {
     $('.np-form').submit()
    } else {
      console.log("Checkbox is not checked")
      $('.checkbox-field').addClass('has-err')
      $('.err-required').show();
    }
  });
</script>