Wondering how to collect donations on Webflow? In this guide, we'll walk you through how to embed a powerful donation form or button and raise funds with Donorbox on your Webflow site.
Join the fundraising movement! Join the fundraising movement!Webflow is a website builder that has been growing in popularity in recent years. It bills itself as “production-ready experiences without coding” and uses a drag-and-drop system.
Plus, adding a donation form on Webflow is quick and simple — we’ll walk you through how to do it.
You’ll need to have a paid Webflow account or a project with an active site plan to embed content. This includes donation forms.
Choose from a range of free or paid themes, or go ahead and design your site from scratch.
The next step is to add a new page to your site, or alternatively choose an existing page you’d like to add your donation form to. Some organizations choose to have their donation forms front and center on their home page, while others like to add it to their dedicated “Donate” page – it’s your call.
Clicking on the white-paper icon on the left-hand side of the Pages menu lets you add a new page.
Give your page a name and add any other important details.
Create and customize your first campaign – this guide will walk you through the process.
Top tip: If you want to add a recurring donation form on Webflow, choose up to four different intervals to add to your campaign form from our selection of eight options:
On your Donorbox dashboard, head to the “Campaigns” page.
Find the campaign you wish to collect donations for on your Webflow site.
Click on the “Share & Embed” button.
On the Share & Embed page, you can choose how you’d like your donation form to appear on your site.
Donorbox gives you a couple options:
Navigate between the different options here:
Once you’ve chosen how you want your form/button to appear on your Webflow site, copy the Embed Code under your form/button preview window.
If you’re going with a standard embedded form or pop-up donation button, you’ll see two Embed Code options: “OmniGive Form Embed Code” and “Classic Form Embed Code.” While both form variations are innovative, we strongly recommend you choose the former.
The Donorbox OmniGive™ Donation Form opens a door to a range of powerful benefits for your organization and donors, including 22+ payment methods dynamically displayed based on your donor’s location and device. Learn more about all this form has to offer here.
On your Webflow dashboard, head to your chosen page and click the plus sign (“Add”) in the top left corner.
Then, click on the “Embed Code” element.
Copy and paste your donation form script into the box.
Pro tip: Have you found your donation form is dominating the page? Try adding a Container or Column element first. If you add an embed code on its own, the donation form can span the width of the page. Drop the Container element wherever you want your donation form to show up on the page. You can add an Embed form and drag it into the Container and Column element.
Whether you choose a fully embedded donation form or a pop-up donation form, Donorbox makes it easy to collect donations on your Webflow site.
Sign up for free today and create your first campaign to enjoy our powerful suite of fundraising features.
For more tips on how to get the most from your Donorbox account, take a look at the rest of our Nonprofit Blog.
Raviraj heads the sales and marketing team at Donorbox. His growth-hacking abilities have helped Donorbox boost fundraising efforts for thousands of nonprofit organizations.
Join the fundraising movement! Join the fundraising movement!
Subscribe to our e-newsletter to receive the latest blogs, news, and more in your inbox.
