How to Add a Custom Contact Form to Squarespace 2026

Form Block or a custom form: which one you need

Squarespace's built-in Form Block emails you each submission and is the easiest option for a single basic contact form. Squarespace's pricing page (checked 2026-11-01) lists the basic Code Block (HTML, plain text, markdown, CSS) on every plan, and the advanced Code Block (iFrames, JavaScript) and Code Injection only on Core, Plus, and Advanced, so a plain HTML form works on any plan.

A custom HTML form posting to a form backend makes sense when you want any of these:

• Exact markup. Your own fields, labels, and CSS, including dropdowns and file inputs.
• A separate submissions dashboard. Searchable, and not tied to one Squarespace site.
• Spam rules you can see. Honeypot, load-time trap, per-IP rate limits, and rule-based scoring.
• Signed webhooks. HMAC-SHA256-signed delivery to Slack, Notion, Sheets, or your own server on paid plans.

If none of those matter, the Form Block is fine. If they do, the rest of this guide is the full build.

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 500 submissions total, with owner email delivery, rule-based spam scoring, and a hosted dashboard. No credit card. Pro adds signed webhooks at $5/month for 5,000 submissions a month, or Annual is $49/year for 15,000 a month if you prefer yearly billing. 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 the dumb scripted 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)

These steps follow Squarespace's Code Blocks help article (checked 2026-11-01). The plain HTML form works on any plan; JavaScript in a code block needs Core, Plus, or Advanced.

1. Open the page where you want the form (Contact page, About page, a footer section) and click Edit.
2. Hover over the section, click Add Block or the + icon, and select Code.
3. Click the pencil icon on the new block to open the block editor.
4. Set the Mode menu to HTML. In CSS, JavaScript, or Plain Text mode Squarespace shows the code as text instead of running it.
5. Paste the form HTML from Step 2 and leave Display Source switched off.
6. Close the editor and click Save.

The form renders inline with your page content. Squarespace caps a single code block at 400 KB (about 300,000 characters), far more than any contact form needs.

When the form still doesn't render

Squarespace notes that custom code might not render on a page inside an index page, or when Ajax loading is on. If the editor shows the form but the live page doesn't, move the Code Block to a regular page or turn off Ajax loading, then republish.

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 rule-based spam scoring 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 the dumb bots that fill every field.
2. Rule-based spam scoring (free tier). splitforms scores every submission for spam likelihood against a fixed set of server-side rules — link count, spam phrases, disposable-email domains, gibberish text, suspicious TLDs — not a trained model. Anything above the threshold goes to a quarantine view in your dashboard, not your inbox.
3. Rate limiting, built in: up to 6 submissions a minute and 20 per 15 minutes from one IP to the same form, then HTTP 429 — no configuration needed. 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. A visible reCAPTCHA challenge adds friction for real visitors, so turn on reCAPTCHA v2 from the dashboard only if spam still gets through.

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 splitforms dashboard and the inbox attached to your splitforms account for the submission.
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 block's Mode is not HTML, or Display Source is on. Open the block with the pencil icon, set Mode to HTML, switch Display Source off, and save.
• 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 doesn't run. Confirm Mode is HTML and the site is on Core, Plus, or Advanced (Squarespace requires one of those for JavaScript in a code block). The form itself needs no script, so it still submits.
• 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 hello@splitforms.com with your form URL and the first 6 chars of your access key — I'll look at it directly.

Want the no-code version? See the Squarespace contact form setup page →

Add a contact form to another platform

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