AJAX / Fetch API (Vanilla JavaScript)

Get Endpoint Free

Interactive Live Sandbox

Test submitting this live demo form in real-time.

Ready

3-Step Integration Checklist

1Create a form in your Formtruck Dashboard to get your endpoint URL.

2Paste the component code into your codebase.

3Receive instant submission alerts in your inbox and dashboard!

Implementation Code

Copy-paste ready

ajax-fetch-integration.tsx

12345678910111213141516171819202122232425262728293031323334
// Vanilla JavaScript AJAX Submission
const form = document.getElementById('contact-form');
 
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const submitButton = form.querySelector('button[type="submit"]');
  submitButton.disabled = true;
  submitButton.innerText = 'Submitting...';
 
  const formData = new FormData(form);
 
  try {
    const response = await fetch('https://api.formtruck.com/f/ft_YOUR_FORM_ID', {
      method: 'POST',
      body: formData,
      headers: {
        Accept: 'application/json',
      },
    });
 
    if (response.ok) {
      alert('Thank you! Your submission was successful.');
      form.reset();
    } else {
      const errorData = await response.json();
      alert('Error: ' + (errorData.message || 'Submission failed'));
    }
  } catch (err) {
    alert('Network error occurred. Please try again.');
  } finally {
    submitButton.disabled = false;
    submitButton.innerText = 'Submit';
  }
});

Formtruck Special Form Field Attributes

name="_gotcha"Honeypot

Keep this field hidden via CSS. If a spam bot fills it out, Formtruck silently traps the submission into your spam folder.

name="_next"Redirect

Specify a custom thank-you page URL (e.g. https://yoursite.com/thank-you) for native HTML POST submissions.

name="_subject"Email Subject

Customize the email notification subject line (e.g. New VIP Client Inquiry).