HomeAdd a widgetWebflow
Add a contact form to Webflow
Build the form in Sorraia, paste one line into Webflow, and every submission lands in your dashboard — styled to match the site, with no plugin and no form-handling code to maintain.
Free plan, no card. Paid plans start at $19 a month.
Why do it this way on Webflow
Webflow gives you pixel control over the page and then asks you to hand the form off somewhere for anything past a basic submission. A Code Embed keeps the form inside the layout you designed — it is the same document, not an iframe, so your section styles apply — while the field logic, the submission store, the CSV export and the routing all live in Sorraia. Drop the Code Embed exactly where the form belongs in the Navigator and it sits in the flow like any other element.
See it working
This is a real Sorraia form — our own contact form, embedded here the same way you would embed yours. Send it something if you like; it reaches us.
How to add a contact form to Webflow
A widget that sits in the page flow goes in a Code Embed element, dropped exactly where you want it in the layout. Webflow’s glossary still also calls it the Embed component, so guides naming an “Embed element” mean the same thing.
Webflow words the custom-code gate as: a Core, Growth, Agency or Freelancer Workspace, or an active Site plan on the site. Publishing to your own domain is the separate gate, and that needs a Site plan — minimum Basic; the free Starter plan publishes only to a .webflow.io subdomain. Custom code is not a top-tier feature: Basic is enough. Webflow re-tiered in May 2026 and merged the CMS and Business Site plans into one called Premium, so any guide telling you to buy a “CMS plan” or a “Business plan” is naming plans that no longer exist for new purchases.
In Sorraia, add the website and verify it — a DNS TXT record, or a meta tag in your homepage’s <head>. Verification is what lets you attach a widget to that site, so it comes before there is anything to paste.
Save the form and the Copy Embed Code popup appears; you can also open the Install wizard from the form’s row on the Forms page, which walks you through pasting it and re-checks the page for you.
In the Designer, open the Add panel (the + icon) → Advanced and drag a Code Embed element to the spot in the layout where the widget should sit. Quick find (Ctrl/Cmd + E) and typing “Embed” gets you there too.
Paste the Sorraia snippet into the code editor and save it (the control reads Save & close).
The canvas will show a grey placeholder rather than the widget — script tags do not execute on the Designer canvas.
Click the Preview “play” icon in the top bar (Cmd/Ctrl + Shift + P), then switch on the Enable custom code toggle in the bottom-left corner. Custom code is off in Preview by default, so without that toggle you still see nothing.
Click Publish. Nothing reaches real visitors until you do.
What you get
Build the form in Sorraia, paste one line into Webflow, and every submission lands in your dashboard — styled to match the site, with no plugin and no form-handling code to maintain.
Submissions live in your dashboard
Every submission is stored and searchable, filtered by site and date, with no cap on how many you can take — submissions are uncapped on every plan including Free. CSV export is a paid feature, and the export honours whatever filters the list is showing, so what you download is what you were looking at.
It points out which fields hold health data
While you build the form, Sorraia reads your field LABELS and flags the unambiguous ones — date of birth, MRN, insurance or member ID, diagnosis, medication, vitals — and offers to mark them as PHI. It is deliberately conservative and stays quiet on plain name, email and phone fields, because a tool that flags everything gets tuned out. Two things it is not: it reads labels in the builder, never submitted answers, and a marked field only routes into separate encrypted storage once HIPAA is switched on for that site under a signed BAA. Marking is a storage decision, not a compliance certificate — and we are not the ones who get to certify that anyway.
Workflows fire on submit
A submission can send email, post to Slack, hit a webhook, or run a multi-step workflow with conditions. Each run is logged with its result, so a failed delivery is visible rather than silent.
It inherits your brand kit
A new form is seeded from the site’s brand kit at creation, so the first version already looks like your site instead of like a generic form. Restyle it later in the builder and the change reaches live pages without you touching the embed again.
More detail in the Help Center: Forms · Embedding on your website
Things worth knowing about Webflow
- Scripts do not execute on the Designer canvas — you get a placeholder box — and Preview does not run custom code either unless you switch on the Enable custom code toggle in the bottom-left corner. Between the two, a perfectly working widget can look broken all the way up to Publish.
- With custom code enabled in Preview, Webflow serves the site from a different origin — a {shortName}.canvas.webflow.com subdomain — rather than your own domain. Worth knowing before you conclude something is wrong: what you are testing in Preview is not the hostname your visitors will be on.
- As of August 2020, newly published Webflow sites include jQuery 3.5.1, and Webflow warns that loading another copy in custom code can conflict with it.
- Each Code Embed and each custom-code field caps at 50,000 characters and the limit cannot be raised. A loader snippet is a few hundred characters, so this only bites if you paste an entire inlined bundle.
- For a floating launcher, prefer Footer code over a Code Embed: any ancestor element carrying a transform, filter, perspective or will-change becomes the containing block for fixed-position descendants, and Webflow Interactions add transforms routinely — which would pin the launcher inside that div instead of the viewport.
Questions
Where do the submissions go?
Into your Sorraia dashboard, immediately. You can search and filter them, see which site each came from, and route them onward with a workflow — email, Slack, or a webhook. CSV export of the current view is available on paid plans. Nothing is posted to a third-party form service in between, and there is no cap on how many submissions you can receive, on any plan.
Can I change the form after I have embedded it?
Yes, and you never re-paste the snippet. The embed loads the current version of the form each time, so editing fields, wording or styling in the builder updates every page it is on. That is the point of a script tag over a copy-pasted HTML form.
Which Webflow plan do I need?
To run the widget on your own domain, a Basic Site plan or higher. Webflow gates custom code on having a Core, Growth, Agency or Freelancer Workspace or an active Site plan; the custom domain is the separate thing a Site plan buys, and the free Starter Site plan publishes only to a .webflow.io subdomain. Note that Webflow merged the old CMS and Business plans into Premium in May 2026 — you do not need Premium for this.
The embed shows an empty grey box, and Preview does not help. Did I do it wrong?
No — two separate Webflow behaviours are stacking up. Script tags never execute on the Designer canvas, so you get a placeholder there by design. And Preview does not run custom code by default: once you are in preview mode, click the Enable custom code toggle in the bottom-left corner, or turn on “Run custom code in Preview” in Site settings → Custom code so it stays on. Publishing and opening the live URL always shows the real thing.
Add a contact form to Webflow
Build it in Sorraia, paste one line into your Webflow site, and change it later without touching the embed again.