Statamic AJAX Form Submission with Axios

< Back to Blog

Statamic AJAX Form Submission with Axios

July 11th, 2025

Statamic

Submitting forms with AJAX is a great way to create a smooth, interactive experience for your users because no page reloads are required.

This approach is especially useful when forms are inside modals or lower down a page. For example, a newsletter subscription form in the footer. Normally, after a user submits, the page reloads and you’d need extra code to scroll back to the form when the page reloads. With AJAX, the form simply submits in the background and shows a success message in place, a much nicer experience.

Why use AJAX

Normally, when a user submits a form, the browser refreshes the page to send the data to the server. With AJAX (Asynchronous JavaScript and XML), the form data is sent in the background using JavaScript, so the page never reloads.
This makes the process faster, smoother, and gives you better control for showing success or error messages.

A quick introduction to Axios

Axios is a popular JavaScript library for making HTTP requests. It’s a wrapper around the browser’s built-in fetch API, but with a simpler syntax and helpful features like automatic JSON handling and easy error catching.

In this example, Axios sends the form data to Statamic’s backend and receives a JSON response. We can then use that response to either display a success message or show validation errors.

1. Install and import Axios

Install Axios with npm:

npm install axios

Then import it into your site’s JavaScript file (for example, site.js):

import axios from 'axios';

2. Set up the JavaScript

The script below listens for the form submission, sends the data with axios.post(), and updates the UI depending on the server response.

if (document.querySelector('.form')) {
  const form = document.querySelector('.form form');
  axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

  form.addEventListener('submit', function (event) {
    event.preventDefault();

    axios
      .post(form.action, new FormData(form))
      .then((response) => {
        if (response.data.success) {
          form.reset();

          // Update the UI
          document.querySelector('.form-success').classList.remove('hidden');
          document.querySelector('.form').classList.add('hidden');
          document.querySelector('.form-errors').classList.add('invisible');
        }
      })
      .catch((error) => {
        // Update the UI
        document.querySelector('.form-errors').innerHTML = error.response.data.errors;
        document.querySelector('.form-errors').classList.remove('invisible');
      });
  });
}

What happens behind the scenes

The submit event is intercepted so the browser doesn’t reload.
new FormData(form) collects all input values.
Axios posts the data to the form’s action URL.
Statamic validates the data and responds with JSON.
- success: true if everything is valid
- Validation errors if something’s missing
The UI updates to show a success message or display the errors.

3. Create the HTML markup

Here’s a simple Statamic form with a honeypot field for spam protection, a success message container, and an error container.

<div class="form-success hidden">
  Thank you for your enquiry, we will be in touch shortly.
</div>

<div class="form">
  {{ form:enquiry }}

    {{ fields }}
      <div class="form-field">{{ field }}</div>
    {{ /fields }}

    <input 
      type="text" 
      class="hidden" 
      name="{{ honeypot ?? 'honeypot' }}"
    >

    <div class="form-errors invisible"></div>

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

  {{ /form:enquiry }}
</div>

Use cases

Because AJAX doesn’t reload the page, it works well in places where reloading would be disruptive:

Forms inside modals - submit the form and show a success message without closing or refreshing the modal.
Inline newsletter signups - show a “Thanks for subscribing” message right in the footer or sidebar.

With Axios and Statamic working together, you can submit forms without page reloads, display real-time validation errors, and create a smoother user experience no matter where your form sits. This small change makes a big difference to how users interact with your site.