How to Add a Pop up Donation Form in Webflow

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!

2 minutes read
How to Add a Pop up Donation Form in Webflow

webflow donations

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.


How 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.


1. Using the Webflow button


Step 1

Add a Button

Click to Add Element and select the Button option.

webflowaddbutton


Step 2

Find Your Campaign URL

Go to your Donorbox dashboard and click on Link to Donation Page.

pasted image 0 17

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.

pasted image 0 15


Step 3

Insert Your Campaign URL

Go back to your Webflow site and copy and paste your campaign URL into the URL field in the Button element.

webflowbutton2

When donors click the button, they’ll be taken straight to your Donorbox donation page.


2. Using Donorbox Button


Step 1

Add an embed component, click the plus button on Webflow.
webflowaddelement 1

In the Components section, click on the Embed option.webflowmbedelement 1

An HTML embed code editor will be opened there, so you can paste your donation button code.
pasted image 0 20


Step 2

Copy the embedding code on Donorbox page,

On your Dashboard, go to campaigns.pasted image 0 19

Choose a form of your preference and click on the angle braces button

pasted image 0 24

Choose the “Donate Button” option.

pasted image 0 16

Finally, copy and paste the button code on your Webflow HTML embed code editor.

pasted image 0 21

Click on “Save & Close”.


How To Add a Popup Donation Form


Step 1

Add an embed component

Click the plus button on Webflow.webflowaddelement 1

Click on Embed on the Components sectionwebflowmbedelement 1

An HTML embed code editor will be opened. There, you can paste your donation button code.
pasted image 0 20


Step 2

Copy the embedding code on Donorbox page

On your Dashboard, go to campaigns.pasted image 0 19

Choose a form of your preference and click on the angle braces buttonpasted image 0 24

Choose the “Popup Form” option.

pasted image 0 22


Step 3

Finally, copy and paste the button code on your Webflow HTML embed code editor.

pasted image 0 23

Click on “Save & Close”.
pasted image 0 18

Note that the Popup Button will only appear after you publish your website.

Avatar photo

Raviraj heads the sales and marketing team at Donorbox. His growth-hacking abilities have helped Donorbox boost fundraising efforts for thousands of nonprofit organizations.

  • facebook
  • twitter
  • instagram
  • linkedin
  • tumblr

Join the fundraising movement!

Subscribe to our e-newsletter to receive the latest blogs, news, and more in your inbox.

Take your donor experience to the next level!
Join the 50,000+ nonprofits already raising funds online.
Join Our Newsletter
Get a monthly curated round-up of our best posts and feature updates. (You can unsubscribe anytime.)
Join Our Newsletter
Get a monthly curated round-up of our best posts and feature updates. (You can unsubscribe anytime.)
Join a 30min Demo to see how Donorbox can help you reach your fundraising goals!
Join a 30min Live Demo to see how Donorbox can help you reach your fundraising goals!