Add a custom contact form to Squarespace with a Code Block
To add a custom contact form to Squarespace, put a Code Block on the page and paste in the HTML below, which posts to FormThunder. Use it when the built-in Form Block falls short: you need signed webhooks, chat delivery, a visible delivery log or emails that match your brand. Code Blocks depend on your Squarespace plan, so check yours includes them.
Updated
The Squarespace code
- Edit the page, add a Code Block, and leave the mode on HTML.
- Paste the code, change the redirect to a page you've created, and save.
- Log out or use a private window, then send a test. Scripts and some embeds don't run while you're in the editor.
<form action="https://formthunder.com/submit" method="POST" class="tf-form">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="subject" value="New message from the website">
<input type="hidden" name="redirect" value="https://yoursite.com/thank-you">
<input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off">
<label for="name">Name</label>
<input id="name" name="name" required>
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
<button type="submit">Send</button>
</form>.tf-form { display: grid; gap: 8px; }
.tf-form input:not([type="checkbox"]), .tf-form textarea {
width: 100%; padding: 12px; border: 1px solid #d4d4d8; border-radius: 8px; font: inherit;
}
.tf-form button { padding: 12px 20px; background: #111; color: #fff; border: 0; border-radius: 8px; font: inherit; }Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.
Notes for Squarespace
- Squarespace's Form Block can't change its POST target, so this replaces it rather than extending it.
font: inheritin the CSS is what makes the form pick up your site's font.- If you've built with Fluid Engine, make the Code Block tall enough, because content past its height can be clipped on mobile.
Or have your AI add it
Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.
Add a FormThunder contact form to this Squarespace site that emails hello@example.com. Send a test when you're done.Questions
Can I keep using the Squarespace Form Block?
Yes, for simple cases. This is for when you want deliveries beyond what it offers. Squarespace can't send its Form Block to FormThunder directly.
Will the form's messages show in Squarespace?
No. They'll be in the FormThunder dashboard and your email.
Get your Squarespace form sending
The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.