- Fundraising & Donations
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 needs the CRM's own embed form, a connector app, or middleware such as Zapier or Make.
Summary
How CRM integration works on a Webflow nonprofit website: 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, so 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 (HubSpot, 2026). 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 calls hbspt.forms.create() with a region, a portalId and a formId unique to your account and form (HubSpot, 2026), so copy it 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, but 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 region, 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.
None of that changes who is accountable for the data. A supporter filling in the form is handing personal data to your charity, so moving it into a CRM is processing under UK GDPR and three things have to be in place before the embed goes live. You need a lawful basis under Article 6. You need to give the privacy information Article 13 requires at the point the data are collected, which means at the form, not buried two clicks away. And the CRM vendor is acting as your processor, so you need the written contract terms set out in Article 28(3).
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 and Fundraise Up both publish native integrations with major CRMs (2026), 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 to 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. Getting those submissions on into a CRM usually means middleware such as Zapier or Make. HubSpot is now an exception: Webflow publishes a HubSpot app (Webflow, 2026) that connects native Webflow forms to HubSpot through HubSpot’s non-HubSpot forms feature, which collects submissions from an external HTML form and needs HubSpot’s tracking code on the page (HubSpot, 2026).
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.
There is a third option where the CRM is HubSpot. The Webflow HubSpot app connects a native Webflow form to HubSpot through the non-HubSpot forms feature, so submissions are captured in HubSpot while the markup and the styling stay in Webflow (Webflow, 2026). If you want to own your form markup and your CRM is HubSpot, that is the arrangement to ask for.
Newsletter Sign-Ups
The same embed approach applies to Mailchimp, Campaign Monitor and similar platforms. Mailchimp’s form builder produces an embed code to paste into your website (Mailchimp, 2026), and Campaign Monitor’s embedded form builder ends with copying the code and pasting it into your website’s HTML (Campaign Monitor, 2026): paste either into a Webflow Embed element and subscribers go directly to the email list.
For related guidance, see setting up Webflow forms.
Further Reading
- Donation Software for Nonprofits: Choosing the Right Platform
- How to Embed a Donation Form on Your Webflow Nonprofit Website
- GDPR Compliance Checklist for Nonprofit Websites
- Form Design for Nonprofit Websites: Accessibility, Conversion, and Trust
- How Socialectric Manages Nonprofit Website Projects from Start to End
Two clicks. Three things.
Send the address of your website. Within two working days you get a short email naming the three things a funder would hold against it, including what AI assistants like ChatGPT and Google’s AI Overviews currently say about you. No report, no call, no follow-up unless you ask.
Received. Your three things arrive within two working days.
That did not send. Email hello@socialectric.com with your website address and I will reply from there.
Frequently asked questions
- What does CRM integration on a Webflow site actually mean?
Usually one of two things, and they need different approaches. Contact capture is people filling in a form on the website and flowing automatically into the CRM, and that connection happens at the website level. Donation data is donors who give through the website appearing in the CRM with their donation history attached, and that connection is made between the donation platform and the CRM directly, not through Webflow.
- How does a HubSpot form get onto a Webflow page?
By embed. The form is created and published in the HubSpot portal under Marketing → Forms, HubSpot then provides a JavaScript snippet carrying a region, a portalId and a formId unique to your account and form, and that snippet is pasted into a Webflow Embed element on the relevant page. The form on your site is technically a HubSpot form, hosted by HubSpot and submitting directly to it, so anyone who fills it in appears in HubSpot as a contact automatically. It will not render fully in the Designer, but it loads correctly on the published site.
- Donors are not appearing in our CRM: is that a website problem?
Almost certainly not. Donorbox and Fundraise Up both publish native integrations with major CRMs, and they are configured in the donation platform's own dashboard rather than in Webflow. So donors missing from Salesforce is a configuration issue in the donation platform, and it is a fundraising operations task for the fundraising team or the platform's onboarding team rather than a Webflow one. See also: embedding a donation form on a Webflow site.
- When are Webflow's own forms enough?
When the contact capture requirement is simple: receive a notification, review it manually, follow up by hand. Getting those submissions on into a CRM usually means middleware such as Zapier or Make, although HubSpot is now an exception: Webflow publishes a HubSpot app that connects native Webflow forms to HubSpot through HubSpot's non-HubSpot forms feature. The decision rule is that if the organisation uses a CRM and needs contacts to appear there automatically, use the CRM's own embed form; if it only needs email notifications and occasional manual exports, Webflow native forms are simpler and sufficient. Setting up Webflow forms covers the native route in full.
- How do we check the form is working?
Publish the Webflow site, go to the page, fill the form in with test details and submit it, then open HubSpot and confirm the test contact appears in Contacts and is tagged correctly against the right form, list or workflow. If the contact does not appear, confirm the region, portal ID and form ID in the embed code are correct and that the site has been republished since the embed was added.
- Does the same approach work for newsletter sign-ups?
Yes. Mailchimp, Campaign Monitor and similar platforms provide embed codes for their sign-up forms (Campaign Monitor, 2026), and the method is the same: paste the code into a Webflow Embed element and subscribers go directly to the email list.