JavaScript + AJAX

Submit with your preferred method

Fetch
XHR
jQuery

<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>

XHR gives you full control over success and error states.

<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>

jQuery works as long as you send FormData and disable automatic processing.

Getting Started

Integrations

File Uploads

Form Settings

Redirects

Submissions

Security

Self-Hosting

CMS Platforms

FAQ

JavaScript + AJAX