How to Add a Custom Contact Form to Squarespace 2026

Why Squarespace's built-in Form Block isn't enough

Squarespace's native Form Block looks fine until you try to do anything real with it. Here's what it can't do without a Business plan ($23/mo as of 2026-05) or above:

• No custom fields beyond the basics. The free Personal plan limits you to name, email, and a single message field. Need a phone number, dropdown, or a project budget select? Business plan only.
• No webhooks. You can't push submissions to Slack, Discord, a CRM, or your own server. Period. Even on Business, webhook delivery is opaque and there's no signing header.
• No file uploads on Personal. Anything with attachments forces a plan upgrade.
• No spam filtering you control. Squarespace bundles a basic honeypot. No AI classification, no keyword rules, no IP throttling.
• Submissions live inside Squarespace. If you ever leave the platform, your form data goes with it — and the export is per-form, not bulk.

None of these are dealbreakers if you're a hobbyist with three submissions a month. But the moment you need a select dropdown, a phone field, or a webhook to your CRM, the Form Block stops being free. Embedding a splitforms form bypasses every limit — and it works on the cheapest Squarespace plan, including the 14-day trial.

Step 1: Get a splitforms access key (1 minute)

Open splitforms.com/login, enter your email, paste the 6-digit code you receive, and you're in. The dashboard auto-generates your access key on first load. Copy it.

The free tier is 1,000 submissions/month, includes free webhooks, AI spam classification, and a hosted dashboard. No credit card. If you outgrow it, Pro is $5/month for 5,000 submissions, or $59 for 4 years if you want to lock in the price. That's the entire plan ladder — see /faq for the full breakdown.

One key works across every form on your Squarespace site. If you want per-form stats, create one access key per page in the dashboard — same setup, just different keys.

Step 2: Build the HTML form

Here's the exact HTML you'll paste into Squarespace. Replace YOUR_ACCESS_KEY with the key you copied from the dashboard. Don't add any inline styles yet — we'll let it inherit Squarespace's theme typography first, then customize.

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="New contact from your Squarespace site" />
  <input type="hidden" name="redirect" value="https://yoursite.com/thank-you" />

  <label>
    Name
    <input type="text" name="name" required autocomplete="name" />
  </label>

  <label>
    Email
    <input type="email" name="email" required autocomplete="email" />
  </label>

  <label>
    Message
    <textarea name="message" rows="5" required></textarea>
  </label>

  <!-- Honeypot: bots fill this, real users don't see it -->
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" autocomplete="off" />

  <button type="submit">Send message</button>
</form>

Three things to notice:

1. Action URL is hardcoded to https://splitforms.com/api/submit — this is the same endpoint for every splitforms form regardless of plan.
2. Hidden access_key tells splitforms which account to deliver to.
3. Honeypot (botcheck) catches roughly 95% of dumb spam without bothering real users. More on this in honeypot vs reCAPTCHA.

If you're embedding this on a Next.js, React, Astro, Vue, or Svelte site separately, the same HTML works — see the platform-specific guides at /forms/nextjs, /forms/react, or /forms/astro.

Step 3: Embed in Squarespace (Code Block method)

This is the path that works on every Squarespace plan, including the free trial. No Business upgrade required.

1. Open your Squarespace editor and navigate to the page where you want the form (Contact page, About page, footer — wherever).
2. Click Edit on the section that should contain the form.
3. Hover between two existing blocks until you see the blue insertion line, then click the + icon.
4. Search for Code in the block picker and select Code Block.
5. In the Code Block editor that opens, make sure the dropdown is set to HTML (not Markdown).
6. Paste the form HTML from Step 2. Leave the Display Source checkbox unchecked.
7. Click Apply, then Save at the top of the editor.

That's it. The form renders inline with your page content and inherits Squarespace's typography automatically.

Alternative: page-level Code Injection

If the Code Block strips part of your HTML (rare, but possible on older Squarespace 7.0 templates), use page-level Code Injection instead:

1. Pages panel → click the gear icon next to your page
2. Advanced tab → Page Header Code Injection
3. Paste a small <style> block plus a placeholder <div id="sf-form"></div> on the page where you want it
4. Use a script in Page Footer Code Injection to inject the form HTML into that div

For 99% of users, the Code Block path is enough. Reach for Code Injection only if Squarespace sanitizes something.

Customization: fonts, colors, validation

By default the form inherits your Squarespace theme — body font, link color, button hover state. That's usually what you want. If you need to nudge things:

<style>
  /* Scope everything under .sf-form so it doesn't leak */
  .sf-form { max-width: 560px; margin: 0 auto; }
  .sf-form label { display: block; margin: 14px 0; font-weight: 600; }
  .sf-form input, .sf-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font: inherit; /* inherits Squarespace body font */
  }
  .sf-form input:focus, .sf-form textarea:focus {
    outline: 2px solid #0a7;
    border-color: transparent;
  }
  .sf-form button {
    padding: 12px 24px;
    background: #0a7; /* match your Squarespace accent */
    color: white;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
  }
</style>

<form class="sf-form" action="https://splitforms.com/api/submit" method="POST">
  <!-- same fields as before -->
</form>

