Add forms to Squarespace

Use a Code block or Markdown block to add your form to any Squarespace page.

Method 1: Code block

The Code block lets you add raw HTML directly to a Squarespace page. This is the best option for full control over your form.

  1. Open the page in the Squarespace editor.
  2. Click Add Block (or click a + insertion point).
  3. Select Code from the block menu.
  4. Paste your FormBlade form HTML into the code editor.
  5. Make sure Display Source is toggled OFF.
  6. Click outside the block to close the editor.
  7. Click Save to publish your changes.

Example form with styling that blends well with Squarespace themes:

<form action="https://formblade.com/f/contact" method="POST"
  style="max-width:500px;font-family:inherit">

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:.3px">Name</label>
    <input type="text" name="name" required
      style="width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:4px;font-size:15px;font-family:inherit">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:.3px">Email</label>
    <input type="email" name="email" required
      style="width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:4px;font-size:15px;font-family:inherit">
  </div>

  <div style="margin-bottom:16px">
    <label style="display:block;font-size:14px;font-weight:600;margin-bottom:6px;letter-spacing:.3px">Message</label>
    <textarea name="message" rows="5" required
      style="width:100%;padding:12px 14px;border:1px solid #d1d5db;border-radius:4px;font-size:15px;font-family:inherit;resize:vertical"></textarea>
  </div>

  <button type="submit"
    style="background:#000;color:#fff;border:none;padding:14px 32px;border-radius:4px;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.3px">
    Submit
  </button>
</form>

Replace /f/contact with your own form link from the dashboard.

Note: Code blocks require a Business or Commerce plan on Squarespace. They are not available on Personal plans. If you are on the Personal plan, use the iframe method below.

Method 2: Markdown block with iframe (all plans)

If you are on a Squarespace Personal plan or simply prefer a simpler setup, you can embed your FormBlade hosted form using an iframe inside a Markdown block.

  1. Make sure your form has hosted fields configured in the FormBlade dashboard (so it renders a full form page).
  2. In the Squarespace editor, click Add Block → Markdown.
  3. Paste the following iframe code:
<iframe
  src="https://formblade.com/f/contact"
  width="100%"
  height="500"
  frameborder="0"
  style="border:none;max-width:600px">
</iframe>

Replace /f/contact with your own form link from the dashboard.

  1. Click Apply and then Save the page.
Tip: The Markdown block supports raw HTML and works on all Squarespace plans. Adjust the height value to match your form's length.

Tips

Match your Squarespace theme

Use font-family: inherit on the form and inputs so the form picks up your Squarespace site's typography. Keep button colors consistent with your site's accent color. Squarespace themes tend to use clean, minimal design, so simple styling works best.

Set a redirect URL

After submission, you probably want users to stay on your Squarespace site rather than seeing the default FormBlade thank-you page. In your FormBlade form settings, set the Redirect URL to a page on your site, for example https://yoursite.com/thank-you. Create that page in Squarespace first.

Troubleshooting

Code block is not available

You are likely on the Squarespace Personal plan, which does not include Code blocks. Upgrade to the Business plan to use Code blocks, or use the Markdown block with iframe method described above, which works on all plans.

Form appears as code text on the page

The Display Source toggle is turned ON in your Code block. Edit the block and toggle Display Source to OFF. When it is on, Squarespace renders the HTML as visible text instead of executing it. Once you turn it off, the form will render as an interactive form.