Integrate · Frameworks · Last updated May 16, 2026

Gatsby

Gatsby pages are React components — treat SaveForm like any other JSON API. Need SSR-only posting? Proxy through a server route in your host or a Netlify function; the browser recipe matches React.

AI assistant prompt

Uses React patterns inside Gatsby bundles — client-only fetch guards and hydration caveats called out.

Help me integrate SaveForm.io (https://www.saveform.io) in a Gatsby project (assume React-powered pages unless I clarify otherwise).

Please:
1. Decide client-only fetch (typical Browser API usage) versus delegating POST to Netlify/Vercel/serverless wrappers if SEO requires it.
2. Use React state/hooks identical to SPA patterns — preventDefault, JSON fetch, surfaced errors.
3. Tell me explicitly to replace YOUR_FORM_ID with my real form ID from SaveForm → Dashboard → Forms (copy the form ID). Without my actual ID in the URL, submissions will not reach my workspace.
4. Use this doc when helpful: https://www.saveform.io/docs/frameworks/gatsby

SaveForm control fields (names starting with _): pass them as normal keys in the JSON or form body when useful:
• _honey — honeypot for spam filtering: https://www.saveform.io/docs/spam-protection
• _redirect and _redirect_mode — thank-you URL and whether to show SaveForm's success page first vs redirect immediately: https://www.saveform.io/docs/custom-redirects
• _emailTo — optional per-submit override for where the notification email is sent: https://www.saveform.io/docs/email-notifications
• Submitter auto-reply (acknowledgement email) is configured on the form in the dashboard with {{field}} placeholders, not ad-hoc payload fields: https://www.saveform.io/docs/auto-reply

Client form

Guard window usage if you ever render this component during SSR; the minimal example assumes a client-only widget.

tsxsrc/components/contact-form.tsx

import { useState, type FormEvent } from 'react';

export function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'sending' | 'ok' | 'err'>('idle');

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');
    const payload = Object.fromEntries(new FormData(e.currentTarget).entries());
    const res = await fetch('https://saveform.io/api/submit/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    setStatus(res.ok ? 'ok' : 'err');
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={status === 'sending'}>Send</button>
      {status === 'ok' && <p>Merci!</p>}
      {status === 'err' && <p>Try again later.</p>}
    </form>
  );
}

Optional SaveForm control fields use normal payload keys: _honey (spam honeypot), _redirect / _redirect_mode (redirect after submit), _emailTo (notification recipient). Submitter replies use dashboard auto-reply. Supported fields →

Client form

Tips