@getmagicform/react

React wrapper for MagicForm embeddable forms.

Installation

npm install @getmagicform/react

Usage

import { MagicForm } from "@getmagicform/react";

export default function Page() {
  return <MagicForm formId="YOUR_FORM_ID" />;
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | formId | string | Yes | Your form's embed code | | prefill | Record<string, any> | No | Pre-fill values keyed by field ID | | locale | string | No | Force a specific language (e.g. "es", "nl") | | onSubmit | (event) => void | No | Called after successful submission | | onError | (event) => void | No | Called on submission failure | | scriptUrl | string | No | Override the default CDN URL | | className | string | No | CSS class for the container div | | style | CSSProperties | No | Inline styles for the container div |

Pre-filling fields

<MagicForm
  formId="YOUR_FORM_ID"
  prefill={{
    id_abc123: "[email protected]",
    id_def456: "Acme Inc",
  }}
/>

Locale

By default, the form detects the visitor's language from the page's <html lang="..."> attribute. To force a specific language, use the locale prop. The language must be enabled on the form — otherwise it falls back to the default.

<MagicForm formId="YOUR_FORM_ID" locale="es" />

Callbacks

<MagicForm
  formId="YOUR_FORM_ID"
  onSubmit={({ formId, values, submissionId }) => {
    console.log("Submitted:", values);
  }}
  onError={({ formId, error }) => {
    console.error("Error:", error);
  }}
/>

Next.js

Works in Next.js App Router. The component includes 'use client' automatically.

// app/contact/page.tsx
import { MagicForm } from "@getmagicform/react";

export default function ContactPage() {
  return (
    <div className="max-w-lg mx-auto">
      <MagicForm formId="YOUR_FORM_ID" />
    </div>
  );
}

Notes

• className and style apply to the container div only
• Form styling is controlled via the MagicForm builder
• Multiple forms on a single page are supported
• React 18+ and React 19 compatible

License

MIT