Use JavaScript submissions when you need loading states, inline errors, or single-page app behavior. Formbase accepts FormData and JSON payloads, so you can post directly from the browser.
Browser requests receive a 303 redirect instead of JSON. When submitting with JavaScript, treat a 303 status as success or send the request from your server for a JSON response.
Build your form
Create a normal HTML form with name attributes. JavaScript will serialize it.
Submit with your preferred method
<form id="contact-form">
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" required></textarea>
<button id="submit" type="submit">Send</button>
</form>
<p id="status" role="status"></p>
<script>
const form = document.getElementById('contact-form');
const status = document.getElementById('status');
form.addEventListener('submit', async (event) => {
event.preventDefault();
status.textContent = '';
const response = await fetch('https://formbase.dev/s/YOUR_FORM_ID', {
method: 'POST',
body: new FormData(form),
redirect: 'manual',
});
if (response.status === 303 || response.ok) {
status.textContent = 'Submitted!';
form.reset();
return;
}
status.textContent = 'Submission failed.';
});
</script>
redirect: 'manual' prevents the browser from following the redirect and running into CORS issues.<form id="xhr-form">
<input name="name" placeholder="Name" required />
<button type="submit">Send</button>
</form>
<p id="xhr-status"></p>
<script>
const xhrForm = document.getElementById('xhr-form');
const xhrStatus = document.getElementById('xhr-status');
xhrForm.addEventListener('submit', (event) => {
event.preventDefault();
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://formbase.dev/s/YOUR_FORM_ID');
xhr.onload = () => {
xhrStatus.textContent = xhr.status === 303 || xhr.status === 200
? 'Submitted!'
: 'Submission failed.';
};
xhr.send(new FormData(xhrForm));
});
</script>
<form id="jquery-form">
<input name="name" placeholder="Name" required />
<button type="submit">Send</button>
</form>
<p id="jquery-status"></p>
<script>
$('#jquery-form').on('submit', function (event) {
event.preventDefault();
$.ajax({
url: 'https://formbase.dev/s/YOUR_FORM_ID',
method: 'POST',
data: new FormData(this),
processData: false,
contentType: false,
complete: function (xhr) {
$('#jquery-status').text(
xhr.status === 303 || xhr.status === 200
? 'Submitted!'
: 'Submission failed.'
);
}
});
});
</script>
FormData and disable automatic processing.If you need a JSON response, submit from your server (for example, an API route or server action) instead of the browser.
