Instantly share code, notes, and snippets.
Forked from davidlamarwheeler/Tags+CKForm.html
Last active
May 12, 2018 11:13
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save dwilmer/8cfbf0119f9edcacd6dd551af9cecb37 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- | |
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 [email protected] — 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment