> ## 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.

# AI-Generated Forms for Framer

> Want to add interactive, AI-powered forms directly into your Framer website? With the Weavely plugin, you can easily embed custom forms into Framer.

<span className="weavely-jsonld" hidden>
  {`{
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebPage",
        "@id": "https://help.weavely.ai/guides/embeds/framer",
        "url": "https://help.weavely.ai/guides/embeds/framer",
        "name": "AI-Generated Forms for Framer",
        "description": "Want to add interactive, AI-powered forms directly into your Framer website? With the Weavely plugin, you can easily embed custom forms into Framer.",
        "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": "Embeds",
              "item": "https://help.weavely.ai/guides/embeds"
            },
            {
              "@type": "ListItem",
              "position": 3,
              "name": "Framer",
              "item": "https://help.weavely.ai/guides/embeds/framer"
            }
          ]
        },
        "publisher": {
          "@id": "https://www.weavely.ai/#org"
        }
      },

      {
        "@type": "TechArticle",
        "headline": "AI-Generated Forms for Framer",
        "description": "Learn how to embed AI-powered Weavely forms into your Framer website using the official plugin. Generate forms with AI and publish them instantly.",
        "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"
        }
      },

      {
        "@type": "VideoObject",
        "@id": "https://www.youtube.com/watch?v=F4H1Jdj0_ls",
        "name": "How to use AI to Generate Custom Forms in Framer",
        "description": "Learn how to use the official Weavely plugin for Framer to embed AI-generated forms and customize them instantly.",
        "thumbnailUrl": [
          "https://i.ytimg.com/vi/F4H1Jdj0_ls/hqdefault.jpg"
        ],
        "embedUrl": "https://www.youtube.com/embed/F4H1Jdj0_ls",
        "contentUrl": "https://www.youtube.com/watch?v=F4H1Jdj0_ls",
        "uploadDate": "2025-11-20T00:00:00Z",
        "duration": "PT3M47S",
        "publisher": {
          "@id": "https://www.weavely.ai/#org"
        },
        "potentialAction": {
          "@type": "WatchAction",
          "target": "https://www.youtube.com/watch?v=F4H1Jdj0_ls"
        }
      },

      {
        "@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>

This guide will walk you through using the **Weavely.ai** plugin to add forms to your Framer site, generate new forms using AI, and adjust everything to match your site’s style.

<iframe src="https://www.youtube.com/embed/F4H1Jdj0_ls" 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: The Weavely Plugin 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, 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" />

    Alternatively, you can also embed an example form if you first want to see how it works. Don't worry, you can definitely design better-looking forms than this one 😉

    <img src="https://mintcdn.com/weavelyai/8igdOExDt1xDET4M/images/Nov-20-202511-38-20-ezgif.com-video-to-webp-converter.webp?fit=max&auto=format&n=8igdOExDt1xDET4M&q=85&s=0be87105ec45453eb0aa7d8d038a2d15" alt="Animated screenshot showing the embedding of an example Weavely AI form in Framer" width="1280" height="597" data-path="images/Nov-20-202511-38-20-ezgif.com-video-to-webp-converter.webp" />
  </Step>

  <Step title="Step 2: Create your 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 add conditional logic rules (e.g. show/hide questions or 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 3: Embed the Form in Framer" icon="upload" titleSize="h2">
    Return to Framer and paste the published form’s URL into the Weavely plugin. The form will appear on the canvas as a component.

    Simply drag-and-drop the component into your design and publish your Framer site. The form is now live and ready to accept responses!
  </Step>
</Steps>

## 📈 What Happens After Visitors Submit?

Once embedded, Weavely handles all form logic and data collection. You can:

* View **responses and analytics** directly inside Weavely.
* **Integrate** with tools like Google Sheets, Notion, Salesforce, HubSpot or get email notifications.
* Apply **conditional logic**, customize design, or edit questions anytime.

Check out our [Help Center](https://help.weavely.ai/) section for an overview of our features and how to use them.