Constant Contact Ajax Form

constant-contact-ajax-form.markdown

Constant Contact Ajax Form

test

A Pen by Michael Sallander on CodePen.

License.

index.html

<div class="footer-signup__alert"></div>
<form  class="footer-signup__form" action=" ">
  <input type="hidden" name="ca" value="22a425e5-8c33-4258-8926-5eac0b2ccc4a">
  <input type="hidden" name="list" value="1065413952">
  <input name="email" type="email" required="required" placeholder="Your Email*">
  <button type="submit" class="reset">Subscribe</button>
</form>

script.js

$(".footer-signup__form").submit(function(event) {
  var $form = $(this);
  $.ajax({
    type: 'POST', // HTTP method, always use POST for our form
    url: 'https://visitor2.constantcontact.com/api/signup',
    data: $form.serialize(), // serialized form data
    dataType: 'json', // the type of data we expect back from the server
    success: function() {
      $form.fadeOut(250, function() {
        $(".footer-signup__alert").addClass("footer-signup__alert--success").html('<p>You have been added to our list!</p>').fadeIn(250);
      });
    },
    error: function(response) {
      $form.fadeOut(250, function() {
        $(".footer-signup__alert").addClass("footer-signup__alert--danger").html('<p>' + response.responseJSON.err + '. Please contact us for assistance</p>').fadeIn(250);
      });
    }
  });
  // stop the form from submitting the normal way and refreshing the page
  event.preventDefault();
});