User consent through custom HTML form

Hi, I am writing my own email form and want to have a checkbox for user consent. If the box is unchecked, the profile should be added but not subscribed.

Right now, the form works but the checkbox is ignored, so every profile gets subscribed. I have set my list to be single opt-in. What am I missing?

 

  <form id="email_signup" class="klaviyo_styling klaviyo_gdpr_embed_XXXXXX email-capture__form"
    action="//manage.kmail-lists.com/subscriptions/subscribe"
    data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank">

    <input type="hidden" name="g" value="XXXXXX">
    <input type="hidden" name="$fields" value="email">

    <div class="klaviyo_field_group  klaviyo_form_actions">
      <label for="k_id_email" class="email-capture__label">Enter your email to download a free trial.</label>
      <input class="email-capture__input" type="email" value="" name="email" id="k_id_email" placeholder="email"/>
    </div>

    <div class="klaviyo_messages">
      <div class="success_message" style="display:none;">
        <div>
          <h3>Download</h3>
          <div class="btn-flex">
            <a href="#" class="download-btn">1</a>
            <a href="#" class="download-btn">2</a>
          </div>
        </div>
      </div>
      <div class="error_message" style="display:none;"></div>
    </div>
    <div class="klaviyo_form_actions">
      <button type="submit" class="klaviyo_submit_button">SUBMIT</button>
      <div class="checkbox-flex">
        <input type="checkbox" name="$consent" id="consent-email" value="email" checked>
        <label for="consent-email">Email me exclusive offers and free plugin updates</label>
      </div>
    </div>
  </form>


  <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>

  <script type="text/javascript">
    function validateEmail(email) {
        var re = /\S+@\S+\.\S+/;
        return re.test(email);
    }

    var form = document.getElementById('email_signup');
    var emailInput = form.querySelector('input[type="email"]');
    var submitButton = form.querySelector('button[type="submit"]');

    form.addEventListener('submit', function(e) {
      if (!validateEmail(emailInput.value)) {
          e.preventDefault();
          form.querySelector('.error_message').innerHTML = 'Please enter a valid email address';
          form.querySelector('.error_message').style.display = 'block';
      }
    });

    KlaviyoSubscribe.attachToForms('#email_signup', {
      hide_form_on_success: true,
      custom_success_message: true,
      extra_properties: {
          $source: 'Free Trial Form'
      }
    });
  </script>