For the button color, open Squarespace's Site Styles panel, find your primary accent color hex value, and paste it into the background property. Same trick for fonts — Squarespace exposes font-family: inherit via the section, so you usually don't need to name a font explicitly.

Validation

Browser-native validation handles 90% of cases. required blocks empty submits. type="email" rejects invalid email syntax. minlength and maxlength enforce length. pattern="[0-9]{10}" enforces a 10-digit phone. No JavaScript needed. Server-side, splitforms also validates the access key, checks honeypot fields, and runs AI spam classification before delivery.

Spam protection that works on Squarespace

Three layers, in order of effectiveness:

1. Honeypot field (already in the HTML above). The botcheck input is hidden via CSS. Real users never see it, never fill it. Bots scrape the HTML and fill every input — splitforms drops any submission where botcheck is non-empty. Catches ~95% of dumb bots.
2. AI spam classification (free tier). splitforms scores every submission for spam likelihood using a model trained on form-spam patterns. Anything above the threshold goes to a quarantine view in your dashboard, not your inbox.
3. Rate limiting (per access key). Configure max submissions per minute / hour in the dashboard. Stops a script that found your form from hammering you.

You don't need reCAPTCHA on a Squarespace contact form — full breakdown in honeypot vs reCAPTCHA. reCAPTCHA tanks conversion (visible challenge kills 5-15% of legit submitters) and the silent v3 version requires JavaScript that Squarespace's Code Block sometimes strips.

Mobile UX: preview before you publish

Squarespace renders Code Blocks inside its responsive grid, so the form is mobile-friendly by default. But a few common mistakes break that:

• Fixed-width inputs. If you set width: 400px on a 375px iPhone viewport, the form overflows and forces horizontal scroll. Always use width: 100% with a max-width on the wrapper.
• Tiny touch targets. Buttons under 44px tall are hard to tap. Pad them: padding: 12px 24px as a floor.
• No autocomplete hints. Add autocomplete="name", autocomplete="email", autocomplete="tel" so iOS/Android offer the user's saved data. Massive conversion win.
• Email keyboard not triggering. Use type="email" not type="text". Same for type="tel" on phone fields.

In the Squarespace editor, click the phone icon in the top toolbar to see the mobile preview. Submit a test message in that view to confirm the keyboard pops the right layout. After publishing, test on a real device too — the editor approximates but doesn't perfectly match real iOS Safari behavior.

Publish, then test the live form

1. Click Save in the Squarespace editor, then Done to exit.
2. Open the live URL in an incognito window (avoids the logged-in editor toolbar).
3. Fill out the form with a real-looking test message. Use a real email so you can verify deliverability end-to-end.
4. Click submit. You should land on your redirect URL (or see a JSON success response if you didn't set redirect).
5. Check the inbox attached to your splitforms account — the notification email arrives in 3–8 seconds typically.
6. Open the splitforms dashboard. The submission should appear in your submissions view immediately.

If anything fails — see the troubleshooting section below. The most common cause is a typo in the access key or a Squarespace template that stripped the form's closing tag.

Troubleshooting Squarespace-specific gotchas

• Form HTML renders as plain text. The Code Block dropdown is set to Markdown, not HTML. Open the block, switch to HTML in the top-left dropdown, save again.
• Submit button does nothing on mobile. Squarespace's mobile editor sometimes wraps Code Blocks in a div with pointer-events: none if the section has an overlay. Move the Code Block into a section without a background image overlay, or set position: relative; z-index: 1 on the form wrapper.
• splitforms returns 401 Unauthorized. Wrong access key, trailing whitespace, or the key's domain restriction excludes your Squarespace URL. Re-copy from the dashboard and confirm your Squarespace domain is in the Allowed Domains list — or remove the restriction entirely while testing.
• Email never arrives but dashboard shows the submission. Your notification email landed in spam, or the SMTP configuration is wrong. Open the dashboard's deliverability page, send a test email, and check SPF/DKIM. Full diagnostic: contact form not working.
• Script in the Code Block disappeared after save. Squarespace sanitizes some <script> patterns. Move the script to Settings → Advanced → Code Injection (page-level or site-level). Code Injection isn't sanitized.
• Mobile editor shows the form but live mobile doesn't. Squarespace caches aggressively on mobile. Hard-refresh in your phone's browser (pull down to reload twice). If it still doesn't show, the section's mobile visibility toggle is off — open the section settings and confirm it's visible on all devices.
• Honeypot catches real users. A password manager auto-filled the hidden botcheck field. Add autocomplete="off" and tabindex="-1" (already in the snippet above) so managers skip it.

Still stuck? Check /docs for the full request contract, /api-reference for response codes, and /faq for plan and security questions. If the form silently fails, email support@splitforms.com with your form URL and the first 6 chars of your access key — I'll look at it directly.

Next steps

• If you're comparing tools first, see best free form backend services 2026 or the splitforms vs Formspree breakdown.
• Already using a different form backend? Migrate from Formspree in 5 minutes — the HTML changes are minimal.
• Want a copy-paste starting point? Grab a free HTML contact form template, pre-wired and ready for Squarespace.
• Browse more guides at /blog, or jump straight to signup and grab a key.

FAQ