How can I integrate my Webflow form with Hubspot without using Zapier?
- Embed a HubSpot form in Webflow by creating it in HubSpot, copying the embed code, and pasting it into a Webflow Embed element.
- For custom-styled forms, use HubSpot’s Forms API with JavaScript to send submissions to HubSpot's endpoint.
- Alternatively, use third-party tools like Make or Pabbly to connect Webflow and HubSpot via webhooks.
To integrate a Webflow form with HubSpot without using Zapier, you'll need to use a HubSpot form embed or their Forms API. Webflow doesn't natively support direct integration with HubSpot forms, so you'll use HubSpot's tools to bridge them.
1. Use a HubSpot Embed Form (Recommended for Most Users)
- Log into HubSpot, go to Marketing > Lead Capture > Forms, and create a new Embedded form.
- Configure your fields to match what you need from the Webflow form.
- After finishing, copy the embed code HubSpot provides.
- In Webflow, add an Embed element where your form should go.
- Paste the HubSpot embed code into the Embed element, then publish your site.
Note: Design customization must be done in HubSpot’s form editor or overridden with CSS in Webflow.
2. Use the HubSpot Forms API (For Full Custom Forms)
If you want to keep your Webflow-designed form styling but still send data to HubSpot:
- Go to Developers > API Key inside your HubSpot account, and generate an API key.
- Note your Portal ID and Form GUID from your HubSpot form.
- In your Webflow project:
- Add a custom Embed element with a script that captures form submissions and sends the data to HubSpot’s POST forms endpoint (
https://forms.hubspot.com/uploads/form/v2/:portalid/:formguid). - Bind your form field names to HubSpot's field names.
- You may need JavaScript & jQuery to handle the submission and prevent the default form behavior.
Caution: Implementing the API approach requires JavaScript knowledge. Data is sent client-side, so consider adding extra verification or using a serverless function proxy for sensitive data.
3. Use a Third-Party Tool (Optional, Without Zapier)
If you still want to avoid Zapier but prefer a no-code/low-code option:
- Use Make (formerly Integromat) or Pabbly Connect which support both Webflow and HubSpot.
- Set up a webhook in Webflow to send form data to the integrator.
- From there, map the data to HubSpot.
Summary
To connect your Webflow form to HubSpot without Zapier, the simplest method is embedding a HubSpot form directly in your Webflow page using an Embed element. For more control, use the HubSpot Forms API, but this requires JavaScript coding.
