Webflow is a website builder that has been growing in popularity in recent years. Adding a donation form on Webflow is quick and simple. In this article, we’ll walk you through how to install a donation form, add a goal meter and donor wall to convert more donors. No coding experience required!
Webflow is an easy drag and drop website builder, widely popular for the customizations it offers. If your website is built using Webflow, in a few simple steps you can add a donation form on your webpage.
You can directly embed the donation form on your webpage or you can go for a pop-up donation form or use a donation page hosted by Donorbox. For a pop-up donation form, your donor will click on the donate button and your donation form will pop out on the same screen.
In this post, we cover the step by step process for adding a pop-up donation form, starting with the steps to add a donate button.
If you’d prefer to add a donation button to your Webflow site, we’ll walk you through how to do it.
You can use the Webflow button or embed the Donorbox button.
Click to Add Element and select the Button option.
Go to your Donorbox dashboard and click on Link to Donation Page.
On the next screen, you’ll see your campaign URL.
Note: As Webflow already provides you a button, copy only the URL inside the href attribute.
Go back to your Webflow site and copy and paste your campaign URL into the URL field in the Button element.
When donors click the button, they’ll be taken straight to your Donorbox donation page.
Add an embed component, click the plus button on Webflow.
In the Components section, click on the Embed option.
An HTML embed code editor will be opened there, so you can paste your donation button code.
On your Dashboard, go to campaigns.
Choose a form of your preference and click on the angle braces button
Choose the “Donate Button” option.
Finally, copy and paste the button code on your Webflow HTML embed code editor.
Click on “Save & Close”.
Click the plus button on Webflow.
Click on Embed on the Components section
An HTML embed code editor will be opened. There, you can paste your donation button code.
On your Dashboard, go to campaigns.
Choose a form of your preference and click on the angle braces button
Choose the “Popup Form” option.
Finally, copy and paste the button code on your Webflow HTML embed code editor.
Click on “Save & Close”.
Note that the Popup Button will only appear after you publish your website.
Raviraj heads the sales and marketing team at Donorbox. His growth-hacking abilities have helped Donorbox boost fundraising efforts for thousands of nonprofit organizations.
Subscribe to our e-newsletter to receive the latest blogs, news, and more in your inbox.
Raj