Collecting forms from React Native apps

Your marketing site has a contact embed. Your iOS app still uses a WebView to Google Forms—or worse, email mailto: links. Collecting forms from React Native properly means native inputs, one JSON POST, and the same inbox support searches when a user says they “sent feedback from the app.”

This pillar guide covers schema alignment, fetch examples, ingest secrets, validation errors, and when to proxy through your API so secrets never ship in the app binary.

Architecture: one form id, two channels

Website:  embed.js --POST--> MuxForms inbox
App:      fetch JSON ----POST--> same form id --> same inbox

Create fields in the MuxForms dashboard (email, message, optional platform). The website embed renders them automatically; the app must send matching keys.

Deep dive: Expo + website tutorial.
Docs: React Native and submit API.

Minimal Expo / React Native example

const FORM_ID = process.env.EXPO_PUBLIC_MUXFORMS_FORM_ID!;
const SUBMIT_URL = `https://www.muxforms.com/api/v1/forms/${FORM_ID}/submit`;

async function submitFeedback(email: string, message: string) {
  const res = await fetch(SUBMIT_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${process.env.MUXFORMS_INGEST_SECRET}`,
      "X-MuxForms-Ingest-Secret": process.env.MUXFORMS_INGEST_SECRET!,
    },
    body: JSON.stringify({
      email,
      message,
      platform: "ios",
      _hp: "",
    }),
  });
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.error ?? `HTTP ${res.status}`);
}

Production apps should not embed MUXFORMS_INGEST_SECRET in client env vars if the binary is public—use a backend proxy (below).

Ingest secret and security

Browser embeds use CORS + submit tokens. Mobile uses per-form ingest secret headers:

• Authorization: Bearer ingsec_…
• X-MuxForms-Ingest-Secret: ingsec_…

Generate in dashboard → form security. Rotate if leaked.

Recommended: Next.js or Cloudflare Worker route:

// POST /api/feedback from app --> server adds secret --> MuxForms

Pattern also used in Next.js contact tutorial.

Handling errors in UI

Map validation messages to inputs when the API returns field-level detail.

CORS on Expo Web only

Native iOS/Android: no CORS. Expo Web and React Native Web: allowlist http://localhost:8081 or your web preview origin on the form—see CORS guide.

Spam without CAPTCHA in apps

Honeypot _hp still applies if bots hit your API directly. Rate limits protect the endpoint. Turnstile is browser-first; mobile relies on secret auth and optional server attestation (out of scope for basic contact forms).

More: spam guide.

Why not WebView Typeform?

• Breaks offline and deep links
• Different inbox from marketing embed
• Survey UX when you only needed three fields

Compare positioning: MuxForms vs Typeform.

Testing checklist

1. Submit from simulator with valid email.
2. Confirm row in MuxForms inbox with platform field.
3. Submit from production website embed—same form id.
4. Search inbox by email across channels.
5. Test airplane mode / 422 empty message.
6. Store secrets in EAS Secret, not git.

When a form backend is required

If you are deciding whether you need hosted ingest at all, read What is a form backend?. If you only need email from HTML, read HTML form to email without backend.

Compare vendors on mobile JSON

Not every “Formspree alternative” documents native POST well—use the compare hub tables (mobile JSON row) and Formspree-style roundup.