HomeAdd a widgetWebflow

Add a contact form to Webflow

Custom Forms for Webflow

Contact forms styled to match your Webflow build, live with one copy-paste into a Code Embed, with one dashboard for every client site’s submissions.

Needs a Webflow plan that allows custom code: a paid Workspace or an active Site plan

Free plan with no time limit, no card.

See it working

This is a real Sorraia form — our own contact form, loaded by the same embed script you paste. Send it something; it reaches us.

How to add a contact form to Webflow

Webflow gives you pixel control over the page, and a Code Embed keeps the form inside that layout: drop it in the Navigator where the form belongs and it sits in the flow like any other element. The form takes its colours from the site’s brand kit, and its submissions go to Sorraia, so an agency with client sites on several builders reads every site’s submissions in one place.

  1. 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.

  2. 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.

  3. In the Designer, open the Add panel → Elements → Custom Code and drag a Code Embed element to where the widget should sit. Quick find (Cmd/Ctrl + E, then type “embed”) gets you there too.

  4. Paste the Sorraia snippet — only the snippet, with no <html>, <head> or <body> tags — and click Save & Close.

  5. The canvas shows a placeholder instead of the widget: Webflow does not run a Code Embed that contains a script in the Designer.

  6. To see it before publishing, open Preview and switch on the Enable custom code toggle in the bottom-left corner — custom code is off in Preview by default.

  7. Click Publish and select the domain. Nothing reaches visitors until you do.

Where these steps come from:1234

Verifying a Webflow site

Add the DNS TXT record where the domain’s DNS lives, or paste the meta tag into Site settings → Custom code → Head code — Webflow says meta tags always go in the head — and publish.5

The Webflow plan that runs a Code Embed

A Code Embed needs a Core, Growth, Agency or Freelancer Workspace, or an active Site plan. Your own domain is a separate gate: Starter publishes only to .webflow.io, Basic adds a custom domain, and Premium — CMS and Business, merged in May 2026 — isn’t needed for a static embed.267

Worth knowing for this one

  • Webflow wants the code alone in a Code Embed — no <html>, <head> or <body> tags — and the Sorraia snippet already comes in that shape.2
  • Webflow opens the site’s custom code settings only to Site managers and Designers, so decide who on the client’s side looks after the site’s code before you hand it over.58

What Webflow already has

Webflow’s own forms store submissions in Webflow and can send email notifications, post to a webhook or route through connected apps. On the free Starter Site plan they stop at 50 submissions in total. For one site with simple needs, that is a fair place to start. A Sorraia form is for the agency case: one dashboard for every client site’s submissions, whichever builder each site runs on, and client logins scoped to one site.9

What’s included

  • Styled to match: colours from the site’s brand kit
  • Live with one copy-paste
  • One dashboard across client sites
  • Client logins scoped to one site

Free plan with no time limit, no card.

Questions

Can I put the form inside a Webflow blog post?

Yes. In a Rich Text element, use its + menu to add custom code and paste the snippet there. Webflow lets a Code Embed sit anywhere in the design or inside rich text.

How do I reuse the same form on several Webflow pages?

Turn its Code Embed into a component and place the component wherever the form should appear. The snippet loads the current version of the form each time, so an edit in the Sorraia builder reaches every copy.

Who on a Webflow team can work with the site’s custom code?

Site managers and Designers: Webflow gives only those two roles access to the site’s custom code section. Everything inside the form itself — fields, wording, colours — is edited in Sorraia, not in Webflow.

Does the form count against Webflow’s 50-submission limit on Starter?

No. A Sorraia form sends its submissions to Sorraia, not to Webflow’s form storage, so the cap on the free Starter Site plan doesn’t apply to them. The site still needs a plan that allows custom code to run the embed.

Where will I read the form’s submissions?

In your Sorraia dashboard, beside every other client site’s submissions and filterable by site. A client login scoped to this site shows its submissions and nothing else.

Sources

  1. The Add panel · help.webflow.com
  2. Custom code embed · help.webflow.com
  3. Preview mode · help.webflow.com
  4. Publishing a site · help.webflow.com
  5. Custom code in head and body tags · help.webflow.com
  6. Choosing a Site plan · help.webflow.com
  7. May 2026 plan changes · help.webflow.com
  8. Site roles and permissions · help.webflow.com
  9. Forms in Webflow · help.webflow.com

Each page read and checked on 20 October 2026.

Add a contact form to Webflow

Build it in Sorraia, put it live on your Webflow site with one copy-paste, and change it later without touching the embed again.