You can embed a form on your website three ways: inline, where the form renders inside the page content; as a popup triggered by a button; or as a plain link that opens the form full screen. Inline embeds suit pages built around one action, popups suit pages with other jobs to do, and links reach everywhere code cannot.
Pick the embed style that fits the page
| Method | Best for | Tradeoff |
|---|---|---|
| Inline embed | Contact pages and landing pages built around one action | Takes permanent space on the page |
| Popup embed | Busy pages where the form is one option among many | One more click before the first question |
| Plain link | Bios, emails, QR codes, social posts, and docs | Leaves your site entirely |
Inline embed, step by step
- 1
Open the share panel
In your form builder, find the Share or Embed option and choose the inline or website embed type.
- 2
Copy the snippet
You will get a small block of HTML, usually an iframe, that points at your form.
- 3
Paste it into the page
Drop the snippet into your CMS content, page builder HTML block, or template file wherever the form should appear.
- 4
Set the height
Give the embed enough height for the whole form, or confirm your builder auto-resizes. A cut-off submit button is the most common embed failure.
- 5
Test on a phone
Open the published page on a real device and submit once. Check that fields, the submit button, and any date pickers all work with touch.
Popup embeds: useful, with one catch
Popup embeds attach the form to a button, so the page stays clean until a visitor asks for it. They suit support pages, pricing pages, and anywhere the form competes with other content. Timing matters: popups that fire on their own, especially exit-intent overlays, annoy more than they convert.
One product note from SharaForms: Focused and Spotlight presentation forms do not support overlay popup embeds, because those modes are designed as full page experiences. Use an inline embed for them, and popups remain available for Classic forms.
Keep embeds friendly on mobile
- Avoid fixed pixel heights tuned on desktop; small screens need room to grow.
- Prefer auto-resize when your builder offers it, so the embed grows with validation messages.
- Keep generous space around the embed so taps never hit neighboring links.
- If the page is long, lazy-load the embed so it does not drag down initial page speed.
Common embed problems, fixed
- Cut off form: increase the iframe height or switch to an auto-resizing embed.
- Double scrollbars: the iframe is taller than its container; set the height to match the form once.
- Blank area: an https page loading an http form gets blocked by the browser; both must be https.
- Styling clash: pick a transparent background in the form theme so it inherits your page.
- Nothing appears in a page builder: paste into an HTML or code block rather than a rich text field.
Templates to start from
Frequently asked questions
- Can I embed a form without coding?
- Yes. Most builders, including SharaForms, generate a copy-paste snippet from the share panel. You paste it into any CMS block, page builder HTML element, or website template, and the form renders in place. No plugin, script install, or developer time is needed, and edits to the form appear on the site automatically.
- Why is my embedded form cut off?
- The iframe height is smaller than the form inside it, so the bottom fields and submit button sit beyond the visible area. Raise the height in the snippet, or switch to an auto-resizing embed if your builder supports one, then retest on mobile where error messages and keyboards change the space the form needs.
- Can I embed a form in WordPress, Shopify, or Webflow?
- Yes on all three. WordPress takes the snippet in a Custom HTML block, Shopify accepts it in page content or theme sections, and Webflow uses an Embed element. The steps are identical everywhere: copy the snippet from the form, paste it into an HTML-aware block, publish, and check the result on a phone.
- Do embedded forms work on mobile?
- They do, and most submissions now arrive that way, so test there first. Responsive forms reflow to narrow screens automatically, but the page around them can still break the experience: cramped containers, fixed heights, and neighboring links too close to fields are the usual offenders. Submit one real response from your own phone before announcing the page.
Put this to work on a real form
Free plan, unlimited forms and submissions, all three presentation modes included.
