AI Forms Embed Guide

SmartForm AI Forms can be embedded on any website. Choose the method that fits your platform.

JavaScript Snippet (Recommended)

The JS snippet works on any website — WordPress, Squarespace, static HTML, React, or any JS framework. Just paste the code where you want the form to appear.

<script src="https://smartform.dev/embed.js" data-form-id="YOUR_FORM_ID"></script>

The script automatically:

• Creates a container <div> at the script position
• Injects an iframe with the form
• Listens for resize events to keep the iframe height correct
• Handles post-submit actions (redirect or show message)

Post-Submit Behavior

Configure what happens after the user submits the form when creating the form:

• Message (default) — Shows a thank-you message inside the embed
• Redirect — Redirects the user to a URL after submission

Set postSubmitType and postSubmitValue when creating the form via API or MCP.

Multiple Forms Per Page

Include the script tag once per form, each with a different data-form-id:

<script src="https://smartform.dev/embed.js" data-form-id="form-1"></script>
<script src="https://smartform.dev/embed.js" data-form-id="form-2"></script>

Iframe Embed

For simple iframe embedding:

<iframe src="https://smartform.dev/embed/YOUR_FORM_ID" width="100%" frameborder="0"></iframe>

The iframe auto-resizes to fit the form content.

Hosted Page

Each form gets a dedicated URL:

https://smartform.dev/f/YOUR_FORM_ID

Share this link directly or redirect users to it.

Embed API Response

When you create a form via the API, the response includes ready-to-use embed codes:

{
  "form_id": "abc-123",
  "hosted_url": "https://smartform.dev/f/abc-123",
  "embed_code": "<script src=\"https://smartform.dev/embed.js\" data-form-id=\"abc-123\"></script>",
  "iframe_code": "<iframe src=\"https://smartform.dev/embed/abc-123\" width=\"100%\" frameborder=\"0\"></iframe>"
}

Data Flow

When a user submits a form embedded on your site:

1. Form data is POSTed to https://smartform.dev/api/v2/forms/{formId}/submit
2. SmartForm validates the data against the A2UI schema
3. Submission is stored and returns submission_id + post-submit config
4. If configured, a webhook is dispatched to your callbackUrl
5. The embed page tells the parent window the submission succeeded
6. The JS snippet handles the post-submit action: redirect or show message

To retrieve submissions later, use the API or MCP get_submissions tool.

Webhook Delivery

If you set a callbackUrl when creating the form, SmartForm delivers submissions via HTTP POST with:

• HMAC-SHA256 signature in X-SmartForm-Signature header (if webhookSecret is set)
• 3 retry attempts with exponential backoff: 30s, 2min, 10min
• Payload includes the full submission data and metadata

Webhook Payload

{
  "id": "submission-uuid",
  "formId": "form-uuid",
  "responseData": { "name": "Alice", "email": "alice@example.com" },
  "metadata": { "ipAddress": "...", "userAgent": "..." },
  "submittedAt": "2025-01-01T12:00:00.000Z"
}