Tags+CKForm.html

<!--
  This code was forked from https://gist.github.com/davidlamarwheeler/b04e61ec74c862b5b77b and modified by Daan Wilmer

  The instructions should be quite clear: follow the REPLACE directions to get the basic form set up.
  For questions you can contact daan@daanwilmer.nl — I can't always help, as much is from ConvertKit, but I'll do my best whenever I have time.
-->
<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} on the line below 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} on the line below with the ID of your form -->
      <input type="hidden" name="id" value="{formId}" id="landing_page_id">

      <!-- REPLACE {apiKey} on the line below 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 ↑
             -->
        <fieldset>
          <!-- REPLACE, on the line below, the sentence between the '>' and '<' with the question you want to ask-->
          <legend>Which tag would you like to select?</legend>
          <!-- Perform, on the lines below (between the line with "START BELOW THIS LINE" and the line with </fieldset>), the following things:
              - For each line, REPLACE {tagID} with a tag ID, as described above
              - For each line, REPLACE {Tag label} with the label you want, corresponding to the correct tag. This will be the text visible next to the radio button.
              - If you want to add another tag, copy the first line and paste it between the last one and the line with </fieldset>, then update the two occurrences of "tags_tag1" to match the next number, for example "tags_tag4" if there is already a "tags_tag3", or "tags_tag5" is "tags_tag4" is taken as well. Most importantly, these two should be the same on the same line and different from the other lines.
              - If you want to remove a tag, simply remove the line — you don't have to change the other lines.
            START BELOW THIS LINE -->
          <input name="tags" type="radio" value="{tagId}" id="tags_tag1" required="required"/><label class="tag" for="tags_tag1">{Tag label}</label>
          <input name="tags" type="radio" value="{tagId}" id="tags_tag2" required="required"/><label class="tag" for="tags_tag2">{Tag label}</label>
          <input name="tags" type="radio" value="{tagId}" id="tags_tag3" required="required"/><label class="tag" for="tags_tag3">{Tag label}</label>
        </fieldset>

      </div> <!-- /.ck_control_group (this is a note to programmers, you don't have to do anything with it) -->
      <button class="subscribe_button ck_subscribe_button btn fields button" id="ck_subscribe_button">
        Subscribe
      </button>
    </form>
  </div> <!-- /.ck_form_fields (this is a note to programmers, you don't have to do anything with it) -->
</div> <!-- /.ck_form (this is a note to programmers, you don't have to do anything with it) -->

<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 {thankYouUrl} on the line below 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>