Tags+CKForm.html

<script src="https://app.convertkit.com/assets/CKJS4.js?v=21"></script>
<div class="ck_form ck_naked">
  <div class="ck_form_fields">

    <!-- Replace {formId} with the ID of your form -->
    <form method="POST" id="ck_subscribe_form" class="ck_subscribe_form" action="http://api.convertkit.com/v3/forms/{formId}/subscribe" data-remote="true">

      <!-- Replace {formId} with the ID of your form -->
      <input type="hidden" name="id" value="{formId}" id="landing_page_id">

      <!-- Replace {apiKey} with your API key (find it at https://app.convertkit.com/account/edit) -->
      <input type="hidden" name="api_key" value="{apiKey}" />

      <div class="ck_errorArea">
        <div id="ck_error_msg" style="display:none">
          <p>There was an error submitting your subscription. Please try again.</p>
        </div>
      </div>
      <div class="ck_control_group ck_email_field_group">
        <label class="ck_label" for="ck_emailField" style="display: none">Email Address</label>
        <input type="text" name="name" class="ck_first_name" id="ck_firstNameField" placeholder="FIRST NAME">
        <input type="email" name="email" class="ck_email_address" id="ck_emailField" placeholder="EMAIL ADDRESS" required>

        <!-- This is your the custom tag-select, replace {tagId} to match tag
             IDs. You can find IDs for tags but looking at the URL for your tag.

             Example: https://app.convertkit.com/subscribers?tag=12345
                                                   This right here ↑
             -->
        <label class="tag" for="tags">Which tag would you like to select?</label>
        <select name="tags">
          <option disabled="disabled" selected="selected">Select a tag</option>
          <option value="{tagId}">Tag 1</option>
          <option value="{tagId}">Tag 2</option>
          <option value="{tagId}">Tag 3</option>
        </select>

      </div> <!-- /.ck_control_group -->
      <button class="subscribe_button ck_subscribe_button btn fields button" id="ck_subscribe_button">
        Subscribe
      </button>
    </form>
  </div> <!-- /.ck_form_fields -->
</div> <!-- /.ck_form -->

<style>
/* Put your custom styles here. Or grab the styles from another ConvertKit
   form and place them here. */
</style>

<script type="text/javascript">
/* This script handles submission and redirect */
function overrideCKFormHandler() { (function ($) {
  $("document").ready(function ($) {
    form = $("form#ck_subscribe_form");
    form.off("submit");
    form.submit(function(e) {
      e.stopPropagation();
      e.preventDefault();
      var subButton  = form.find("#ck_subscribe_button");
      var btnText    = subButton.text();
      var successMsg = form.parent().find("#ck_success_msg");
      var errorMsg   = form.find("#ck_error_msg");
      subButton.prop("disabled", true).text("Subscribing...");
      var showErrorMsg = function() {
        errorMsg.parent("div").css("display", "block");
        errorMsg.css("opacity", "0").fadeTo(250, 1);
      }
      data = form.serializeArray()
      if (!!document.referrer) {
        data.push({ name: "referrer", value: document.referrer});
      }
      if (form.find(".optIn").is(":checked")) {
        data.push({name: "course_opted", value: true})
      }
      $.ajax({
        url: form.attr("action"),
        data: data,
        method: "POST",
        success: function (response) {
          /* Replace with your thank you page URL */
          window.location.href = "{thankYouURL}"
        },
        error: function (jqXHR, textStatus, errorThrown) {
          subButton.prop("disabled", false).text(btnText);
          showErrorMsg();
        }
      });
    });
  });
})(window.ckJQ); }

function overrideCKFormWhenReady() {
  setTimeout(function(){
    if(window.ckJQ) { overrideCKFormHandler(); }
    else { overrideCKFormWhenReady(); }
  }, 300);
}
overrideCKFormWhenReady();
</script>