• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to footer
  • About Donorbox
  • Sign Up
  • Login
  • Contact

Nonprofit Blog

Nonprofit Tips from the Donorbox team

  • Nonprofit Tips
  • Donorbox Integrations
    • WordPress
    • SquareSpace
    • Wix
    • Weebly
    • Twitch
    • Drupa 8
    • Joomla
    • Website X5
  • Donorbox Features

How to Install a Donation Form on Webflow

July 22, 2020 by Raj

donations webflow

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.

  • How to Install a Donation Form on Webflow
  • How to add a goal meter to your donation form
  • How to add Donor Wall to the donation form

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.

recurring donations on webflow


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.

recurring donations on webflow

Select a project and give it a name.

 donations on webflow


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.

recurring donations on webflow


Step 4

Embed Your Donation Script.

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

recurring donations on webflow

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

 donations on webflow

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.

webflow donations.

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

recurring donations on webflow

After that, click on “Embed Form”:

recurring donations on webflow

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.

donations on webflow

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.

 donations on webflow


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.


How to add a goal meter on your Webflow webpage

You can add a goal meter on your website to display your fundraising progress! Here are the steps to add a goal meter.


Step 1

Add a goal to your campaign

On your Dashboard, go to campaigns.goal meter on webflow

Choose your campaign and click on “Edit”

goal meter on webflow

Choose the amount tab.

goal meter on webflow

On “Campaign Goal” provide a goal amount. Then click on “Update & Preview”.
goal meter on webflow


Step 2

Add an embed component

Click the plus button on Webflow.goal meter on webflow Click on Embed on the Components section

goal meter on webflow

An HTML embed code editor will be opened. There, you can paste your donation button code.
goal meter on webflow


Step 3

Copy the embedding code on Donorbox page

On your Dashboard, go to campaigns.goal meter on webflow

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

goal meter on webflow

Click on “Goal Meter”

goal meter on webflow

Copy the embed code and paste it on your Webflow HTML embed code editor.

goal meter on webflow

Click on “Save & Close”.

goal meter on webflow


How to add Donor Wall to Your Webflow Webpage


Step 1

Enable “donor comment wall”

On your Dashboard, go to campaigns.

donor wall on webflow

 

Choose your campaign and click on “Edit”

donor wall on webflow

 

On the Social Media tab, enable “Display donor comment wall”.

donor wall on webflow


Step 2

To add an embed component Click the plus button on Webflow.

donor wall on webflow

Click on Embed on the Components section.

donor wall on webflow

An HTML embed code editor will be opened. There, you can paste your donation button code.donor wall on webflow


Step 3

Copy the embedding code on the Donorbox page.

On your Dashboard, go to campaigns.donor wall on webflow

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

donor wall on webflow

Click on “Donor Wall”
donor wall on webflow

Copy the embed code and paste it on your Webflow HTML embed code editor.

donor wall on webflow

Click on “Save & Close”.

donor wall on webflow


Over to You

Not got any coding knowledge in your team? Webflow is an easy way to build an attractive nonprofit website.

Installing a donation page in Webflow is simple. In a few steps, you can embed a donation form.

For more tips on how to get the most from your Donorbox account, take a look at our nonprofit blog.

Filed Under: Donorbox Integrations, Nonprofit Tips, Resources

Primary Sidebar

Join the Nonprofit Movement

Receive our free email updates to get nonprofit tips, resources and freebies sent directly to your inbox.

TOP POSTS

  • The Complete Guide to Registering a 501c3 Nonprofit
  • How to Start a Nonprofit Organization: A Comprehensive Guide
  • 12 Donation Form Best Practices to Boost your Donations
  • How to Create a 501(c)(3) Tax-Compliant Donation Receipt
  • 10 Actionable Tips to Create a Powerful Monthly Giving Program
  • 100+ Powerful and Effective Fundraising Ideas for Everyone
  • 10 Reasons Why Nonprofits Choose Donorbox Over PayPal
  • Quickly Raise Funds With Our Powerful Crowdfunding Feature [New Update]

Recent Posts

  • Actionable Tips to Boost Online Donations
  • Nonprofit Fundraising Trends 2021
  • Key Nonprofit Stakeholders and How to Steward Them
  • Crowdfunding Storytelling For a Successful Campaign
  • How to Hire and Retain Great Nonprofit Fundraisers

Footer

Resources

Get Started with Donorbox
Covid19 Resource Center
Donation software
Contact us
Support
Affiliate Partner Program
100+ Fundraising Ideas for Nonprofits

Use cases

Nonprofit Fundraising Solution
College & University Fundraising
Medical Research Fundraising
Church Fundraising
Political Fundraising
Animal Rescue Fundraising

Integrations

Stripe for Nonprofits
Wix Donations
SquareSpace Donations
Weebly Donations
WordPress Donation Plugin

Copyright © 2021 · Magazine Pro on Genesis Framework · WordPress · Log in