What is AJAX?

AJAX or Asynchronous JavaScript and XML is described by MDN as a web development technique in which a web app fetches content from the server by making asynchronous HTTP requests, and uses the new content to update the relevant parts of the page without requiring a full page load.

Using the Fetch API

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network. It is a more powerful and flexible replacement for XMLHttpRequest.

We will use the it to send your form data to Formbox’s server to handle the submissions.

Lets start with a simple example:

<script>
  fetch('https://api.formbox.app/s/{your_form_id}', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
    body: JSON.stringify({
      name: 'Jason',
      email: 'jason@example.com',
      message: 'Hello World',
    }),
  })
    .then((response) => console.log(response))
    .catch((error) => console.log(error));
</script>

Example output:

{ "success": true, "status": 200 }

This will work for any tech stack you are using, such as with React, Vue, Angular, or even vanilla JavaScript.