CRM Integration for Nonprofit Websites: What Webflow Can and Can't Do
CRM Integration for Nonprofit Websites on Webflow: A Practical Guide
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.
Further Reading
Eric Phung has 7 years of Webflow development experience, having built 100+ websites across industries including SaaS, e-commerce, professional services, and nonprofits. He specialises in nonprofit website migrations using the Lumos accessibility framework (v2.2.0+) with a focus on editorial independence and WCAG AA compliance. Current clients include WHO Foundation, Do Good Daniels Family Foundation, and Territorio de Zaguates. Based in Manchester, UK, Eric focuses exclusively on helping established nonprofits migrate from WordPress and Wix to maintainable Webflow infrastructure.
Not sure where your site currently stands?
A Blueprint Audit tells you exactly what needs to change — and why.
Before implementing anything new, it's worth knowing what your current site is and isn't doing for your stakeholders. The Blueprint Audit gives you that clarity in two to three weeks.
Related Resources
CRM Integration for Nonprofit Websites on Webflow: A Practical Guide
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.
Join our newsletter
Subscribe to my newsletter to receive latest news & updates
