|
<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> |