Skip to content

Instantly share code, notes, and snippets.

@nathanbarry
Last active March 20, 2016 00:40
Show Gist options
  • Select an option

  • Save nathanbarry/ae588b6ff104694bdb02 to your computer and use it in GitHub Desktop.

Select an option

Save nathanbarry/ae588b6ff104694bdb02 to your computer and use it in GitHub Desktop.
<script src="https://app.convertkit.com/assets/CKJS4.js?v=21"></script>
<div class="ck_form ck_naked">
<div class="ck_form_fields">
<!-- Form starts here -->
<form method="POST" id="ck_subscribe_form" class="ck_subscribe_form" action="http://api.convertkit.com/v3/forms/000/subscribe" data-remote="true">
<input type="hidden" name="id" value="000" id="landing_page_id">
<input type="hidden" name="api_key" value="000" />
<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="first_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>
<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="000">Tag 1</option>
<option value="000">Tag 2</option>
<option value="000">Tag 3</option>
</select>
</div>
<button class="subscribe_button ck_subscribe_button btn fields button" id='ck_subscribe_button'>
Subscribe
</button>
</form>
</div>
</div>
<style>
/* Put your custom styles here. Or grab the styles from another ConvertKit form and place them here. */
</style>
<script type="text/javascript">
/* This code handles the redirect since the API doesn't have it built in */
function overrideCKFormHandler() { (function ($) { $('document').ready(function ($) {
form = $('form#ck_subscribe_form');
form.off("submit");
form.submit(function(e) {
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) {
/* Change this to your thank you page URL */
window.location.href = "http://google.com"
},
error: function (jqXHR, textStatus, errorThrown) {
subButton.prop('disabled', false).text(btnText);
showErrorMsg();
}
})
});
}); })(jQuery); }
function overrideCKFormWhenReady() {
setTimeout(function(){
if(window.jQuery) { overrideCKFormHandler(); }
else { overrideCKFormWhenReady(); }
}, 300);
}
overrideCKFormWhenReady();
</script>
@daggerhart
Copy link

Found the answer to my own question here: http://kb.convertkit.com/article/api-documentation-v3/

You can subscribe an email address to multiple tags, forms, or courses with a single call. Add a comma-separated list of tags to the end of your POST a to subscription endpoint. Like this: POST /forms/xxxx/subscribe?email=xxxx&tags=1,2,3

Or to combine several into one call: POST /courses/xxxx/subscribe?email=xxxx&tags=1,2,3&forms=23&courses=34,45

@thescoshow
Copy link

Hi @nathanbarry & @daggerhart

Your input would be much appreciated. I have a few questions about this example as well. I was able to get the form to capture my email address but it isn't capturing my first name or the selected tag. It looks like I followed the directions correctly. Do I need to have jQuery running for this to work? I was also wondering if it's possible to subscribe people to multiple tags with check boxes instead. I want to ask users what topics they're interested in. This would make your tagging feature even cooler. I've provided my code below. Thanks in advance!

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

  <div class="ck_form_fields">

    <!--  Form starts here  -->
    <form method="POST" id="ck_subscribe_form" class="ck_subscribe_form" action="http://api.convertkit.com/v3/forms/26001/subscribe" data-remote="true">
      <input type="hidden" name="id" value="26001" id="landing_page_id">
      <input type="hidden" name="api_key" value="HY091mwsmDL0hSH9r45Ypw" />
      <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="first_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>

          <label class="tag" for="tags">Which topics are you interested in?</label>
          <select name="tags">
            <option disabled="disabled" selected="selected">Select a tag</option>
            <option value="22025">Test Tag 1</option>
            <option value="22026">Test Tag 2</option>
            <option value="22027">Test Tag 3</option>
          </select>
      </div>

      <button class="subscribe_button ck_subscribe_button btn fields button" id='ck_subscribe_button'>
        Subscribe
      </button>
    </form>
  </div>

 </div>

<style>

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

</style>

<script type="text/javascript">
/* This code handles the redirect since the API doesn't have it built in */
function overrideCKFormHandler() { (function ($) { $('document').ready(function ($) {
  form = $('form#ck_subscribe_form');
  form.off("submit");
  form.submit(function(e) {
    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) {
        /* Change this to your thank you page URL */
        window.location.href = "http://lisafiorvante.com/thank-you/"
      },
      error: function (jqXHR, textStatus, errorThrown) {
        subButton.prop('disabled', false).text(btnText);
        showErrorMsg();
      }
    })
  });
}); })(jQuery); }
function overrideCKFormWhenReady() {
  setTimeout(function(){
    if(window.jQuery) { overrideCKFormHandler(); }
    else { overrideCKFormWhenReady(); }
  }, 300);
}
overrideCKFormWhenReady();
</script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment