Guides/How to embed a form with iframe

How to embed a form with iframe

One iframe tag. Any website.

Updated March 2026

Every Sutrena form gets a hosted URL. Want it on your site? Drop in an iframe. Works with static HTML, WordPress, Squarespace, Notion -- anything that supports iframes. The form handles validation, submission, and success messages inside the iframe. You do not touch any of that.

1. Create a form and get the hosted URL

Create a form via API or from a template. The response includes a hostedUrl pointing to the public form page.

curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_abc123" \
  -H "Content-Type: application/json" \
  -d '{"templateId": "contact"}'

# Response includes:
# { "id": "frm_xyz789", "hostedUrl": "https://sutrena.com/f/frm_xyz789" }

2. Add the iframe to your page

Use the hosted URL with ?embed=1 for a clean layout (no Sutrena header/footer). Set origin to your domain for secure postMessage communication.

<iframe
  src="https://sutrena.com/f/frm_xyz789?embed=1&origin=https://yoursite.com"
  width="100%"
  height="500"
  frameborder="0"
  style="border: none; max-width: 600px;"
  title="Contact Form"
></iframe>

3. Handle postMessage events

The embedded form sends postMessage when a submission completes. Listen for it to show a thank-you, redirect, or track conversions.

<script>
window.addEventListener("message", (event) => {
  // Verify the origin
  if (event.origin !== "https://sutrena.com") return;

  const { type, formId, submissionId } = event.data;

  if (type === "sutrena:submitted") {
    console.log("Form submitted:", formId, submissionId);
    // Track conversion, redirect, show thank-you, etc.
    document.getElementById("form-container").innerHTML =
      "<p>Thanks for your message!</p>";
  }
});
</script>

<div id="form-container">
  <iframe
    src="https://sutrena.com/f/frm_xyz789?embed=1&origin=https://yoursite.com"
    width="100%" height="500" frameborder="0"
    title="Contact Form"
  ></iframe>
</div>

FAQ

What does ?embed=1 do?

Strips the Sutrena header and footer. Just the form, clean and ready to sit inside your page.

Why do I need the origin parameter?

It tells the form which parent domain should receive postMessage events. Without it, other sites could iframe your form and intercept submission events.

Can I resize the iframe dynamically?

The form sends a sutrena:resize postMessage with the content height. Listen for it and update the iframe height. No more scrollbars.

Does this work on WordPress?

Yes. Add the iframe HTML in a Custom HTML block. The embed.js snippet is even simpler if your theme supports custom scripts.

Is the iframe responsive?

Set width to 100% and it fills the container. The form layout adapts to mobile.

Related

Embed in React →Contact form in Next.js →Embed in WordPress →Embed in Webflow →

What is Sutrena?

Sutrena is the web runtime for AI agents. Three primitives — pages, forms, and dashboards — accessible through one API. Your agent creates web artifacts, humans interact with them, and your agent gets the data back. Framework-agnostic. Works from any MCP client or HTTP client.

Get started in two API calls

1. Get a trial key (no auth, no signup)

curl -X POST https://sutrena.com/api/trial

2. Create a form + dashboard from a template

curl -X POST https://sutrena.com/api/forms \
  -H "Authorization: Bearer st_trial_xxx" \
  -H "Content-Type: application/json" \
  -d '{"templateId": "waitlist", "createDashboard": true}'
/llms.txt/api/schema/llms-full.txt/.well-known/mcp.json

Ready to build?

Get a trial API key instantly with no signup, or create an account for the full experience.

Start buildingAgent docs
How to embed a form with iframe — Sutrena | Sutrena