Works where you already build

Put a Canadian form on any site

MapleForms drops into 30 platforms, from AI builders like Lovable and Bolt.new to Webflow, Wix, Squarespace and WordPress. One line of code, or a frame where code is not allowed. The form renders inside your own design, so visitors never leave your site and your page keeps the SEO credit.

Build a form free Jump to the guides
How it attaches

Two ways in, and one recipe for React

Pick by what your platform allows. Most allow the first.

1. Script embed Recommended

Renders into your page's own HTML, so your site keeps the SEO and accessibility benefit. Resizes itself.

<script src="https://mapleworksuite.com/api/forms/v1/embed.js"
        data-form-id="123"
        data-mode="inline"
        data-theme="inherit"></script>

2. Frame embed Fallback

For platforms that forbid scripts, such as Notion and Google Sites. Immune to hostile page CSS.

<iframe src="https://mapleworksuite.com/api/forms/v1/frame.php?form_id=123"
        style="width:100%;height:900px;border:0;"
        title="Form" loading="lazy"></iframe>
A hand-written frame cannot measure itself, so set a height or the form gets clipped. The script embed with data-mode="iframe" gives you isolation and automatic sizing together.

3. The React recipe For AI builders

Lovable, Bolt.new, v0 and anything else that generates React all share one trap: a <script> tag written into JSX never executes, so you get a blank space and no error. Paste this component instead. On the Next.js App Router, add "use client" as the first line. 

import { useEffect, useRef } from "react";

export default function MapleForm({ formId = 123 }) {
  const box = useRef(null);
  useEffect(() => {
    const SRC = "https://mapleworksuite.com/api/forms/v1/embed.js";
    const mount = () => window.MapleForms?.render({ formId, target: box.current });
    let s = document.querySelector(`script[src="${SRC}"]`);
    if (window.MapleForms) { mount(); return; }
    if (!s) { s = document.createElement("script"); s.src = SRC; s.async = true; document.body.appendChild(s); }
    s.addEventListener("load", mount);
    return () => s.removeEventListener("load", mount);
  }, [formId]);
  return <div ref={box} />;
}
Step by step

Guides for every platform

Grouped by what kind of tool you build with.

AI app builders (6) AI and drag-drop website builders (9) CMS and no-code platforms (11) Frameworks and hand-built sites (5)

AI app builders

Lovable Script embed

About 3 minutes · easy · Any plan. You own the generated code.

  1. In MapleForms open your form, go to Embed, and copy the form ID from the snippet.
  2. In Lovable, open the chat and ask it to create a component named MapleForm.jsx.
  3. Paste the React recipe above as the file contents. Lovable will accept it verbatim.
  4. Ask Lovable to render <MapleForm /> on the page you want, for example the contact section.
  5. Press Preview. The form renders inside your layout, not in a box.
  6. Publish. Submissions appear under Forms then Submissions in MapleWorkSuite.
Watch out. Do not paste the plain script tag into a Lovable page. React strips script tags from JSX and it will silently render nothing. Use the component.

Bolt.new (StackBlitz) Script embed

About 3 minutes · easy · Free tier is enough to test.

  1. Copy your form ID from the MapleForms Embed page.
  2. In Bolt, ask it to add a component file MapleForm.jsx and paste the React recipe.
  3. Ask Bolt to import and place <MapleForm /> where you want the form.
  4. The WebContainer preview loads our embed.js over HTTPS, so it works in preview.
  5. Deploy to Netlify or your own host from Bolt.
Watch out. Bolt sometimes rewrites imports on regeneration. If the form vanishes after a follow-up prompt, check the component is still imported.

v0 by Vercel Script embed

About 5 minutes · moderate · Any plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. In v0, add a new component and paste the React recipe.
  3. If the project is Next.js App Router, add "use client" as the very first line of the file.
  4. Place the component in your page and deploy to Vercel.
Watch out. Next.js Server Components cannot use useEffect. Without "use client" the build fails. This is the number one v0 failure.

Replit Agent Script or frame

About 3 minutes · easy · Any plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. For a plain HTML project, paste the script snippet where the form belongs.
  3. For a React project, use the React recipe instead.
  4. Run the repl. The form renders in the webview.

Base44 Script or frame

About 5 minutes · moderate · Any plan with custom code.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add a custom code or HTML block to the page.
  3. Paste the script snippet. If the block is React based, use the React recipe.
  4. Preview, then publish.
Watch out. If the builder wraps your block in its own iframe, switch data-mode to iframe so our sizing logic takes over.

Cursor / Windsurf Script or frame

About 2 minutes · easy · Editor, not a host. Works with any stack.

  1. Copy your form ID from the MapleForms Embed page.
  2. Tell the assistant to embed the MapleForms script in the target template or component.
  3. Use the React recipe for JSX files and the plain script tag for HTML templates.

