Skip to content

Instantly share code, notes, and snippets.

@coler-j

coler-j/home.html

Created August 23, 2017 15:31
Show Gist options
  • Save coler-j/27759a0f1ec4486478014bdd47ca3589 to your computer and use it in GitHub Desktop.
Save coler-j/27759a0f1ec4486478014bdd47ca3589 to your computer and use it in GitHub Desktop.
Download ZIP
Mailchimp Mobirise integration
Raw
home.html
<body>
.... [ More html above ]
<!-- Stat of mc_embed_form -->
<div id="mc-embedded-subscribe-form-1-div" hidden=""></div>
<form class="mbr-form" action="http://kinesii.us16.list-manage.com/subscribe/post-json?u=8836e3e49f1c992000f8e3ee5&amp;id=d0b87df4cd" method="post" id="mc-embedded-subscribe-form-1" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input type="hidden" data-form-email="true" value="XJwxv8go/T3rZL+mGCMMKatxhKhWmBOIUFRa66QaqXkj60XvQK/ok3cqrzGSOzxGscheg/AUT0FJ5xfD7iRFXCElwWqmeJJqg7WptTo20TdIrMFmR29cTGl4RyyWX6gQ">
<div class="mbr-subscribe input-group">
<input class="form-control" type="email" name="EMAIL" placeholder="Email" data-form-field="Email" required="" id="email-form3-3">
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="b_8836e3e49f1c992000f8e3ee5_d0b87df4cd" tabindex="-1" value="">
</div>
<span class="input-group-btn">
<button href="" type="submit" value="Subscribe" name="subscribe" class="btn btn-info display-4">SUBSCRIBE</button>
</span>
</div>
</form>
<!--End mc_embed_signup-->
.... [ More html]
<!-- Mailchimp form #2 (In footer) -->
<form class="mbr-form" action="http://kinesii.us16.list-manage.com/subscribe/post-json?u=8836e3e49f1c992000f8e3ee5&amp;id=d0b87df4cd" method="post" id="mc-embedded-subscribe-form-2" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input type="hidden" data-form-email="true" value="XJwxv8go/T3rZL+mGCMMKatxhKhWmBOIUFRa66QaqXkj60XvQK/ok3cqrzGSOzxGscheg/AUT0FJ5xfD7iRFXCElwWqmeJJqg7WptTo20TdIrMFmR29cTGl4RyyWX6gQ">
<div class="mbr-subscribe mbr-subscribe-dark input-group">
<input type="email" class="form-control" name="EMAIL" required="" data-form-field="Email" placeholder="Email Address" id="email-footer4-q">
<span class="input-group-btn mx-2"><button type="submit" value="Subscribe" name="subscribe" class="btn btn-sm btn-primary display-4">Subscribe</button></span>
</div>
</form>
<!-- End mailchimp form #2 ( in footer)-->
.... [ More html]
<!-- Scripts for form (After jquery is added RIGHT BEFORE END OF THE BODY TAG) -->
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js'></script>
<script type='text/javascript'>
function submitSubscribeForm($form, $resultElement) {
var serializedForm = $form.serialize();
var formURL = $form.attr("action");
$.ajax({
type: "GET",
url: formURL,
data: serializedForm,
cache: false,
dataType: "jsonp",
jsonp: "c",
contentType: "application/json; charset=utf-8",
error: function(error){},
success: function(data){
if (data.result != "success") {
var message = "<div class='alert alert-form alert-warning text-xs-center'>Sorry. Unable to subscribe. Please try again later.</div>";
if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
message = "<div class='alert alert-form alert-warning text-xs-center'>You're already subscribed. Thank you.</div>";
}
if ($resultElement !== null) {
$resultElement.html(message);
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
} else {
if ($resultElement !== null) {
$resultElement.html("<div class='alert alert-form alert-success text-xs-center'>Thank you!<br>You must confirm the subscription in your inbox.</div>");
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
}
}
});
}
$("#mc-embedded-subscribe-form-1").submit(function(e){
e.preventDefault();
var successDiv = $("#mc-embedded-subscribe-form-1-div");
var form = $("#mc-embedded-subscribe-form-1");
submitSubscribeForm(form, successDiv);
});
$("#mc-embedded-subscribe-form-2").submit(function(e){
e.preventDefault();
var successDiv = null;
var form = $("#mc-embedded-subscribe-form-2");
submitSubscribeForm(form, successDiv);
});
</script>
<!-- End of scripts for form -->
</body>
Raw
our-story.html
<body>
.... [ More html above ]
<!-- Mailchimp form #2 (In footer) -->
<form class="mbr-form" action="http://kinesii.us16.list-manage.com/subscribe/post-json?u=8836e3e49f1c992000f8e3ee5&amp;id=d0b87df4cd" method="post" id="mc-embedded-subscribe-form-2" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input type="hidden" data-form-email="true" value="XJwxv8go/T3rZL+mGCMMKatxhKhWmBOIUFRa66QaqXkj60XvQK/ok3cqrzGSOzxGscheg/AUT0FJ5xfD7iRFXCElwWqmeJJqg7WptTo20TdIrMFmR29cTGl4RyyWX6gQ">
<div class="mbr-subscribe mbr-subscribe-dark input-group">
<input type="email" class="form-control" name="EMAIL" required="" data-form-field="Email" placeholder="Email Address" id="email-footer4-q">
<span class="input-group-btn mx-2"><button type="submit" value="Subscribe" name="subscribe" class="btn btn-sm btn-primary display-4">Subscribe</button></span>
</div>
</form>
<!-- End mailchimp form #2 ( in footer)-->
.... [ More html]
<!-- Scripts for form (After jquery is added RIGHT BEFORE END OF THE BODY TAG) -->
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js'></script>
<script type='text/javascript'>
function submitSubscribeForm($form, $resultElement) {
var serializedForm = $form.serialize();
var formURL = $form.attr("action");
$.ajax({
type: "GET",
url: formURL,
data: serializedForm,
cache: false,
dataType: "jsonp",
jsonp: "c",
contentType: "application/json; charset=utf-8",
error: function(error){},
success: function(data){
if (data.result != "success") {
var message = "<div class='alert alert-form alert-warning text-xs-center'>Sorry. Unable to subscribe. Please try again later.</div>";
if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
message = "<div class='alert alert-form alert-warning text-xs-center'>You're already subscribed. Thank you.</div>";
}
if ($resultElement !== null) {
$resultElement.html(message);
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
} else {
if ($resultElement !== null) {
$resultElement.html("<div class='alert alert-form alert-success text-xs-center'>Thank you!<br>You must confirm the subscription in your inbox.</div>");
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
}
}
});
}
$("#mc-embedded-subscribe-form-2").submit(function(e){
e.preventDefault();
var successDiv = null;
var form = $("#mc-embedded-subscribe-form-2");
submitSubscribeForm(form, successDiv);
});
</script>
<!-- End of scripts for form -->
</body>
Raw
our-team.html
<body>
.... [ More html above ]
<!-- Mailchimp form #2 (In footer) -->
<form class="mbr-form" action="http://kinesii.us16.list-manage.com/subscribe/post-json?u=8836e3e49f1c992000f8e3ee5&amp;id=d0b87df4cd" method="post" id="mc-embedded-subscribe-form-2" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input type="hidden" data-form-email="true" value="XJwxv8go/T3rZL+mGCMMKatxhKhWmBOIUFRa66QaqXkj60XvQK/ok3cqrzGSOzxGscheg/AUT0FJ5xfD7iRFXCElwWqmeJJqg7WptTo20TdIrMFmR29cTGl4RyyWX6gQ">
<div class="mbr-subscribe mbr-subscribe-dark input-group">
<input type="email" class="form-control" name="EMAIL" required="" data-form-field="Email" placeholder="Email Address" id="email-footer4-q">
<span class="input-group-btn mx-2"><button type="submit" value="Subscribe" name="subscribe" class="btn btn-sm btn-primary display-4">Subscribe</button></span>
</div>
</form>
<!-- End mailchimp form #2 ( in footer)-->
.... [ More html]
<!-- Scripts for form (After jquery is added RIGHT BEFORE END OF THE BODY TAG) -->
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js'></script>
<script type='text/javascript'>
function submitSubscribeForm($form, $resultElement) {
var serializedForm = $form.serialize();
var formURL = $form.attr("action");
$.ajax({
type: "GET",
url: formURL,
data: serializedForm,
cache: false,
dataType: "jsonp",
jsonp: "c",
contentType: "application/json; charset=utf-8",
error: function(error){},
success: function(data){
if (data.result != "success") {
var message = "<div class='alert alert-form alert-warning text-xs-center'>Sorry. Unable to subscribe. Please try again later.</div>";
if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
message = "<div class='alert alert-form alert-warning text-xs-center'>You're already subscribed. Thank you.</div>";
}
if ($resultElement !== null) {
$resultElement.html(message);
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
} else {
if ($resultElement !== null) {
$resultElement.html("<div class='alert alert-form alert-success text-xs-center'>Thank you!<br>You must confirm the subscription in your inbox.</div>");
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
}
}
});
}
$("#mc-embedded-subscribe-form-2").submit(function(e){
e.preventDefault();
var successDiv = null;
var form = $("#mc-embedded-subscribe-form-2");
submitSubscribeForm(form, successDiv);
});
</script>
<!-- End of scripts for form -->
</body>
Raw
why-kinesii.html
<body>
.... [ More html above ]
<!-- Mailchimp form #2 (In footer) -->
<form class="mbr-form" action="http://kinesii.us16.list-manage.com/subscribe/post-json?u=8836e3e49f1c992000f8e3ee5&amp;id=d0b87df4cd" method="post" id="mc-embedded-subscribe-form-2" name="mc-embedded-subscribe-form" target="_blank" novalidate>
<input type="hidden" data-form-email="true" value="XJwxv8go/T3rZL+mGCMMKatxhKhWmBOIUFRa66QaqXkj60XvQK/ok3cqrzGSOzxGscheg/AUT0FJ5xfD7iRFXCElwWqmeJJqg7WptTo20TdIrMFmR29cTGl4RyyWX6gQ">
<div class="mbr-subscribe mbr-subscribe-dark input-group">
<input type="email" class="form-control" name="EMAIL" required="" data-form-field="Email" placeholder="Email Address" id="email-footer4-q">
<span class="input-group-btn mx-2"><button type="submit" value="Subscribe" name="subscribe" class="btn btn-sm btn-primary display-4">Subscribe</button></span>
</div>
</form>
<!-- End mailchimp form #2 ( in footer)-->
.... [ More html]
<!-- Scripts for form (After jquery is added RIGHT BEFORE END OF THE BODY TAG) -->
<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js'></script>
<script type='text/javascript'>
function submitSubscribeForm($form, $resultElement) {
var serializedForm = $form.serialize();
var formURL = $form.attr("action");
$.ajax({
type: "GET",
url: formURL,
data: serializedForm,
cache: false,
dataType: "jsonp",
jsonp: "c",
contentType: "application/json; charset=utf-8",
error: function(error){},
success: function(data){
if (data.result != "success") {
var message = "<div class='alert alert-form alert-warning text-xs-center'>Sorry. Unable to subscribe. Please try again later.</div>";
if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
message = "<div class='alert alert-form alert-warning text-xs-center'>You're already subscribed. Thank you.</div>";
}
if ($resultElement !== null) {
$resultElement.html(message);
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
} else {
if ($resultElement !== null) {
$resultElement.html("<div class='alert alert-form alert-success text-xs-center'>Thank you!<br>You must confirm the subscription in your inbox.</div>");
$resultElement.removeAttr('hidden');
$resultElement.delay(5000).fadeOut(400)
}
}
}
});
}
$("#mc-embedded-subscribe-form-2").submit(function(e){
e.preventDefault();
var successDiv = null;
var form = $("#mc-embedded-subscribe-form-2");
submitSubscribeForm(form, successDiv);
});
</script>
<!-- End of scripts for form -->
</body>
@coler-j
Copy link
Author

coler-j commented Aug 23, 2017

Basically you need to adapt the mobrise form to contain the expected/required fields for mailchimp, and then change the action URL to post-json and then send the form data via AJAX. This needs to be done on all pages that interact with a mailchimp form.

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