Skip to main content
Weavely makes it easy to build beautiful, logic-rich forms using AI—and just as easy to embed them into your Google Sites page. In this tutorial, we’ll walk through how to create a lead generation form and integrate it into a Google Site, with tips to make sure it looks great on both desktop and mobile.

Build Your AI Form in Weavely

To start, head to Weavely.ai and generate your form using a natural-language prompt like:
“I need a lead generation form for my agency website. It should qualify potential projects.”
Weavely will create a form with relevant questions automatically: project name, service interest, budget, timing, and more.You can:
  • Edit any question manually
  • Add more fields or pages
  • Customize the design (fonts, colors, borders, button style)
  • Use Weavely’s AI styling based on your brand or website design
All core features are free, including unlimited responses. The only paid feature is removing the “Powered by Weavely” badge.

Publish and Copy the Share URL

Once your form looks the way you want:
  1. Click Publish.
  2. Go to the Share tab.
  3. Copy the standalone form URL (not embed code, just the plain URL).
You can test it in a new tab to confirm it loads the full form page. But trust us, it does 😉

Embed the Form in Google Sites

  1. Open your Google Sites page and navigate to the section where you want to insert the form.
  2. Scroll to the bottom and click the Embed option from the sidebar.
  3. Paste your Weavely form’s URL into the “By URL” tab.
  4. Choose the “Whole page” display option.
  5. Click Insert. Screenshot2025 10 06at16 51 48 Pn
You’ll now see the live form appear inside your Google Site.

​
Optimizing Layout for Desktop & Mobile

Google Sites preserves the aspect ratio of your embedded form, which can cause layout issues. Especially on mobile!

​
Common Issues:

  • Scrollbars on desktop if the form is too tall.
  • Tiny, squished forms on mobile if the aspect ratio isn’t mobile-optimized.

​
Workaround:

  • Resize the embed container manually by dragging the edges.
  • For mobile: Make the embed container narrower and taller.
  • For desktop: Fill horizontal space by placing an image next to the form.
For example, this is how we tackled the issue in our example video: Screenshot2025 10 06at16 56 06 Pn It’s a balancing act, but with a bit of tweaking, you can get a good result on both devices.

​
Summary

You now have a beautifully styled, fully functional form built with Weavely’s AI, embedded directly in your Google Site with no coding required. While Google Sites has a few layout quirks, with the right tweaks your form will look great and capture leads effectively. Need more styling flexibility or advanced logic? You can always go back to Weavely to tweak themes, add logic conditions, or connect integrations like Google Sheets, Mailchimp, and more.
⌘I