Squarespace Integration

Add webhooks, file uploads, and API access to your Squarespace site using Code Blocks.

Quick Setup

1. Create an Atlas Form

Create a project and form

Copy your form endpoint URL

2. Add Code Block

In Squarespace:

Edit your page

Add a Code Block

Paste your form HTML

3. Form HTML

html

<form action="https://atlasforms.app/f/abc123xyz" method="POST">
  <div class="field-element">
    <label>Name</label>
    <input type="text" name="name" required>
  </div>

  <div class="field-element">
    <label>Email</label>
    <input type="email" name="email" required>
  </div>

  <div class="field-element">
    <label>Message</label>
    <textarea name="message" rows="4"></textarea>
  </div>

  <button type="submit" class="sqs-block-button-element">
    Send Message
  </button>
</form>

Styling

Use Squarespace's CSS classes to match your site's style:

css

/* Add to Design → Custom CSS */
.field-element {
  margin-bottom: 1rem;
}
.field-element label {
  display: block;
  margin-bottom: 0.5rem;
}
.field-element input,
.field-element textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
}

What You Get

Webhook notifications

File uploads on any plan

API access to submissions

Spam protection

Custom success redirects

Resources

Atlas Webhooks Guide

File Uploads Guide

Webflow Framer