Squarespace makes it easy to build a beautiful website.
But when it comes to forms, a lot of users hit a wall quickly.
The native Squarespace form block is fine for simple contact
forms. But the moment you need something more dynamic. Fee
calculations, multi-section registration forms, and custom email
formatting, or more than 30 fields, the native block runs out
of the road fast.
Squarespace recommends adding no more than 30 fields to keep
a form that is user-friendly and quick to load, and that's the
hard limit for forms connected to Mailchimp. For anyone running
event registrations, membership applications, or client intake
forms, 30 fields are not enough.
In this guide, you'll learn how to add a fully custom HTML form
to your Squarespace site using a code block with dynamic
calculations, custom email notifications, and spam protection
included using Formgrid.dev.
Why Squarespace's Native Form Isn't Always Enough
Squarespace's built-in form block covers the basics well. But
here are the most common reasons people look for something more:
Limited email formatting: The notification email you
receive when someone submits is a basic field dump. You can't
control how it looks, how fields are grouped, or what the
subject line says. If you're forwarding submissions to a
client or a non-technical colleague, it looks messy.
No dynamic calculations: Squarespace's native form block
cannot calculate totals, apply pricing tiers, or update
fees dynamically as users fill in the form. You need a
custom HTML form with JavaScript for that and which is
exactly what this guide shows you how to build.
30 field limit: Complex registration forms, event entries,
and application forms often need more than 30 fields.
Unreliable email notifications: Squarespace forum users
regularly report form notifications not being delivered to
their email at all, with no clear explanation from the platform.
No submission dashboard: Squarespace stores submissions, but the interface for reviewing them is limited. No search,
no filtering, no CSV export on lower plans.
If any of those hit home, keep reading.
The Solution: A Custom HTML Form in a Squarespace Code Block
Squarespace allows you to embed custom HTML, CSS, and
JavaScript directly into any page using a Code Block.
This means you can build a fully custom form with any
fields, any layout, any logic, and embed it on your
Squarespace page.
The only thing a custom HTML form needs is a backend to
receive submissions, send email notifications, and store
the data. That's exactly what
Formgrid.dev provides.
Why Use Formgrid.dev
Formgrid is a privacy-first form
backend that works with any HTML form on any website,
including Squarespace.
Free plan includes:
- Unlimited forms
- 50 submissions/month
- Email notifications on every submission
- Built-in spam protection (honeypot + rate limiting)
- Submission dashboard
Premium plan: $8/month
- 5,000 submissions/month
- File uploads
- Custom redirect after submission
- Webhook support
Business plan: $19/month
- 15,000 submissions/month
- Custom branded email templates
- Priority support
Unlike Squarespace's native form, Formgrid lets you control
exactly how your notification email looks with proper
sections, headers, and formatting that even a non-technical
recipient can read clearly.
Step-by-Step: Adding a Custom Form to Squarespace
Step 1: Create Your Formgrid Account
Head to https://formgrid.dev and
sign up using Google or Email.
No credit card required. You're on the free plan immediately.
Step 2: Create a New Form
Once logged in, click New Form from your dashboard.
Give your form a descriptive name:
- "Contact Form"
- "Event Registration"
- "Client Intake Form"
Click Create Form.
Step 3: Copy Your Endpoint URL
Go to the Overview tab and copy your unique
endpoint URL.
It looks like this:
https://formgrid.dev/api/f/your-form-id
This is the URL your HTML form will submit data to.
Step 4: Open Your Squarespace Page Editor
In your Squarespace dashboard:
- Go to Pages
- Open the page where you want the form
- Click Edit
- Click the + button to add a new block
- Select Code from the block options
This opens a code editor where you can paste raw HTML,
CSS, and JavaScript.
Step 5: Paste Your Custom Form
Here is a clean, ready-to-use contact form. Paste this
into your Squarespace code block and replace
YOUR_FORMGRID_ENDPOINT_URL with your endpoint from Step 3:
<style>
.fg-form {
max-width: 600px;
margin: 0 auto;
font-family: inherit;
}
.fg-form .fg-field {
margin-bottom: 20px;
}
.fg-form label {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.fg-form input,
.fg-form textarea,
.fg-form select {
width: 100%;
padding: 12px 14px;
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
box-sizing: border-box;
}
.fg-form textarea {
min-height: 120px;
resize: vertical;
}
.fg-form button {
background: #1d4f3d;
color: #fff;
border: none;
padding: 12px 28px;
border-radius: 999px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
}
.fg-status {
margin-top: 16px;
font-size: 0.95rem;
}
</style>
<form id="fg-contact-form"
class="fg-form"
action="YOUR_FORMGRID_ENDPOINT_URL"
method="POST">
<div class="fg-field">
<label for="name">Your Name</label>
<input type="text"
id="name"
name="name"
placeholder="John Doe"
required />
</div>
<div class="fg-field">
<label for="email">Email Address</label>
<input type="email"
id="email"
name="email"
placeholder="john@example.com"
required />
</div>
<div class="fg-field">
<label for="message">Your Message</label>
<textarea id="message"
name="message"
placeholder="How can I help you?"
required></textarea>
</div>
<!-- Honeypot spam protection — invisible to humans -->
<input type="text"
name="_honey"
style="display:none"
tabindex="-1"
autocomplete="off" />
<!-- Optional: redirect after submission -->
<input type="hidden"
name="_redirect"
value="https://yoursite.com/thank-you" />
<button type="submit">Send Message</button>
</form>
<p class="fg-status" id="fg-status"></p>
<script>
const form = document.getElementById('fg-contact-form');
const status = document.getElementById('fg-status');
form.addEventListener('submit', async function(e) {
e.preventDefault();
status.textContent = 'Sending...';
const data = new FormData(form);
try {
const res = await fetch(form.action, {
method: 'POST',
body: data
});
if (res.ok) {
form.style.display = 'none';
status.textContent =
'Thanks! Your message has been sent.';
} else {
status.textContent =
'Something went wrong. Please try again.';
}
} catch (err) {
status.textContent =
'Network error. Please check your connection.';
}
});
</script>
Click Apply in Squarespace to save the code block.
Step 6: Email Notifications Are Already Set Up
Formgrid automatically uses the email address you signed
up with as your default notification address. The moment
someone submits your form, the alert goes straight to
your inbox — no extra configuration needed.
If you want submissions sent to a different email,
a client's address or a team inbox, go to your form's
Settings tab and update it under
Email Notifications.
Every submission email includes the submitter's name,
email, message, and timestamp, cleanly formatted and
easy to read.
Step 7: Test Your Form
Preview your Squarespace page and submit a test entry.
Within seconds, you should receive:
- A notification email in your inbox
- The submission is logged in your Formgrid dashboard
If the email doesn't arrive, check your spam folder and
confirm the notification email is saved in your form
settings.
Step 8: View All Submissions
All submissions are stored in your Formgrid dashboard.
Go to the Submissions tab to view, search, and
export as CSV at any time.
Nothing gets lost even if an email slips into spam.
Building a More Complex Form
The example above is a basic contact form. But because
you're writing raw HTML and JavaScript, you can build
anything, multi-section registration forms, dynamic
fee calculators, conditional fields, and file uploads.
Here's a quick example of a registration form with
a dynamic total calculation:
<form id="fg-reg-form"
class="fg-form"
action="YOUR_FORMGRID_ENDPOINT_URL"
method="POST">
<input type="hidden" name="_subject"
id="subjectField" />
<div class="fg-field">
<label for="regName">Full Name</label>
<input type="text" id="regName"
name="regName" required />
</div>
<div class="fg-field">
<label for="regEmail">Email Address</label>
<input type="email" id="regEmail"
name="regEmail" required />
</div>
<div class="fg-field">
<label for="ticketType">Ticket Type</label>
<select id="ticketType" name="ticketType"
class="fee-input">
<option value="0">Select ticket</option>
<option value="50">Standard - $50</option>
<option value="25">Early Bird - $25</option>
</select>
</div>
<div class="fg-field">
<strong>Total: <span id="totalDisplay">
$0.00
</span></strong>
<input type="hidden" id="totalField"
name="totalAmount" />
</div>
<!-- Honeypot -->
<input type="text" name="_honey"
style="display:none" tabindex="-1" />
<button type="submit">Register</button>
</form>
<script>
function formatCurrency(val) {
return new Intl.NumberFormat('en-US', {
style: 'currency', currency: 'USD'
}).format(val || 0);
}
function updateTotal() {
const fees = Array.from(
document.querySelectorAll('.fee-input')
);
const total = fees.reduce(function(sum, el) {
return sum + (parseFloat(el.value) || 0);
}, 0);
document.getElementById('totalDisplay')
.textContent = formatCurrency(total);
document.getElementById('totalField')
.value = formatCurrency(total);
}
document.querySelectorAll('.fee-input')
.forEach(function(el) {
el.addEventListener('change', updateTotal);
});
document.getElementById('fg-reg-form')
.addEventListener('submit', function() {
const name = document.getElementById('regName')
.value || 'Unknown';
const total = document.getElementById('totalField')
.value || '$0.00';
document.getElementById('subjectField').value =
'Registration - ' + name + ' - ' + total;
});
</script>
This gives you a fully dynamic registration form with
real-time fee calculation. Something Squarespace's
native form block simply cannot do.
Spam Protection: What's Already Included
Formgrid includes two layers of spam protection
out of the box:
Honeypot field: a hidden input that real users
never see or fill in. Bots that auto-fill every field
get caught immediately. You added this with
name="_honey" in the form above.
Rate limiting: Formgrid automatically blocks
repeated submissions from the same IP address,
stopping bot floods before they reach your inbox.
When to Use a Form Service vs Squarespace's Native Form
Use a custom form with Formgrid if:
- You need more than 30 fields
- You need dynamic calculations or conditional logic
- You want full control over how your notification email looks
- You need a reliable submission dashboard with search and CSV export
- You're building a registration or application form with multiple sections
Use Squarespace's native form if:
- You just need a simple 3-5 field contact form
- You don't need dynamic logic or calculations
- Basic email notifications are sufficient
Final Thoughts
Squarespace is one of the best website builders available
but its native form block has real limitations for anyone
running complex forms. The good news is that Squarespace's
code block gives you complete freedom to embed any HTML
form you want — and Formgrid handles everything on the
backend.
With Formgrid.dev you get:
✅ Custom HTML forms on any Squarespace page
✅ Dynamic calculations and multi-section layouts
✅ Instant email notifications
✅ Built-in spam protection
✅ A clean submission dashboard
✅ No backend required
Free to start. No credit card required.
Top comments (0)