Using AJAX | FormBackend

Use JavaScript to submit your form and customize the experience

For this example we’re going to use jQuery. So make sure you’ve loaded that on your page.

Let’s go ahead and look at the form we’ll be using. This is your own HTML - and the only thing you need to do to make use of Formbackend. Is to create an account with us, create a new form and use that unique form URL as the value of the action parameter of your form (abcd1234 is the unique identifier for your form - so use whatever you have):

<form action="https://www.formbackend.com/f/{your-unique-token}" method="post" id="form-signup">
  <label>Name</label>
  <input type="text" name="name">

  <label>Email</label>
  <input type="text" name="email">

  <button type="submit">Submit</button>
</form>

(make sure you change {your-unique-token} in the above with the unique identifier for your specific form)

Let’s take a look at the javascript:

<script>
$(function() {

  var $form = $('#form-signup');

  $form.on("submit", function(e) {

    var formUrl = $(this).attr('action');

    // We don't want the page to submit and refresh
    e.preventDefault();

    // POST the request to Formbackend (the formUrl value)
    $.ajax({
      url: formUrl,
      type: 'POST',
      headers : {
        'accept' : 'application/javascript',
      },
      // We serialize the form fields
      data: $form.serialize()
    }).done(function(submissionMessage) {
      // Happens when request goes through
      // submissionMessage is the "Submission Text" you set in 
      // Formbackend - default: "We received your submission"
    }).fail(function() {
      // Happens when something goes wrong
    }).always(function() {
      // This always happens
    });

  });

});
</script>

If you add the above javascript inside of a script tag on your website - and the form is similar to what we have in the above example. Then things should just work.

The final HTML looks something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Formbackend Test</title>
  </head>
  <body>
    <form action="https://www.formbackend.com/f/kcsfk4qr" method="post" id="form-signup">
      <label>Name</label>
      <input type="text" name="name">

      <label>Email</label>
      <input type="text" name="email">

      <button type="submit">Submit</button>
    </form>

    <script
      src="https://code.jquery.com/jquery-3.2.1.min.js"
      integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"></script>

    <script>
      $(function() {

        var $form = $('#form-signup');

        $form.on("submit", function(e) {
          var formUrl = $(this).attr('action');

          // We don't want the page to submit and refresh
          e.preventDefault();

          // POST the request to Formbackend (the formUrl value)
          $.ajax({
            url: formUrl,
            type: 'POST',
            headers : {
              'accept' : 'application/javascript',
            },
            // We serialize the form fields
            data: $form.serialize()
          }).done(function(submissionMessage) {
            // Happens when success!
            // submissionMessage is the "Submission Text" you set in 
            // Formbackend - default: "We received your submission"
          }).fail(function() {
            // Happens when something goes wrong
          }).always(function() {
            // This always happens
          });
        });
      });
    </script>
  </body>
</html>