With Donorbox, you can easily add a custom Contact Collection Form to your website built on Squarespace, one of the most popular and beginner-friendly website builders available.
This guide will walk you through the steps to embed a Donorbox Contact Collection Form directly onto your Squarespace site, allowing visitors to seamlessly submit their information without ever leaving your webpage.
Step 1 - Create a new Contact Collection Form
From your Donorbox dashboard, open the Engage section on the left-hand rail and select "Forms."Then click "+ New Form."
Step 2 - Complete the form settings
On the Settings screen, add the basic information for your form:
- Form Name - Enter a name that will help your team identify the form. This name is only visible internally.
- Description - Add an optional internal description.
- Form Language - Choose the language for the form.
- Dynamic List - Choose whether Donorbox should create a dynamic List of contacts captured through this form.
- Double Opt-In - If enabled, supporters must confirm their email subscription before they become active email subscribers.
Click "Next" when you are ready to continue.
Step 3 - Choose the form content and information to collect
Add the content visitors will see on the form. You can enter an optional title and body message that explain why someone should stay connected with your organization.
Click "Next” to continue
Next, choose the supporter information you want to collect. Full name and email are included by default. You can also collect a phone number and mailing address, and you can make the optional fields required if needed.
Click "Next” to continue.
Step 4 - Customize the appearance and confirmation message
On the Appearance step, customize the form’s submit button and the message supporters see after they submit the form. You can change the button text and color, then add an optional post-submission title and message.
Click “Next” when you are finished.
Step 5 - Preview and save the form
Review the form preview to make sure the content, fields, consent language, and button look the way you expect. When everything looks right, click "Save."
Step 6 - Copy the embed code
Open the Contact Collection Form you created and locate the "Embedded Form" section. Scroll below the form preview to the "Embed Code" area, then click "Copy Code."
Step 7 - Add the code to Squarespace
7.1 Open your Squarespace Pages editor, then either set up a new donation page or pick an existing one to embed the recurring donation form (make sure to open the main content box if using an existing page).
7.2 Click directly on the page to view the settings menu.
7.3 Select the option to "+ ADD a BLOCK."
7.4 Click on the pencil icon to "Edit "the block.
7.5 Scroll down and select the "Embed" option
7.6 In the new window that appears, choose "Code Snippet."
7.7 Click on "Embed Data."
7.8 Paste the integration code you previously copied from Donorbox.
Customize your page, adjust the height, and remember to save and publish your changes.
Step 8 - Test the form on your live site
Everything is ready! Now you can go ahead and publish your updated Squarespace site to start receiving donations. Below is an illustration of how the form might appear live on your website: