Skip to main content
This guide will walk you through using Weavely’s Webflow App to add forms to your Webflow site, generate new forms using AI, and adjust everything to match your site’s style.

Step 1: The Weavely App in Webflow

Open your Webflow project and launch the Weavely app from the designer.Screenshot showing how to find the Weavely AI Forms app in WebflowSelect 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.Screenshot showing the Weavely AI Forms app before injecting a form in WebflowAlternatively, 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 😉
The form appears as a placeholder in the Webflow designer. The actual form will only render on your published website.

Step 2: Create your Weavely Form

To create a custom form, head over to 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. Screenshot showing the Weavely AI Form editor
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.Screenshot showing the screen after you publish a form in Weavely AI

Step 3: Embed the Form in Webflow

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.
The form appears as a placeholder in the Webflow designer. The actual form will only render on your published website.
Screenshot of a Weavely AI form embedded in the designer of WebflowPublish your Webflow site. The form is now live and ready to accept responses!Screenshot showing a Weavely AI form embedded in a Webflow website
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!

​
📈 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.