Embed a donation form on Squarespace
Before you start
The first step is to create an embedded donation form on GoFundMe Pro.
To embed a donation form on your Squarespace site:
- Safelist your website
- Install the code snippet
- Add the donation form to a page
Safelist your website
To make sure your embedded form appears, safelist your website. If you need to add multiple domains (such as a test site or sandbox), follow these steps:
- Go to the Settings tab in the Studio designer
- Select Install
- Under Safelisted domains, add the URL of each website where you plan to embed the form
- Publish or Update your campaign to push through the changes
Install a code snippet
The Install snippet is a script that lets embedded campaigns appear on your site. You only need to add it once to your website’s <head> section, where it will work for all embedded campaigns.
Important: Only add one Install snippet. Multiple snippets may slow down your website.
To copy the Install snippet:
- Go to the campaign’s Settings tab
- Select Install
- Next to Install snippet, select Copy
Next, add the Install snippet to your Squarespace site:
- Go to Squarespace site editor
- Select Pages
- Select Website tools
- Under Custom code, select Code injection
- Under Header, paste the Install snippet and save
Now, you can add as many embedded campaigns as you need across your site.
Add the donation form to your website
With the Install snippet added, you’re ready to embed your donation form. You can place the form directly on the page or attach it to a button.
Options for embedding the donation form:
- Donate button: Link a button that opens the embedded form when selected.
- Inline donation grid: Embed the form directly on the page.
To attach the form to a donate button:
- In your campaign’s Install page, select Copy campaign parameter
- Go to your Squarespace site’s editor
- Select your donate button
- Select the link icon
- Add a backslash and paste in the parameter (E.g.,
/?campaign=12345)
Important: Without the backslash, Squarespace will automatically adjust the parameter and it won’t open your campaign.
To embed the form on a page:
- In your campaign’s Install page, select Copy inline embed code
- Go to your Squarespace site’s editor
- Add a Code block where you want to place the form
- Resize the block to fit your form
- Paste the embed code into the block
- Save and exit
Legacy embedded forms
If you’re using a legacy form—popup or inline—consider upgrading to Embedded Studio to access GoFundMe Pro's newest tools and features.
Add a popup embed
To attach the form to a donate button:
- In your campaign’s Install page, select Copy campaign parameter
- Go to your Squarespace site’s editor
- Select your donate button
- Select the link icon
- Add a backslash and paste in the parameter (E.g.,
/?campaign=12345)
Important: Without the backslash, Squarespace will automatically adjust the parameter and it won’t open your campaign.
Add an inline embed
- Go to your Squarespace site’s editor
- In the section where you want to embed your donation form, select + Add Block
- Select
</> Code - Resize the code block to fit your form
- Enter
<div class="classy-inline-embed"></div>into your code block - In the code snippet, replace
SELECTOR FROM YOUR WEBSITEwith.classy-inline-embed
You are all set! Make sure to review your donation form to ensure it appears as expected. If your donation form has scrollbars, you need to increase the size of your custom block. If you need additional help, visit our troubleshooting guide.
Want to add another campaign to your website?
You can include a pop-up and an inline embedded campaign on your website. However, for legacy embedded forms, you need to edit the code embedded in your footer to accommodate two campaigns. Simply adding another code embed won't work.
Learn how to add multiple campaigns to your website
Troubleshooting
Check out our troubleshooting article for help when you run into any issues.
Frequently asked questions
Why doesn't the popup or inline form appear in my Squarespace preview?
Embedded donation forms require you to safelist each URL where you plan to view the form, including your Squarespace site's preview URL.
For example, if my Squarespace site's URL is https://GoFundMePro.com, I'll also need to safelist https://GoFundMePro.squarespace.com to view my donation form in Squarespace's preview.
What should I do if my form still won't load?
If your form isn't loading, you might try turning off Ajax on your site. Ajax is a Squarespace feature designed to make pages load faster, but it can sometimes cause issues with embedded forms. Deactivating Ajax has helped some users resolve this problem.