How to Embed a Donorbox Recurring Donation Form in Wix

Follow our step-by-step guide to add a Donorbox recurring donation form to your Wix site and start accepting more donations.

3 minutes read
How to Embed a Donorbox Recurring Donation Form in Wix

Donorbox’s simple, responsive, and smart donation form easily embeds on your Wix website in just a few simple steps – no special coding required!

This post will take you through each step for embedding the Donorbox donation form into your Wix website.

Bonus resource: Use this guide to learn how to enable SSL security on your Wix website.


Wix Donation Form – Video Tutorial

Prefer a video tutorial, or simply having a hard time embedding the Wix donation form? Check out this video tutorial!


How to Embed a Donorbox Donation Form into a Wix Site


Step 1

Go to your Donorbox dashboard and find the campaign you wish to embed on your site. Click the “Edit Campaign” button, then click the  “Embed Form” button, as shown below.

Screenshot of the campaign editor on Donorbox.

Note: If you don’t have a Donorbox account, please create a Donorbox account for free. Here’s a step-by-step guide to creating a donation form.


Step 2

You can edit some of the default settings in your form from the campaign editor, like setting a default donation amount or recurring interval. Donorbox Premium members can utilize our handy Recurring Donation Upsell feature on donation forms to prompt users to donate monthly gifts, too! As you change the settings, you will see the code automatically adjust itself. 

When you’re happy with the settings, copy the embed code for your form. This code will be pasted on your Wix site later on.

Screenshot of the campaign launchpad on Donorbox.


Step 3

Go to your Wix site editor. Locate or create the page where you want to embed your donation form.

To create a page, under “Site Menu,” click the “Add Page” button, as highlighted below.

Screenshot of the Site Pages and Menu screen on Wix.

Next, type a name for your new page in the box shown in the below image and click “Done.”

Screenshot of the Site Pages and Menu screen on Wix.


Step 4

On the page editor, click the “+” (Add Elements) button on the left sidebar. Select the “Embed Code” option and under “Custom Embeds,” select “Embed HTML.”

The step is highlighted below.

Screenshot showing how to embed HTML on Wix.


Step 5

Click “+” (Add to Site). Then click on “Code” and paste the Donorbox form embed code under “Add your code here.” This is the code that you copied earlier from your Donorbox dashboard.

Next, click “Update.”

Screenshot showing where to paste your Donorbox embed code on Wix.


Step 6

When the donation form appears, expand the code box to ensure that the entire form is visible.

Screenshot showing how to paste Donorbox HTML code on Wix.

 


Step 7

Publish your page and wait for the donations to come in!

You also have the option of installing a donation button, if you prefer. A donation button will only deploy your form when it is clicked. Check out this tutorial for step-by-step instructions.

Screenshot of a Donorbox donation form on Wix.

Note: Wix also provides SSL security across all their websites.


The Issue with Resizing Donation Forms on Wix Sites

Due to Wix’s iFrame embed policy, Donorbox cannot adjust the actual height or width of the donation widget container on Wix sites. So, if your widget container is smaller than the Donorbox donation form, a scrollbar will be displayed.

The scroll bar won’t block the donor from continuing with the donation. But, it can look somewhat unpolished and force the donor to scroll a bit to make their way through your form.

To get around this issue, we recommend that you increase the height or width of the widget container, using Wix’s site editor. This ensures that the donation form will have enough room to be displayed without the need for a scroll bar.

Screenshot shows how to expand the iFrame for your Donorbox donation form on Wix.


Wix Donation Form Example

Tori Keen

Tori Keen was the city council candidate from Atascadero in 2020. She set up a donation page on her official website to strengthen her mission with donations from her supporters.

Here’s how the embedded Donorbox donation form looks on this Wix website.

wix donation form

This simple, recurring donation form gives people a convenient way to help and support the cause that they believe in.


More Helpful Resources to Help You Fundraise

We’ve included additional articles below to maximize your fundraising capabilities using Donorbox.

Happy fundraising!

Related Articles:

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 a 30min Demo to see how Donorbox can help you reach your fundraising goals!
.brave_popup #brave_element--NNN3oo2Vl6_Qoue46FF.brave_element.brave_element--button .brave_element__styler .brave_element__button_text { border-bottom: 1px solid #fff; } #brave_popup_51310__step__0 #brave_element--NNN3oo2Vl6_Qoue46FF { text-align:left; } #brave_popup_51310__step__0 #brave_element--NNN3oo2Vl6_Qoue46FK { z-index: 6 !important; left: 232px !important; } const _sticky_bravepop_id = 51310;
Join a 30min Live Demo to see how Donorbox can help you reach your fundraising goals!