Integrate · Frameworks · Last updated May 16, 2026

React

SaveForm does not ship a React SDK — you POST JSON with fetch, exactly like any other browser runtime. Below is the pattern most teams use for inline success states without a full page reload.

AI assistant prompt

Calls out React-specific bits: use client, preventing default submit, and fetch from onSubmit — plus SSR trade-offs briefly.

Help me integrate SaveForm.io (https://www.saveform.io) in a React app (SPA or isolated component).

Please:
1. Ask whether I prefer controlled inputs, uncontrolled + FormData, or a hybrid; gather field names/types/validation UX.
2. Put the form in an appropriate boundary (typically a `"use client"` module for event handlers unless I ask for SSR-only patterns). Prevent the default HTML submit and POST JSON with fetch from onSubmit.
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. Add loading/disabled/submitted/error UX that matches idiomatic React and avoids leaking implementation details publicly.
5. If I need SSR-only posting, briefly contrast “fetch in Route Handler / server action elsewhere” versus client fetch.
6. Use this doc when helpful: https://www.saveform.io/docs/frameworks/react

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

Controlled example

Prevent the native submit, serialize field values, and POST application/json. Control fields such as _honey or _redirect are ordinary keys in the body — see JavaScript / Fetch.

tsxContactForm.tsx

'use client';

import { useState } from 'react';

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

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('sending');
    const data = Object.fromEntries(new FormData(e.currentTarget));

    const res = await fetch('https://saveform.io/api/submit/YOUR_FORM_ID', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });

    setStatus(res.ok ? 'ok' : 'err');
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button type="submit" disabled={status === 'sending'}>
        Send
      </button>
      {status === 'ok' && <p>Thanks — we received it.</p>}
      {status === 'err' && <p>Something went wrong.</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 →

Controlled example

Tips