> ## Documentation Index
> Fetch the complete documentation index at: https://help.weavely.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add a Multi-Step Form to Framer with Weavely

> Add an AI-powered multi-step form to your Framer site using Weavely. Create pages, collect leads, and embed in seconds.

<span className="weavely-jsonld" hidden>
  {`{
    "@context": "https://schema.org",
    "@graph": [
    {
    "@type": "WebPage",
    "@id": "https://help.weavely.ai/guides/embeds/framer-multi-step",
    "url": "https://help.weavely.ai/guides/embeds/framer-multi-step",
    "name": "How to Add a Multi-Step Form to Framer with Weavely",
    "description": "Add an AI-powered multi-step form to your Framer site using Weavely. Create pages, collect leads, and embed in seconds.",
    "inLanguage": "en",
    "isPartOf": {
      "@type": "WebSite",
      "@id": "https://help.weavely.ai/#website",
      "name": "Weavely Help Center"
    },
    "breadcrumb": {
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "name": "Guides",
          "item": "https://help.weavely.ai/guides"
        },
        {
          "@type": "ListItem",
          "position": 2,
          "name": "Framer (Multi-step)",
          "item": "https://help.weavely.ai/guides/embeds/framer-multi-step"
        }
      ]
    },
    "publisher": {
      "@id": "https://www.weavely.ai/#org"
    }
    },

    {
    "@type": "TechArticle",
    "headline": "How to Add a Multi-Step Form to Framer with Weavely",
    "description": "Step-by-step guide on building an AI-powered multi-step form in Weavely and embedding it into your Framer site using the official plugin.",
    "inLanguage": "en",
    "author": {
      "@id": "https://www.weavely.ai/#org"
    },
    "publisher": {
      "@id": "https://www.weavely.ai/#org"
    },
    "mainEntityOfPage": {
      "@id": "https://help.weavely.ai/guides/embeds/framer-multi-step"
    }
    },

    {
    "@type": "VideoObject",
    "@id": "https://www.youtube.com/watch?v=sJWgZKbtU0s",
    "name": "How to Build Multi-Step Forms with AI in Framer (Weavely Plugin)",
    "description": "Tutorial on using Weavely’s AI form builder to create smart, multi-step forms and embed them into a Framer site using the official plugin.",
    "thumbnailUrl": [
      "https://i.ytimg.com/vi/sJWgZKbtU0s/hqdefault.jpg"
    ],
    "embedUrl": "https://www.youtube.com/embed/sJWgZKbtU0s",
    "contentUrl": "https://www.youtube.com/watch?v=sJWgZKbtU0s",
    "uploadDate": "2025-11-20T00:00:00Z",
    "duration": "PT3M3S",
    "publisher": {
      "@id": "https://www.weavely.ai/#org"
    },
    "potentialAction": {
      "@type": "WatchAction",
      "target": "https://www.youtube.com/watch?v=sJWgZKbtU0s"
    }
    },

    {
    "@type": "Organization",
    "@id": "https://www.weavely.ai/#org",
    "name": "WEAVE.LY BV",
    "url": "https://www.weavely.ai",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Herbert Hooverlaan 141",
      "addressLocality": "Schaarbeek",
      "postalCode": "1030",
      "addressCountry": "BE"
    },
    "identifier": "BE0773.878.569",
    "sameAs": [
      "https://www.instagram.com/weavely.ai/",
      "https://www.linkedin.com/company/weave-ly/",
      "https://www.youtube.com/@weavely"
    ]
    }
    ]
    }`}
</span>

Want to embed a multi-step form in your Framer website? With Weavely's AI form builder and the official Framer plugin, it's fast and effortless.

<iframe src="https://www.youtube.com/embed/sJWgZKbtU0s" title="YouTube video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

<Steps>
  <Step title="Step 1: Create a Weavely Form" icon="wand-magic-sparkles" titleSize="h2">
    To create a custom form, head over to [weavely.ai](https://www.weavely.ai) and click the “Start for Free” button.

    Inside the editor:

    * On the left, you’ll see a chat-style interface to generate forms with AI.
    * On the right, you’ll see the form being built in real-time.

          <img src="https://mintcdn.com/weavelyai/fsgkGGxH8cifa-Oc/images/Screenshot2025-11-20at11.52.41.png?fit=max&auto=format&n=fsgkGGxH8cifa-Oc&q=85&s=8ca4c6fe3bc044073cfd899a26c501da" alt="Screenshot showing how to generate forms and surveys using AI in weavely" width="3012" height="1476" data-path="images/Screenshot2025-11-20at11.52.41.png" />

    You can:

    * Describe your form in plain language (e.g., “I need a contact form for my web agency. Make it somewhat funny.”). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to tweak questions, reorder elements or add pages.
    * Ask the AI to change the design of the form.

    Of course you can also access all of this functionality outside of the AI editor by toggling "manual mode" in the top bar.
  </Step>

  <Step title="Step 2 (Optional): Ask AI to Create Multiple Steps" icon="robot" titleSize="h2">
    This step might be redundant, depending on how you prompted AI in the first step. In case your form is single page or in case you want to move some questions around you can continue chatting to our AI to have your form just right. For example:

    > Seperate this form into X distinct pages, make sure that relevant questions are grouped together on the same page.
  </Step>

  <Step title="Step 3: Publish your Form" icon="globe" titleSize="h2">
    Once you're satisfied with your form, go ahead and press the big blue *"Publish"* button at the top right of the screen. Don't forget to copy the form's URL, you'll need it in the next step 😉

    <img src="https://mintcdn.com/weavelyai/RyZX-BpL_viksIae/images/publish-ezgif.com-video-to-webp-converter.webp?fit=max&auto=format&n=RyZX-BpL_viksIae&q=85&s=213658173c64bfc00148a08e9d86c5eb" alt="Animated screenshot showing how to publish a form using Weavely AI" width="800" height="373" data-path="images/publish-ezgif.com-video-to-webp-converter.webp" />
  </Step>

  <Step title="Step 4: Embed in Framer" icon="plug" titleSize="h2">
    Open your Framer project and search for the **Weavely** plugin in the plugin menu.

    <img src="https://mintcdn.com/weavelyai/fsgkGGxH8cifa-Oc/images/Screenshot2025-11-20at11.25.22.webp?fit=max&auto=format&n=fsgkGGxH8cifa-Oc&q=85&s=6b087d524450004a7186328c0d5cf161" alt="Screenshot showing how to find the Weavely AI Forms plugin in Framer" width="3006" height="1464" data-path="images/Screenshot2025-11-20at11.25.22.webp" />

    Once opened, the plugin will ask for a **form URL**. This is where you paste the URL of any published Weavely form. When added, press "Add to Canvas" and the form will render directly on your Framer canvas ... ready to publish!

    <img src="https://mintcdn.com/weavelyai/fsgkGGxH8cifa-Oc/images/Screenshot2025-11-20at11.33.57.png?fit=max&auto=format&n=fsgkGGxH8cifa-Oc&q=85&s=b02b2edf24350034a5ef3adc1790d522" alt="Screenshot showing the Weavely AI Forms plugin in Framer" width="3002" height="1460" data-path="images/Screenshot2025-11-20at11.33.57.png" />
  </Step>
</Steps>