CRM Integration for Nonprofit Websites: What Webflow Can and Can't Do
Key takeaways
- “CRM integration” usually means one of two distinct things — capturing website contacts into the CRM, or getting donation data into the CRM — and each is handled differently.
- Contact capture is set up at the website level, while donation data flows directly between the donation platform and the CRM, not through Webflow.
- The typical contact-capture method is embedding the CRM's own form, such as a HubSpot form, into a Webflow embed element so submissions go straight to the CRM automatically.
- Everything after a form submission — lists, workflows, automated emails — happens inside the CRM and is the CRM administrator's responsibility, not the Webflow consultant's.
- When donors fail to appear in a CRM such as Salesforce, the fault lies in the donation platform's own integration settings rather than the website.
- Webflow's native forms are sufficient when you only need email notifications and manual follow-up, but automatic CRM entry requires the CRM's embed form or middleware such as Zapier or Make.
Summary
How CRM integration works on a Webflow nonprofit website — covering HubSpot form embeds, donation platform to CRM connections, and what the Webflow consultant's role actually is.
What "CRM Integration" Actually Means on a Webflow Site
When a nonprofit asks for CRM integration on their website, the request usually means one of two things — and they require different approaches.
The first is contact capture: people who visit the website fill in a form and those contacts flow automatically into the organisation’s CRM. The second is donation data: donors who give through the website appear in the CRM with their donation history attached.
These are distinct integrations. For contact capture, the connection happens at the website level — a form on the Webflow site sends data to the CRM. For donation data, the connection happens between the donation platform (Fundraise Up, Donorbox, Enthuse) and the CRM directly — not through Webflow.
The Webflow consultant handles contact capture. Donation platform-to-CRM configuration is a fundraising operations task handled by the fundraising team or the donation platform’s onboarding team.
Contact Capture: HubSpot Form Embeds on Webflow
The most common CRM contact capture request I handle is HubSpot. The approach is an embed — HubSpot provides an embed code for each form, and that code is placed in a Webflow HTML embed element on the relevant page.
This means the form on the Webflow site is technically a HubSpot form — it’s hosted by HubSpot and submits data directly to HubSpot. When a visitor fills it in, they appear in HubSpot as a contact automatically.
Step 1: Create the Form in HubSpot
Forms are created in the HubSpot portal, not in Webflow. In HubSpot, navigate to Marketing → Forms and create a new form. This is done by whoever manages the HubSpot account. The form needs to exist and be published in HubSpot before the embed code is available.
Step 2: Get the HubSpot Embed Code
In HubSpot, once the form is published, navigate to the form’s settings and find the Embed option. HubSpot provides a JavaScript snippet that loads the form on any external page. The snippet includes a portalId and formId unique to your account and form — copy this from HubSpot rather than typing it manually.
Step 3: Add a Webflow Embed Element
In Webflow, navigate to the page where the contact form should appear. Add an Embed element from the Add panel, paste the HubSpot embed code into the code editor, and save. The form won’t render fully in the Designer view — it loads correctly on the published site.
Step 4: Style the Container
HubSpot forms inherit styling from your HubSpot portal’s form theme settings. I apply minimal CSS to bring the form closer to the site’s brand — button colour, font, field border radius — without rebuilding HubSpot’s form styling. Wrap the embed in a Div Block and apply width constraints to prevent the form stretching on wide layouts.
Step 5: Test the Form
- Publish the Webflow site
- Navigate to the page and fill in the form with test details
- Submit it
- Open HubSpot and confirm the test contact appears in Contacts
- Confirm the contact is tagged correctly — associated with the correct form, list, or workflow
If the contact doesn’t appear: confirm the portal ID and form ID in the embed code are correct, and that the site has been republished after adding the embed.
What HubSpot Does After the Form Submission
Once a contact submits the HubSpot form, everything that happens next is in HubSpot — adding the contact to a list or workflow, triggering an automated email, assigning to a team member. This is handled by the HubSpot administrator, not the Webflow consultant.
Donation Platform to CRM: Not a Webflow Task
For donation data flowing into a CRM, the integration happens between the donation platform and the CRM. Donorbox, Fundraise Up, and Enthuse all have native integrations with major CRMs — configured in the donation platform’s dashboard, not in Webflow.
If a nonprofit’s fundraising team notices donors aren’t appearing in Salesforce, that’s a Donorbox–Salesforce configuration issue in the Donorbox dashboard, not a Webflow problem.
Webflow’s Native Forms: When to Use Them Instead
Webflow native forms are appropriate when the contact capture requirement is simple: receive a notification, review manually, follow up by hand. They don’t integrate with HubSpot or Salesforce natively without Zapier or Make as middleware.
Decision rule: if the organisation uses a CRM and needs contacts to appear there automatically, use the CRM’s own embed form. If they just need email notifications and occasional manual exports, Webflow native forms are simpler and sufficient.
Newsletter Sign-Ups
The same embed approach applies to Mailchimp, Campaign Monitor, and similar platforms. All provide embed codes for sign-up forms — paste into a Webflow Embed element and subscribers go directly to the email list.
For related guidance, see Setting up webflow forms.