AI and drag-drop website builders

Wix (incl. AI Site Builder) Frame embed

About 4 minutes · easy · Custom code needs a paid Wix plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. In the Wix editor choose Add, then Embed, then Embed HTML.
  3. Pick Code and paste the iframe snippet, not the script snippet.
  4. Drag the widget to the height the form needs. Wix will not autosize it.
  5. Publish.
Watch out. The Wix HTML widget is itself an iframe, so a script embed would nest an iframe inside an iframe and lose autosizing entirely. Go straight to the iframe snippet and set the height by hand.

Squarespace (incl. Blueprint AI) Script or frame

About 4 minutes · easy · Code blocks require the Business plan or higher.

  1. Copy your form ID from the MapleForms Embed page.
  2. Edit the page, add a block, and choose Code.
  3. Set the block type to HTML and paste the script snippet.
  4. Save. Code blocks do not execute in the editor preview, so use Preview or the live site to check it.
Watch out. On Personal plans the Code block is unavailable. There is no workaround inside Squarespace short of upgrading.

Framer Script or frame

About 4 minutes · easy · Embed available on free; custom code needs a paid site plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. Insert an Embed element and choose HTML.
  3. Paste the script snippet and set the element to a fixed height, or use Site Settings then Custom Code for a site-wide script.
  4. Publish.
Watch out. Framer embeds do not resize to their content. Give the element a generous height or use data-mode="iframe".

Webflow Script or frame

About 4 minutes · easy · Embed element requires a paid site plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. Drag an Embed element onto the page.
  3. Paste the script snippet and save.
  4. Embeds do not run in the Designer canvas. Use Preview or publish to staging to verify.

Durable Frame embed

About 5 minutes · moderate · Custom HTML on paid plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add a custom HTML or embed section to the page.
  3. Paste the iframe snippet with an explicit height.
  4. Publish.
Watch out. Durable restricts scripts on some plans. Lead with the iframe snippet.

Hostinger Horizons / AI Builder Script or frame

About 4 minutes · easy · Any paid hosting plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add an Embed or Custom HTML block where the form belongs.
  3. Paste the script snippet.
  4. Publish.

GoDaddy Airo / Website Builder Frame embed

About 5 minutes · moderate · HTML section on paid plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add an HTML section to the page.
  3. Paste the iframe snippet with an explicit height.
  4. Publish.
Watch out. GoDaddy sanitises some inline scripts. The iframe is the reliable route.

10Web AI Builder (WordPress) Script embed

About 3 minutes · easy · Any plan. It is WordPress underneath.

  1. Copy your form ID from the MapleForms Embed page.
  2. Edit the page and add a Custom HTML block, or an Elementor HTML widget.
  3. Paste the script snippet.
  4. Update the page.

Dorik AI Script or frame

About 4 minutes · easy · Embed on free; custom code on paid.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add an Embed or Custom Code element.
  3. Paste the script snippet.
  4. Publish.

CMS and no-code platforms

WordPress (self-hosted) Script embed

About 2 minutes · easy · Any install. Editor or Administrator role.

  1. Copy your form ID from the MapleForms Embed page.
  2. Edit the page and add a Custom HTML block.
  3. Paste the script snippet.
  4. Update. View the live page, since the block editor will not run the script.
Watch out. On WordPress.com only Business plans and above permit arbitrary scripts. Use the iframe snippet on lower tiers.

Shopify Script embed

About 6 minutes · moderate · Any plan. Theme edit access needed.

  1. Copy your form ID from the MapleForms Embed page.
  2. In the theme editor add a Custom Liquid section to the page.
  3. Paste the script snippet into the Custom Liquid block.
  4. Save and preview.
Watch out. Do not put this in checkout. Shopify blocks third-party scripts on checkout pages outside Plus.

Ghost Script embed

About 3 minutes · easy · Any plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. In the editor press plus and choose HTML.
  3. Paste the script snippet.
  4. Publish or update the post.

Carrd Script or frame

About 3 minutes · easy · Embed element requires Carrd Pro.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add an Embed element and set type to Code.
  3. Paste the script snippet and set the embed to Contained.
  4. Publish.
Watch out. Free Carrd has no embed element. Pro is required.

Notion Frame embed

About 2 minutes · easy · Any plan, including free.

  1. Copy your form ID from the MapleForms Embed page.
  2. Build the frame URL: https://mapleworksuite.com/api/forms/v1/frame.php?form_id=YOUR_ID
  3. In Notion type /embed, paste that URL, and choose Embed link.
  4. Drag the bottom edge to give the form enough height.
Watch out. Notion runs no third-party JavaScript at all, so only the frame URL works. It also will not autosize, so set the height manually.

