How to Add a Custom Contact Form to Squarespace
Squarespace's built-in forms store submissions inside Squarespace. Here's how to use a Code Block to add a custom form with AI spam filtering, webhooks, and a proper submission dashboard.
How to Add a Custom Contact Form to Squarespace
Squarespace includes a form block, but submissions are stored inside Squarespace — there's no API to read them, and exporting requires a manual download. With Formboost and a simple Code Block, you get AI spam filtering, email notifications, webhooks, and a searchable dashboard.
Note: Custom Code Blocks require a Squarespace Business plan or higher.
Step 1: Create a Formboost Endpoint
Sign up at dashboard.formboost.app and create a new endpoint. You'll get a URL like:
https://formboost.app/f/YOUR_ENDPOINT_ID
Step 2: Add a Code Block in Squarespace
- Open your page in the Squarespace editor
- Click Add Block (+) and choose Code
- Paste the following HTML into the code block:
1<form action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST"
2 style="display:flex;flex-direction:column;gap:12px;max-width:480px;">
3
4 <input
5 type="text" name="name" placeholder="Your name" required
6 style="padding:10px 14px;border:1px solid #ccc;border-radius:6px;font-size:15px;" />
7
8 <input
9 type="email" name="email" placeholder="Email address" required
10 style="padding:10px 14px;border:1px solid #ccc;border-radius:6px;font-size:15px;" />
11
12 <textarea name="message" placeholder="Your message" rows="5"
13 style="padding:10px 14px;border:1px solid #ccc;border-radius:6px;font-size:15px;"></textarea>
14
15 <button type="submit"
16 style="padding:12px 24px;background:#000;color:#fff;border:none;border-radius:6px;font-size:15px;cursor:pointer;">
17 Send Message
18 </button>
19</form>Replace YOUR_ENDPOINT_ID with your actual endpoint ID.
Step 3: Match Your Squarespace Theme
Edit the inline styles to match your site's colors. Alternatively, remove the inline styles and add CSS in Website → Pages → Website Tools → Custom CSS:
1.fb-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
2.fb-form input,
3.fb-form textarea {
4 padding: 10px 14px;
5 border: 1px solid #d1d5db;
6 border-radius: 6px;
7 font-size: 15px;
8 font-family: inherit;
9}
10.fb-form button {
11 padding: 12px 24px;
12 background: var(--tweak-color-button-background, #000);
13 color: #fff;
14 border: none;
15 border-radius: 6px;
16 font-size: 15px;
17 cursor: pointer;
18}Then add class="fb-form" to the <form> tag and remove the inline styles.
Step 4: Custom Redirect (Optional)
To redirect users to a Squarespace thank-you page after submission, add a hidden field inside the form:
1<input type="hidden" name="_redirect" value="https://yoursite.squarespace.com/thank-you" />Create a "Thank You" page in Squarespace and point the redirect at it.
Step 5: Test It
Save and publish your page. Submit the form — you'll see the entry in your Formboost dashboard and receive an email notification within seconds.
Squarespace Form vs. Formboost
| Feature | Formboost | Squarespace Form |
|---|---|---|
| AI spam filtering | Yes | No |
| Submission API | Yes | No |
| Webhooks | Yes | No |
| Slack / Discord alerts | Yes | No |
| Export to CSV | Yes | Yes (manual only) |
| Custom redirect | Yes | Yes |