Installation guide
Interactive form for Webflow
An interactive form for Webflow goes in an Embed element in the Designer. Webflow takes foreign code well, but it has two traits you need to know: custom code runs only on the published site, and only on a paid site plan. The rest is the snippet from the Offerandum panel, the domain and a test.
Interactive form for Webflow: step by step
- In the Offerandum panel open Start, find the published form and click Copy code under the website snippet.
- In the Designer open the page, find the Embed element in the Add panel (among the advanced elements) and drag it where the form should be.
- Click the element, paste both lines from the panel into the code editor and save.
- Give the element the width of your content column (for example 100% inside a container) and publish the site. In the Designer the element shows only a grey placeholder.
The script in the site header
You can leave the script in the Embed element or add it once for the whole site: Project settings → Custom code → Head code, and keep only the offerandum-form element in the embed. This lets the form's statistics remember which page of your site a customer landed on first. A change in settings needs a publish too.
What to watch for in Webflow
- Site plan. Webflow publishes custom code only on a paid site plan. On the free plan the embed will not run after publishing. Until a plan is attached, add a menu button to the form's hosted address.
- Embed character limit. The Embed element accepts up to 10,000 characters; the two lines of the snippet are a fraction of that, so nothing needs shortening.
- Collection templates. An Embed on a collection template places the form on every page of the collection; through Add field you can bind the form's id from a CMS field when each page needs a different one.
- Localization and domains. Every domain you publish to (your own, webflow.io, language versions on separate domains) has to be on the allowed list in the Offerandum panel.
Your site's address in the Offerandum panel
Under the snippet in the panel is the list of sites the form is allowed on. Add the production domain and the webflow.io address if you test there. The steps shared by every platform are in the installation guide .
Check and send a test request
After publishing, open the page on a computer and a phone and go through the form to the summary. Send a trial request through the test link from the panel, or add the test-token attribute from that link to the element and remove it after testing. The customer receives a PDF quote , you receive the lead with every parameter. Rates change in the price list panel ; terms are on the pricing page .
Good to know
Frequently asked questions
In the Designer I only see a grey box, not the form. Is something wrong?
No. Webflow does not run custom code in the Designer, only on the published site. Publish and check the public address.
Does it work on a free Webflow plan?
Webflow publishes custom code on a paid site plan. On the free plan link to the form's hosted address, or add a site plan before launch.
Can I put the form on a CMS collection template, on every product page?
Yes. An Embed element on the collection template shows the same form on every page of that collection. For a different form per product, bind a collection field with its id to the form-id attribute.
Do Webflow interactions or Lottie clash with the form?
No. The form runs in its own isolated frame and never touches your site's scripts. All you set is the Embed element's width.
// live demo
Want a form like this for your business?
I will show you live how it works from the company side: the panel, the leads and the PDF quote. Tell us what you quote and you get a link to pick a time by e-mail.
- Free, no strings attached
- You pick the time in the calendar
- Online meeting in Google Meet
I run the demo myself: you will see how a form like this would work in your business.
Damian Krychowski, founder of Offerandum