How to Install a Donation Form on Webflow

Raj 22.07.2020

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.

Webflow is a great option for building an attractive nonprofit website that converts more donors.

Adding a donation form on Webflow is quick and simple — we’ll walk you through how to do it.

The Benefits of Using Webflow

Webflow helps you quickly build a responsive website for your organization. It bridges the gap between design and development.

You can easily add active installations to create a visually appealing website — even with no coding experience.

This is great news for smaller organizations with modest budgets.

You can host your site through Webflow or export the code to another host.

How to Install a Donation Form on Webflow

You’ll need to have a paid Webflow account or a project with an active site plan to embed content. This includes donation forms.

Step 1

Log and Create a New Project

Once you’ve created a Webflow account and accessed your Dashboard, you’re ready to create a new project.

Step 2

Choose a Project Theme

You can choose from free or paid themes. You’ll need to be on certain plans to embed a donation form.

Select a project and give it a name.

Step 3

Add a Donate Page

The next step is to add a new page to your site. You can add a donation form to this page once it’s set up.

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.

Step 4

Embed Your Donation Script.

Once you’ve set up a page to add your donation form, you can embed it.

Click Add to set up a new Element and scroll down to select the Embed option.

Copy and paste your donation form script into the box. Not sure where to find your donation form script?

If you’re using Donorbox, go to Campaigns.

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

After that, click on “Embed Form”:

You will be redirected to a page with the embedding code. Now, all you have to do is to copy the lines on the “Customize the embed code” and paste it into the Embed form on your Webflow site.

Click Save & Close and you’re done!

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.

Step 5

Publish Your Webflow Website!

Note that you can view your donation form only when you publish your Webflow site. If you want to look at the preview, you can temporarily publish your website and unpublish it to make any needed changes.