Skip to content

Instantly share code, notes, and snippets.

@Corstiaan84
Last active January 29, 2016 10:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Corstiaan84/0eba16d99c22b6378edd to your computer and use it in GitHub Desktop.
Save Corstiaan84/0eba16d99c22b6378edd to your computer and use it in GitHub Desktop.
<style>.email-octopus-form-wrapper h2{font-size:20px;margin:0 0 25px 0;}.email-octopus-form-row{margin-bottom:15px;}.email-octopus-form-row label{display:block;}.email-octopus-form-row input{width:400px;padding:8px;height:32px;border:1px solid #ccc;}.email-octopus-form-row-subscribe{margin-top:20px;}.email-octopus-form-row-subscribe button{background-color:#e0e0e0;padding:6px 12px;border:0;font-weight:bold;}.email-octopus-form-row-hp{position:absolute;left:-5000px;}.email-octopus-error-message{color:#e74c3c;}.email-octopus-referral{margin-top:20px;}</style>
<div class="email-octopus-form-wrapper">
<h2 class="email-octopus-heading" style="display: none;">Subscribe to Fluxmatix NL</h2>
<p class="email-octopus-success-message"></p>
<p class="email-octopus-error-message"></p>
<form method="post" action="https://emailoctopus.com/lists/34cea4d0-9b4d-11e5-a76d-0a4287b2e8c5/members/external-add" class="email-octopus-form">
<div class="email-octopus-form-row">
<label>Email address (required)</label>
<input type="email" name="emailAddress" class="email-octopus-email-address">
</div>
<div class="email-octopus-form-row" style="display: none;">
<label>First name</label>
<input type="text" name="firstName" class="email-octopus-first-name">
</div>
<div class="email-octopus-form-row" style="display: none;">
<label>Last name</label>
<input type="text" name="lastName" class="email-octopus-last-name">
</div>
<div class="email-octopus-form-row-hp">
<label>Protecting against bot signups - leave this field blank</label>
<input type="text" name="hp34cea4d0-9b4d-11e5-a76d-0a4287b2e8c5" autocomplete="off">
</div>
<div class="email-octopus-form-row-subscribe">
<button type="submit">Subscribe</button>
</div>
</form>
<div class="email-octopus-referral" style="display: none;">
Powered by <a href="/">EmailOctopus</a>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var emailOctopus = {
successMessage: 'Thanks for subscribing!',
missingEmailAddressMessage: 'Your email address is required.',
invalidEmailAddressMessage: 'Your email address looks incorrect, please try again.',
botSubmissionErrorMessage: 'This doesn\'t look like a human submission.',
unknownErrorMessage: 'Sorry, an unknown error has occurred. Please try again later.',
isBotPost: function() {
return $('.email-octopus-form-row-hp input').val();
},
basicValidateEmail: function(email) {
var regex = /\S+@\S+\.\S+/;
return regex.test(email);
},
ajaxSuccess: function() {
$('.email-octopus-success-message').text(
emailOctopus.successMessage
);
$('.email-octopus-form').hide();
},
ajaxError: function(textStatus) {
var response = $.parseJSON(textStatus.responseText);
if (response && response.error && response.error.code) {
switch(response.error.code) {
case 'INVALID_PARAMETERS':
$('.email-octopus-error-message').text(
emailOctopus.invalidParametersErrorMessage
);
return;
case 'BOT_SUBMISSION':
$('.email-octopus-error-message').text(
emailOctopus.botSubmissionErrorMessage
);
return;
}
}
$('.email-octopus-error-message').text(
emailOctopus.unknownErrorMessage
);
},
ajaxSubmit: function() {
var form = $('.email-octopus-form');
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function() {
emailOctopus.ajaxSuccess();
},
error: function(textStatus) {
emailOctopus.ajaxError(textStatus);
},
});
}
}
$(function() {
$('.email-octopus-form').submit(function(e) {
$('.email-octopus-error-message').empty();
var emailAddress = $('.email-octopus-email-address').val();
if (emailOctopus.isBotPost()) {
$('.email-octopus-error-message').text(
emailOctopus.botSubmissionErrorMessage
);
} else if (!$.trim(emailAddress)) {
$('.email-octopus-error-message').text(
emailOctopus.missingEmailAddressMessage
);
} else if (!emailOctopus.basicValidateEmail(emailAddress)) {
$('.email-octopus-error-message').text(
emailOctopus.invalidParametersErrorMessage
);
} else {
emailOctopus.ajaxSubmit();
}
return false;
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment