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

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

<span className="weavely-jsonld" hidden>
  {`{
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebPage",
        "@id": "https://help.weavely.ai/guides/embeds/webflow",
        "url": "https://help.weavely.ai/guides/embeds/webflow",
        "name": "AI-Generated Forms for Webflow",
        "description": "Want to add interactive, AI-powered forms directly into your Webflow website? With the Weavely plugin, you can easily embed custom forms into Webflow.",
        "inLanguage": "en",
        "isPartOf": {
          "@id": "https://help.weavely.ai/#website"
        },
        "publisher": {
          "@id": "https://www.weavely.ai/#org"
        }
      },
      {
        "@type": "TechArticle",
        "@id": "https://help.weavely.ai/guides/embeds/webflow#article",
        "headline": "AI-Generated Forms for Webflow",
        "description": "Want to add interactive, AI-powered forms directly into your Webflow website? With the Weavely plugin, you can easily embed custom forms into Webflow.",
        "inLanguage": "en",
        "author": {
          "@id": "https://www.weavely.ai/#org"
        },
        "publisher": {
          "@id": "https://www.weavely.ai/#org"
        },
        "mainEntityOfPage": {
          "@id": "https://help.weavely.ai/guides/embeds/webflow"
        }
      },
      {
        "@type": "VideoObject",
        "@id": "https://help.weavely.ai/guides/embeds/webflow#video",
        "name": "AI-Generated Forms for Webflow",
        "description": "Want to add smart, dynamic forms to your Webflow site? In this tutorial, I’ll show you how to use the official Weavely plugin for Webflow to embed powerful, AI-generated forms.\\n\\nWith just a few clicks, you’ll have fully responsive, customizable forms running directly inside your Webflow project.",
        "url": "https://youtu.be/l8qsB5coVeo",
        "contentUrl": "https://youtu.be/l8qsB5coVeo",
        "embedUrl": "https://www.youtube.com/embed/l8qsB5coVeo",
        "duration": "PT4M22S",
        "uploadDate": "2025-12-18T00:00:00Z",
        "thumbnailUrl": [
          "https://i.ytimg.com/vi/l8qsB5coVeo/hqdefault.jpg"
        ],
        "publisher": {
          "@id": "https://www.weavely.ai/#org"
        },
        "potentialAction": {
          "@type": "WatchAction",
          "target": "https://youtu.be/l8qsB5coVeo"
        }
      },
      {
        "@type": "WebSite",
        "@id": "https://help.weavely.ai/#website",
        "name": "Weavely Help Center",
        "url": "https://help.weavely.ai",
        "inLanguage": "en",
        "publisher": {
          "@id": "https://www.weavely.ai/#org"
        }
      },
      {
        "@type": "Organization",
        "@id": "https://www.weavely.ai/#org",
        "name": "Weavely",
        "url": "https://www.weavely.ai"
      }
    ]
    }`}
</span>

This guide will walk you through using Weavely's [Webflow App](https://webflow.com/apps/detail/weavely-ai-forms) to add forms to your Webflow site, generate new forms using AI, and adjust everything to match your site’s style.

<iframe src="https://www.youtube.com/embed/l8qsB5coVeo" 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 App in Webflow" icon="plug" titleSize="h2">
    Open your Webflow project and launch the **Weavely** app from the designer.

    <img src="https://mintcdn.com/weavelyai/rY-MHGIuQgzIDgFi/images/Screenshot2025-12-18at11.43.44.webp?fit=max&auto=format&n=rY-MHGIuQgzIDgFi&q=85&s=45144a8ed831035ae20bed38943fd075" alt="Screenshot showing how to find the Weavely AI Forms app in Webflow" width="3006" height="1544" data-path="images/Screenshot2025-12-18at11.43.44.webp" />

    Select a **div or container** where you want to embed the form. The app will ask for a form URL, which you'll get from Weavely after creating your form.

    <img src="https://mintcdn.com/weavelyai/rY-MHGIuQgzIDgFi/images/Screenshot2025-12-18at11.46.24.webp?fit=max&auto=format&n=rY-MHGIuQgzIDgFi&q=85&s=5cc5648334a9025e188d6bad3643bd70" alt="Screenshot showing the Weavely AI Forms app before injecting a form in Webflow" width="3006" height="1544" data-path="images/Screenshot2025-12-18at11.46.24.webp" />

    Alternatively, you can embed an **example form** first to see how it works. Simply click the example form button, and a sample form will be inserted into your selected container. Don't worry, you can definitely design better-looking forms than this one 😉

    <Note>
      The form appears as a placeholder in the Webflow designer. The actual form will only render on your published website.
    </Note>
  </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/rY-MHGIuQgzIDgFi/images/Screenshot2025-12-18at11.49.48.webp?fit=max&auto=format&n=rY-MHGIuQgzIDgFi&q=85&s=6ff034b147aae816be1c8496867dc5bd" alt="Screenshot showing the Weavely AI Form editor" width="3008" height="1546" data-path="images/Screenshot2025-12-18at11.49.48.webp" />

    You can:

    * Describe your form in plain language (e.g., "I need a contact form for my website. Keep it very basic, three questions."). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to make it multi-step (e.g., "Actually, I want this to be multi-step. Make sure we have different questions on different pages.")
    * Ask the AI to adjust the design (e.g., "I want the background to be transparent and I want the top visual to be gone.")
    * Ask the AI to add conditional logic rules (e.g., "I only want to show the message field if somebody provided an email address.")

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

    Once you're happy with your form, click **Publish** and copy the form URL.

    <img src="https://mintcdn.com/weavelyai/rY-MHGIuQgzIDgFi/images/Screenshot2025-12-18at11.51.19.png?fit=max&auto=format&n=rY-MHGIuQgzIDgFi&q=85&s=4815acc99ca52c7a5fd3374573e85613" alt="Screenshot showing the screen after you publish a form in Weavely AI" width="3023" height="1550" data-path="images/Screenshot2025-12-18at11.51.19.png" />
  </Step>

  <Step title="Step 3: Embed the Form in Webflow" icon="upload" titleSize="h2">
    Return to Webflow and paste the published form's URL into the Weavely app.

    Click **"Add to Design"** and the form will be embedded in your selected container.

    <Note>
      The form appears as a placeholder in the Webflow designer. The actual form will only render on your published website.
    </Note>

    <img src="https://mintcdn.com/weavelyai/LPqn9Ijk9qoW6RoW/images/Screenshot2025-12-18at13.28.11.webp?fit=max&auto=format&n=LPqn9Ijk9qoW6RoW&q=85&s=31f122653bd7969c70bb735d69e37a8c" alt="Screenshot of a Weavely AI form embedded in the designer of Webflow" width="3014" height="1536" data-path="images/Screenshot2025-12-18at13.28.11.webp" />

    Publish your Webflow site. The form is now live and ready to accept responses!

    <img src="https://mintcdn.com/weavelyai/LPqn9Ijk9qoW6RoW/images/weavely-in-webflow.webp?fit=max&auto=format&n=LPqn9Ijk9qoW6RoW&q=85&s=22cab2f42c00d4ab0e7eb98014fe7942" alt="Screenshot showing a Weavely AI form embedded in a Webflow website" width="3024" height="1634" data-path="images/weavely-in-webflow.webp" />

    <Tip>
      Need to update your form? Simply edit it in Weavely, click Publish, and refresh your Webflow website. The changes appear automatically—no need to update URLs or republish your Webflow site!
    </Tip>
  </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.