Webflow

Keep your Webflow forms exactly as they are. Webflow still saves every submission, sends its notification emails and passes it on to apps like HubSpot, Zapier or Make. Alongside it, Cauliflower sends the lead to a router and opens the right rep's calendar on top of the form's success message, so qualified visitors book before they leave the page.

Setup takes about ten minutes: one snippet in your site settings, one attribute on each form, and a publish.

Before you start

• A router that is Live, with the Website form entry point turned on in its trigger. The starter router, inbound, already is.
• The router's slug, shown on Routers → your router → Install, along with your Cauliflower URL and workspace slug.
• A paid Webflow Site plan or Workspace plan. Webflow only lets paid plans add custom code.
• Your site's domains, including the staging domain ending in webflow.io if you test there.

Set it up

https://example.com
https://www.example.com
https://example.webflow.io

<script>
  (function (w, d) {
    w.cauliflower = w.cauliflower || function () { (w.cauliflower.q = w.cauliflower.q || []).push(arguments) };
    var s = d.createElement("script"); s.async = true; s.src = "https://cal.example.com/embed.js"; d.head.appendChild(s);
  })(window, document);
  cauliflower("init", { workspace: "acme" });

  // Webflow forms marked with data-cauliflower-form="<router slug>". Webflow still saves the
  // submission; Cauliflower routes the lead at the same time and opens the calendar.
  (function () {
    // Your field names → Cauliflower's, when they differ. For example: { email: "E-post", company: "Företag" }
    var MAP = {};
    document.addEventListener("submit", function (event) {
      var marked = event.target.closest("[data-cauliflower-form]");
      // Skip forms the widget already routes, so a form bound both ways is routed once.
      if (!marked || event.cauliflowerRouted) return;
      var form = event.target;
      var data = new FormData(form);
      // Webflow doesn't send a form until its reCAPTCHA is checked, so don't route it either.
      if (form.querySelector(".g-recaptcha") && !data.get("g-recaptcha-response")) return;
      var lead = {};
      data.forEach(function (value, name) {
        if (typeof value !== "string" || /captcha|turnstile/i.test(name)) return;
        lead[name] = name in lead ? [].concat(lead[name], value) : value;
      });
      for (var key in MAP) if (MAP[key] in lead) lead[key] = lead[MAP[key]];
      cauliflower("route", { router: marked.getAttribute("data-cauliflower-form"), lead: lead });
    });
  })();
</script>

What the code does

When a visitor submits a marked form, Webflow handles the submission as usual: it validates the fields, saves the entry and shows the success message. At the same moment, the snippet:

1. Reads every named field from the form. Fields with the same name become a list, and reCAPTCHA and other spam-check tokens are left out.
2. Skips the form when it has a reCAPTCHA that hasn't been checked, because Webflow won't send it either.
3. Copies fields listed in MAP to Cauliflower's names.
4. Calls route, which adds the page URL, the referrer and UTM parameters, sends the lead to the router and shows the outcome.

The visitor then sees the same outcome as with any widget form: the calendar for qualified leads, the path's message for disqualified or assigned leads, or a redirect. Unmarked forms and the rest of your site are untouched. If Cauliflower can't be reached, the Webflow submission still goes through as normal.

Field names

Cauliflower reads each field's Name from its settings in Webflow, not the label visitors see. Names are compared in lowercase with spaces and dashes turned into underscores, so Email, Work Email and Work-Email are all recognized. A typical form arrives like this:

Every field Cauliflower recognizes is listed under Field mapping. An email is required: a form without a recognized email field isn't routed, and the browser console shows "A valid email is required to route a lead".

When your field names are in another language or otherwise differ, map them in the snippet. Keys are Cauliflower's names and values are your Webflow field Names:

var MAP = { email: "E-post", first_name: "Förnamn", company: "Företag", phone: "Telefon" };

You can also rename the fields in Webflow. Mapping is safer when other tools already use those names, such as a Zapier or Make scenario, because renaming a field changes what those tools receive.

To route on a field in the router builder, add it under the router's Form fields with the key Cauliflower uses, for example company_size. A Select field sends the chosen option's value, and a checked Checkbox sends on; unchecked boxes aren't sent at all. See Paths and conditions.

Booking buttons

The same script lets any button or link open a booking link in a modal, such as a "Book a demo" button in your navigation. Select the Button or Link Block, and under Element settings → Custom attributes add data-cauliflower-link with the booking link's slug as its value, for example product-demo. The widget handles the click, so the element's own link setting doesn't matter.

Embed the whole router instead

If you'd rather not keep a Webflow form, embed the router's hosted page: a form built from the router's fields, your team's photos and the calendar, all in one. Copy the code under Routers → your router → Install → Embed the hosted page into a Code Embed element. It doesn't need the footer code above. See Hosted router page.

Go-live checklist

• The router is Live and its Website form entry point is on.
• The footer code is saved, with your Cauliflower URL and workspace slug, and the site is published.
• Each form that should route has data-cauliflower-form with the right router slug, and no other form does.
• Those forms have no Redirect URL.
• The email field is recognized, by its name or through MAP.
• Allowed website origins lists every production domain, and the staging domain if you test there.
• A test submission opens the calendar, shows up in Webflow's Form submissions and in the router's Logs.
• A test with a personal email address, or anything else your paths disqualify, shows the message you expect.

Troubleshooting

Open the browser's developer console on your published site to see errors from Cauliflower. The most common problems:

To check a field's name on the published site, right-click the field, choose Inspect and look at its name attribute. If your site sends a Content Security Policy, allow your Cauliflower URL in script-src, connect-src and frame-src.

Related