AJAX form submission is a technique that sends form data to a server using JavaScript's Fetch API or XMLHttpRequest, allowing the page to remain loaded and show success/error feedback without a full page reload.
By Vaibhav Jain · Last updated March 27, 2026
Traditional HTML forms submit data by navigating the browser to a new page — the form's action URL. This causes a full page reload, which disrupts the user experience. AJAX (Asynchronous JavaScript and XML) solves this by sending the form data in the background while the user stays on the same page.
With AJAX submission, JavaScript intercepts the form's submit event, serializes the form data, and sends it via the Fetch API (or older XMLHttpRequest). The server responds with a success or error status, and your JavaScript code can update the UI accordingly — showing a "Thank you" message, hiding the form, or displaying error details.
The key advantages are better UX (no jarring page reload), the ability to show inline validation errors returned by the server, and control over the post-submission experience. The downside is that it requires JavaScript, which means the form won't work if JavaScript is disabled.
FormsList supports both traditional form submissions (redirects to a thank-you page) and AJAX submissions. For AJAX, set the Accept header to 'application/json' in your fetch request, and FormsList will return a JSON response instead of redirecting.
What is AJAX form submission? AJAX (Asynchronous JavaScript and XML) form submission is a technique that uses JavaScript to send form data to a server in the background without causing a full page reload, allowing the user to remain on the same page and receive inline feedback about the submission result. Instead of the browser navigating away from the current page (as happens with traditional HTML form submission), AJAX intercepts the submit event, sends the data asynchronously via the Fetch API or XMLHttpRequest, and uses the server's response to update the page dynamically — showing a success message, displaying validation errors, or triggering a follow-up action.
The implementation of AJAX form submission follows a consistent pattern. First, you attach a JavaScript event listener to the form's submit event and call event.preventDefault() to stop the browser's default navigation behavior. Next, you collect the form data — either by constructing a FormData object from the form element or by manually building a JSON payload from the input values. Then you send the data using the Fetch API: fetch(endpointUrl, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(data) }). The server processes the submission and returns a response (typically JSON) indicating success or failure. Finally, your JavaScript reads the response and updates the DOM: replacing the form with a thank-you message, highlighting fields with validation errors, or showing a toast notification. The entire round trip happens in the background, typically completing in under a second.
AJAX form submission is the standard approach in modern web development, particularly for single-page applications (SPAs) built with frameworks like React, Vue, Angular, and Svelte, where full page reloads would destroy application state. It provides several advantages over traditional submission: the user experience is smoother (no page flash or navigation), server-returned validation errors can be displayed inline next to the relevant fields, you can show loading states during submission, and you have full control over the post-submission experience (animations, conditional redirects, or chained actions). The primary tradeoff is a JavaScript dependency — if a user has JavaScript disabled, the form will not submit. For accessibility and progressive enhancement, best practice is to include a standard action URL as a fallback so the form still works without JavaScript.
FormsList fully supports AJAX form submissions alongside traditional form posts. To use AJAX with FormsList, send a POST request to your form endpoint (https://formslist.com/f/your_form_id) with the header Accept: application/json. FormsList detects this header and returns a JSON response — { "success": true } on success or { "error": "message" } on failure — instead of performing an HTTP redirect. This makes it straightforward to integrate FormsList with any JavaScript framework. A real-world example: a React-based SaaS marketing site uses FormsList for its "Book a Demo" form. The React component sends form data via fetch with the JSON accept header, shows a spinner during submission, and replaces the form with a personalized confirmation message on success — all without leaving the page. If the user has JavaScript disabled, the form's action attribute still points to the FormsList endpoint, which redirects to a configured thank-you page as a graceful fallback.
Use fetch() to POST form data as JSON, then check the response status to show a success message or error inline without reloading.
In a React component, prevent default form submission with e.preventDefault(), send data via fetch, and update component state to show confirmation.
Build the form with a standard action URL for non-JS users, then layer AJAX submission on top for users with JavaScript enabled.
Set up your form backend in under a minute. No server required, no complex configuration — just a simple endpoint for your forms.