Integrate · Frameworks · Last updated May 16, 2026

Next.js

Next.js does not change the SaveForm contract — your endpoint still expects POST with JSON or form-encoded data. Choose whether the POST runs in the browser (typical SPA-style UX) or on the server (no CORS, good for hiding submission logic).

AI assistant prompt

Highlights App Router patterns: client fetch versus Server Actions/route handlers hitting SaveForm from the server, and how redirects differ from SPA navigation.

Help me integrate SaveForm.io (https://www.saveform.io) in Next.js (App Router is the default assumption unless I specify Pages Router).

Please:
1. Clarify whether the POST runs in the browser (client fetch, familiar SPA UX + inline states) or on the server (Server Action / route handler hitting SaveForm directly).
2. Implement the POST with correct headers/body serialization; remind me browser CORS is irrelevant when the hop is server→SaveForm.
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. After server-side submit, advise how to mutate UI (revalidate paths, mutate client store, redirects) based on SaveForm HTTP status.
5. Note _redirect behaves for classic HTML submits; SPA/Server Actions usually handle navigation in Next.js explicitly.
6. Use this doc when helpful: https://www.saveform.io/docs/frameworks/next

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 component

Mark the form module with 'use client' and use the same React fetch pattern. That keeps loading and error UI colocated with the form.

Server POST

From a route.ts handler or Server Action, call fetch('https://saveform.io/api/submit/...') with method: 'POST' and your JSON body. Because the request originates on the server, browser CORS does not apply.

typescriptapp/actions.ts

'use server';

export async function submitContact(formData: FormData) {
  const payload = Object.fromEntries(formData.entries());

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

  if (!res.ok) throw new Error('Submit failed');
}

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 →