Each service gives you a snippet to paste into your page. Google Forms hands you an iframe from its Embed HTML option; Calendly gives a div plus a script from Add to website; Typeform gives a div with data-tf-widget plus its embed script. Set a sensible height, a title and width 100% so it fits phones.
| Service | Where to click | What you paste |
|---|---|---|
| Google Forms | More menu (three dots) > Embed HTML > Copy | An iframe |
| Calendly | Scheduling page > three dots > Add to website | A div and a script tag |
| Typeform | The embed options in your form's share settings | A div with data-tf-widget and a script tag |
Updated
Copying the code is the easy part. The problems show up afterwards: a form that is cut off on phones, a double scrollbar, an iframe with no title for screen readers, or a booking widget that slows the page. This guide covers where each code lives and how to make it behave.
Choose Google Forms, Calendly or Typeform, paste the code or link the service gave you, and get a snippet with a title, a phone-friendly width and the height you set. The builder only rewrites text; it does not load the form.
| Service | Embed styles | Resizes itself? |
|---|---|---|
| Google Forms | Inline iframe | No, you set the height |
| Calendly | Inline, popup widget, popup text | Inline height is fixed unless you use the advanced JavaScript embed with resize |
| Typeform | Inline, full page, popup, slider, popover, side tab | Inline fills the box you give it |
Replace the placeholder addresses with your own. Each one is sized to fit phones.
Keep the src Google gives you; only the sizing, title and lazy loading change.
<iframe
src="PASTE_THE_SRC_FROM_GOOGLE_HERE"
title="Contact form"
width="100%" height="900" loading="lazy"
style="border:0;max-width:640px;display:block;margin:0 auto">
Loading…
</iframe>The shape of Calendly's inline embed: one div with your link and one script.
<div class="calendly-inline-widget"
data-url="https://calendly.com/your-name/30min"
style="min-width:320px;height:700px;"></div>
<script src="https://assets.calendly.com/assets/external/widget.js" async></script>Swap abc123 for your form id. The script styles the widget itself.
<div data-tf-widget="abc123" style="width:100%;height:560px;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>Open the form, choose the More menu at the top right, pick Embed HTML and press Copy. Google's help page lists these steps. What you get is a single iframe pointing at your form.
The copied iframe has fixed pixel dimensions. Swap the width for 100% with a max-width so it shrinks on phones, keep the height tall enough for the longest version of the form, and add a title.
On your scheduling page, open the three-dot menu next to the event and choose Add to website. Calendly then offers three styles: inline embed, popup widget (a floating button) and popup text (a link). You can also hide your photo or the event details before copying.
The inline code is a div with the class calendly-inline-widget, your link in data-url, and one script from assets.calendly.com. Load that script once per page even if you show several widgets.
Typeform's embed library reads any element with data-tf-widget and turns it into the form, so the snippet is a div plus a script. The form id is the last part of your typeform address after /to/.
For a button that opens the form in a popup, the library exposes window.tf.createPopup, which returns open, close and toggle functions you can attach to your own button.
Every embed loads another site's code and may set that site's cookies, so mention the services in your privacy policy. If a form is far down the page, lazy loading or a button that opens it keeps the first view fast.
The iframe is shorter than the form, so the form scrolls inside it while the page scrolls too. Increase the height attribute until the whole form fits, and recheck after adding questions, since the frame does not grow by itself.
No. The form is a page served by Google inside a frame, and your stylesheet cannot reach into it. You can change its theme inside Google Forms, or build your own form that submits elsewhere.
Calendly's own code sets a minimum width of 320px and a fixed height. Raise the height if your event asks extra questions, or use the popup text or popup widget options so the scheduler opens over the page instead.
Typeform lists inline, full page, popup, slider, popover and side tab embeds. Use inline when the form is the point of the page, and a popup or slider when it is a secondary action next to other content.
Yes. Add the snippet in an HTML or embed block, or ask the editor to place the form in a section. The snippet is ordinary HTML, so it behaves the same as on any other site.
Related: How to add a contact form, HTML iframe and video, Booking form generator, Embed a Google Map, Send a form to email, HTML embed code generator.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.