How To Install Modal Popup Donation Forms On Squarespace

In order to make our checkout process even faster, Donorbox supports modal popup donation forms. This feature allows your donation form to pop up on the same screen. A donate button will be installed on your web page. When someone clicks it, the popup form will appear, instead of redirecting your donors to a separate donation…

2 minutes read
How To Install Modal Popup Donation Forms On Squarespace

In order to make our checkout process even faster, Donorbox supports modal popup donation forms. This feature allows your donation form to pop up on the same screen. A donate button will be installed on your web page. When someone clicks it, the popup form will appear, instead of redirecting your donors to a separate donation page.

If you’d rather embed a whole donation form into your Squarespace web page, check out our guide here.

This guide will walk you through how to install a popup donation form on your Squarespace website.

If you prefer, you can watch our integration video guide — it will walk you through the donation form integration process in just under 2 minutes!


How to Install a Popup Donation Form on Squarespace [Step-by-Step]


Step 1

Go to your Donorbox campaigns page and find your desired campaign. Click the ‘<>Embed Codes’ button.

donation forms for squarespace


Step 2

You can edit some of the default settings in your form here, like setting a default donation amount or recurring option. As you change the settings, you will see the code automatically adjust itself.

When you’re happy with the settings, select and copy the code. This code will be pasted on your site later on.

squarespace donations form


Step 3

Head over to your Squarespace editor. Click the “Pages” button in the left-hand sidebar.

sqaurespace donations


Step 4

Click the “+” button to create your new donation page.

donation form on squarespace


Step 5

Select the type of page you wish to create. We will be using a classic page layout.

squarespace donation forms


Step 6

Name your new page, then click the “Start Editing” button.

donation forms on squarespace


Step 7

Add a blank section to your page and then click the ‘+’ icon inside the text box or over any section. This will open up a list of content blocks.

donation forms on squarespace


Step 8

Scroll down to the “More” section of the elements list and choose the “Code” block.

donation forms on squarespace


Step 9

Paste the donate button embed code into the appropriate textbox. Click “Apply”.

donation forms for squarespace


Step 10

Your Squarespace donate button should now appear in your website editor. Click the “Save” button on the top left.

donation forms on squarespace


Step 11

Your new donation page is all set! Here is an example of what your new page and button should look like:

donation forms on squarespace

When you click on your donate button, the modal popup form for your Donorbox campaign should appear on the same screen, making the checkout process even faster for your donors!

donation forms on squarespace

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!