Google Sites Frame embed

About 3 minutes · easy · Any Google account.

  1. Copy your form ID from the MapleForms Embed page.
  2. Choose Insert, then Embed, then By URL.
  3. Paste https://mapleworksuite.com/api/forms/v1/frame.php?form_id=YOUR_ID
  4. Resize the placed element to fit the form.
Watch out. Google Sites strips scripts. Embed by URL is the only path, and the element does not autosize.

Softr Script or frame

About 4 minutes · easy · Custom code block on paid plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add a Custom Code block to the page.
  3. Paste the script snippet.
  4. Publish.

Bubble Script or frame

About 5 minutes · moderate · HTML element available on all plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. Drop an HTML element onto the page.
  3. Paste the script snippet.
  4. Tick the option to allow the element to grow, or set a fixed height.
  5. Preview, then deploy to live.
Watch out. Bubble HTML elements default to a fixed height and will clip the form.

Super.so Script embed

About 5 minutes · moderate · Code injection on paid plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. In Super, open Settings then Code and add the script to the head or body.
  3. Add a target div in your Notion page and set data-target to it.
  4. Publish.
Watch out. Because Super renders a Notion page, a plain script has no obvious mount point. Use data-target with a selector you control.

Typedream Script or frame

About 3 minutes · easy · Embed on paid plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add an Embed or Code block.
  3. Paste the script snippet.
  4. Publish.

Weebly / Jimdo Frame embed

About 4 minutes · easy · Embed code element on paid plans.

  1. Copy your form ID from the MapleForms Embed page.
  2. Drag an Embed Code or Custom HTML element onto the page.
  3. Paste the iframe snippet with an explicit height.
  4. Publish.

Frameworks and hand-built sites

Plain HTML site Script or frame

About 1 minutes · easy · No platform, no plan.

  1. Copy your form ID from the MapleForms Embed page.
  2. Paste the script snippet at the exact spot in the page where the form should appear.
  3. Upload the file. There is nothing else to configure.

React / Next.js Script embed

About 5 minutes · moderate · Any host.

  1. Copy your form ID from the MapleForms Embed page.
  2. Create the MapleForm component from the React recipe above.
  3. For the Next.js App Router, add "use client" as the first line.
  4. Import and place the component. For Next.js you may use next/script with strategy afterInteractive instead.
Watch out. Strict Mode double-invokes effects in development. Our recipe guards against a duplicate script tag, so do not remove that check.

Vue / Nuxt Script embed

About 5 minutes · moderate · Any host.

  1. Copy your form ID from the MapleForms Embed page.
  2. Add a template div with a ref, for example formBox.
  3. In onMounted, inject the embed.js script, then call window.MapleForms.render with formId and that element as target.
  4. For Nuxt, ensure the code runs client side only.
Watch out. Server-side rendering has no document. Guard the injection so it only runs in the browser.

Astro / SvelteKit / Eleventy Script or frame

About 3 minutes · easy · Any host.

  1. Copy your form ID from the MapleForms Embed page.
  2. These render real HTML, so the plain script snippet works as written.
  3. In Astro, place it directly in the .astro template. Add is:inline if your bundler tries to process it.

Email and newsletters Link only

About 1 minutes · easy · Not embeddable. Link instead.

  1. Email clients strip both scripts and iframes, so a form cannot be embedded in an email.
  2. Link to the hosted form URL instead. Every MapleForms form has its own public page.
  3. Use the view endpoint URL from the Embed page as the link target.
Watch out. Anyone promising an embedded form inside an email is describing something no mail client supports. Always send a link.

Platform not listed?

If it lets you paste HTML anywhere, the script embed works. If it only accepts a URL, the frame embed works. Those two cover essentially every website tool, so the list above is the guides we have written, not the limit of what is possible.

Ask us about your platform
Questions

Compatibility FAQ

Yes. MapleForms publishes a single-script embed and a frame embed, and 30 platforms are documented, including Lovable, Bolt.new, v0, Framer, Webflow, Wix, Squarespace and WordPress. The form renders inside your own layout rather than sending people to a third-party page.

React removes script tags written into JSX, so nothing runs and nothing appears. Use the small React component shown on the compatibility page, which injects the script and then calls the render function against a div you control. On the Next.js App Router that component also needs "use client" as its first line.

Notion and Google Sites run no third-party JavaScript, and the Wix HTML widget is itself a frame. On those, point a frame at the form URL and set a height by hand, because a hand-written frame does not size itself.

Building, publishing and embedding forms is free, with no tiers and no monthly fees. Only the optional AI tools consume Maple AI Tokens. Some website platforms charge for their own custom-code feature, which is their fee rather than ours.

No. Email clients strip scripts and frames, so no form can be embedded in an email on any platform. Link to the hosted form page instead.