Cross Origin Requests are possible by submitting the form using Javascript.

If you want more control over your FormKeep form, you may want to consider using JavaScript to submit. This may be a good idea if you are already using a JavaScript framework, you want to add validation logic, or you don’t want to redirect the user after they submit the form.

You can submit to FormKeep using a standard AJAX request. To ensure the request does not cause a redirect, be sure to set the Accept header to application/javascript.

Given the following form:

<form id="newsletter-signup" action="http://formkeep.com/f/exampletoken" method="POST" accept-charset="UTF-8">
  <input type="hidden" name="utf8" value="✓">
  <input name="email" type="email">
  <input value="Submit" type="submit">
</form>

You can display your own UX or message when the submission is complete. We’ve built a small js library that can make this super simple and have also provided some examples using common js libraries.

formkeep.js library Example

The source lives at https://github.com/furiouscollective/formkeep.js Or the npm package here https://www.npmjs.com/package/@formkeep/formkeep Check out the documentation, but something simple to get you started

<script src="unpkg.com/@formkeep/formkeep"></script>
  FormKeep.post('<YOUR_FORM_IDENTIFIER>', { hello: 'world' })

jQuery Example

The main thing to remember when using jQuery, is to set the Accept header to application/javascript. Also make sure to replace the “exampletoken” with your real token.

<form id="newsletter-signup" action="http://formkeep.com/f/exampletoken" method="POST" accept-charset="UTF-8">
  <input type="hidden" name="utf8" value="✓">
  <input name="email" type="email">
  <input value="Submit" type="submit">
</form>

$(function() {
  $('#newsletter-signup').submit(function(event) {
    event.preventDefault();

    var formEl = $(this);
    var submitButton = $('input[type=submit]', formEl);

    $.ajax({
      type: 'POST',
      url: formEl.prop('action'),
      accept: {
        javascript: 'application/javascript'
      },
      data: formEl.serialize(),
      beforeSend: function() {
        submitButton.prop('disabled', 'disabled');
      }
    }).done(function(data) {
      submitButton.prop('disabled', false);
    });
  });
});

Axios Example

Axios is very similar, but setting the Accept header can trip people up, one trick is to add .json to the end of the formkeep url to force the server to send the right result back. Also make sure to replace the “exampletoken” with your real token.

    axios.post('https://formkeep.com/f/exampletoken.json', formData)
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    })
    .then(response => {
      console.log(response)
    })