How to Add a Pop up Donation Form in Webflow

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.

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 Nonprofit Movement
Receive our free email updates to get nonprofit tips, resources and freebies sent directly to your inbox.
Webinar banner

Join us in serving the nonprofit world!

Take your donor experience to the next level!
Join the 35,000+ nonprofits already raising funds online.
(No setup fee. Unsubscribe anytime)