You can integrate your Webflow form with HubSpot directly by using HubSpot's form embed method or by setting up a HubSpot form endpoint for form submissions.
- Go to your HubSpot account: Navigate to Marketing > Lead Capture > Forms.
- Create a new form: Choose Embedded form type, configure it, and publish.
- Copy the embed code: HubSpot will provide you with the form’s embed code.
- In Webflow: Open the page where you want the form, drag in an Embed Element, and paste the HubSpot embed code.
- Make sure to publish your site to see the form live.
Pros: All submissions go straight to HubSpot natively.
Cons: Limited styling control unless you're comfortable customizing CSS.
2. Submit Webflow Form to HubSpot Using Form Action URL (Simple POST)
- In your HubSpot account, go to Marketing > Lead Capture > Forms, then click Create Form.
- Choose "Non-HubSpot form" or skip embedding and go to Settings > Form API for custom post.
- Use the Form GUID and Portal ID from your form or use HubSpot’s Form Submission API.
- In Webflow:
- Use a standard Webflow form.
- Go to Form Settings and set the Form Action to HubSpot’s POST URL:
https://forms.hubspot.com/uploads/form/v2/[PORTAL-ID]/[FORM-ID]
- Match input field name attributes to HubSpot field names (e.g.,
email
, firstname
, lastname
). - Note: Hidden fields (e.g.,
hs_context
) might be required. These capture metadata such as page info and tracking.
Pros: Maintains Webflow form style and layout.
Cons: Requires correct configuration of field names and hidden inputs.
- In HubSpot, go to Settings > Tracking & Analytics > Tracking Code.
- Copy the JavaScript tracking code and paste it into your Webflow project’s (under Page Settings or Site Settings > Custom Code > Head).
- Enable "Non-HubSpot forms" detection in HubSpot settings.
- HubSpot will automatically detect form submissions from Webflow and log them into contacts when tracking is active.
Pros: Very easy — no need to change form structure.
Cons: Less reliable for complex forms or custom form logic.
Summary
To connect a Webflow form to HubSpot without using Zapier, either embed a native HubSpot form, set your Webflow form to post directly to HubSpot’s endpoint, or enable HubSpot’s tracking for automatic form capture. For full design control and reliable data capture, the Form Action method is the most powerful option.