Introduction

FormBackend has it's own javascript include you can add to your website to make it a little easier to add AJAX functionality to your site. The script is non-blocking and won't affect your page load-speed.

Add the following to the bottom of your <body> tag:

<script defer src="https://js.formbackend.com/formbackend.js"></script>

You can now use our script like so:

<script>
  window.formbackend=window.formbackend||function(){(formbackend.q=formbackend.q||[]).push(arguments)};

  formbackend({
    selector: '#my-form',
    onSuccess: function(config) {
      alert('Form was submitted');
    }
  });
</script>

The javascript above will show an alert box when the form was successfully submitted.

The config object contains a few things:

Key Value
form the form element
values the submitted values
submission_text the submission text you've set

That means that you can do a couple of different things. You can show an alert box with the submission_text like so:

<script>
  window.formbackend=window.formbackend||function(){(formbackend.q=formbackend.q||[]).push(arguments)};

  formbackend({
    selector: '#my-form',
    onSuccess: function(config) {
      alert(config.submission_text);
    }
  });
</script>

Or you can replace your form with a div that says your form was successfully submitted:

<script>
  window.formbackend=window.formbackend||function(){(formbackend.q=formbackend.q||[]).push(arguments)};

  formbackend({
    selector: '#my-form',
    onSuccess: function(config) {
      const form = config.form;
      const div = document.createElement('div');
      div.innerHTML = `Thanks for your submission, ${config.values.name}`;
      form.parentNode.replaceChild(div, form);
    }
  });
</script>

See an example from JSFiddle below: