Syncing Webflow Native Forms to HubSpot Without Dropping Custom Form Data

Most marketing teams hit a wall when they try to move custom Webflow form data into HubSpot. If you use native integrations, you're stuck with basic fields. If you use a simple Zapier setup, multi-select checkboxes or custom radio buttons often pass raw, unformatted strings that cause HubSpot to reject the entire payload.

This blueprint fixes that by using a custom webhook setup in Make.com to sanitize and map complex Webflow lead data cleanly into HubSpot custom properties.

The Stack

• Frontend: Webflow Native Forms
• Middleware: Make.com (Custom Webhook + Data Router)
• Destination: HubSpot CRM

‍

When a user selects multiple services or industries on a Webflow form, Webflow outputs this data as a comma-separated text string or a raw array. HubSpot expects a semi-colon-separated string (Value1;Value2;Value3) for multi-select fields. When the data structures mismatch, your sales pipeline gets messy, leads stall, and attribution breaks.

The Setup Strategy

1. Ditch the native HubSpot block in Webflow: Submit your form natively to Webflow's form handler or send it directly to a Make.com custom webhook URL via a tiny piece of JavaScript.
2. The Make.com Array Transformation: We use a join() and split() function in Make to convert Webflow's text output into HubSpot’s strict multi-select format.
3. Upsert Logic: Instead of just creating a new contact (which creates duplicates), we search HubSpot by email first. If the contact exists, we update the profile and log the new form submission as a Timeline Event; if not, we create a clean record.

If a user submits a form and accidentally leaves a required HubSpot dropdown empty, the Make scenario will throw a 400 Bad Request error and halt your pipeline. To prevent this, always add a Data Filter right before the HubSpot module to check if essential string lengths are greater than zero, or use a switch() formula to apply fallback default values.

‍

<script>
document.querySelector("#lead-form").addEventListener("submit", async function(e) {
 e.preventDefault();

 const formData = new FormData(e.target);

 const cleanData = {
   name: cleanText(formData.get("name")),
   email: cleanText(formData.get("email")),

   // Dropdown fallback
   companySize: cleanText(formData.get("companySize")) || "Not specified"
 };

 await fetch("https://hook.eu1.make.com/YOUR_WEBHOOK", {
   method: "POST",
   headers: {
     "Content-Type": "application/json"
   },
   body: JSON.stringify(cleanData)
 });
});

function cleanText(value) {
 return String(value || "").trim();
}
</script>

‍

‍