Svelte 5 & SvelteKit

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

svelte-integration.tsx

1234567891011121314151617181920212223242526
<script>
  let status = $state('idle');
 
  async function handleSend(e) {
    e.preventDefault();
    status = 'loading';
    const formData = new FormData(e.currentTarget);
 
    const res = await fetch('https://api.formtruck.com/f/ft_YOUR_FORM_ID', {
      method: 'POST',
      body: formData,
      headers: { Accept: 'application/json' }
    });
 
    if (res.ok) status = 'success';
  }
</script>
 
<form onsubmit={handleSend}>
  <input name="name" placeholder="Name" required />
  <input name="email" type="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit" disabled={status === 'loading'}>
    {status === 'loading' ? 'Transmitting...' : 'Send Message'}
  </button>
</form>

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