Kantos

Add Smart Intake to your Squarespace site to capture form submissions automatically. This guide covers code injection, Form Blocks, and alternative integration methods.

What You'll Need

A Squarespace site (Business plan or higher for code injection)
Access to your Squarespace dashboard
Your Kantos organization slug

Method 1: Code Injection (Recommended)

The simplest way to add Smart Intake to Squarespace is through the built-in Code Injection feature. This adds the script site-wide.

Open Site Settings

Go to Settings in your Squarespace dashboard.

Navigate to Code Injection

Click on Advanced → Code Injection.

Add to Header

Paste the Kantos Universal Script in the "Header" section.

Save

Click Save. The script is now active on all pages.

<!-- Kantos Smart Intake -->
<script
  src="https://kantos.ai/api/intake/script/YOUR_ORG_SLUG"
  async>
</script>

Business Plan Required

Code Injection is only available on Squarespace Business, Commerce, and Professional plans. Personal plans don't have access to this feature. See Method 3 for alternatives.

Method 2: Page-Specific Code

If you only want to capture forms on specific pages, you can add code per-page:

Edit the Page

Navigate to the page with the form you want to capture.

Open Page Settings

Click the gear icon next to the page name in the Pages panel.

Go to Advanced

Click on the "Advanced" tab in page settings.

Add Header Code

Paste the Kantos script in the "Page Header Code Injection" field.

Save

Click Save. The script is now active on this page only.

Understanding Squarespace Forms

Squarespace has two types of forms that behave differently:

Form Blocks

These are Squarespace's native form builder. They use AJAX submissions and have their own handling system:

The Universal Script captures data from Form Blocks
Squarespace's built-in form handling still works (email notifications, storage)
Data is sent to both Squarespace and Kantos

Code Blocks with Custom Forms

You can add custom HTML forms using Code Blocks. These work seamlessly with the Universal Script:

Full control over form fields and styling
Better field naming for CRM mapping
No Squarespace email notifications unless configured separately

Best Results

For the most reliable integration, use Code Blocks with custom HTML forms. Form Blocks work but may have slight delays in data capture due to Squarespace's AJAX handling.

Custom Forms with Code Blocks

Create custom forms for better control and more reliable data capture:

Add a Code Block

In the page editor, click "+" and select "Code" from the blocks menu.

Paste Form HTML

Enter your custom form HTML (see example below).

Style Your Form

Add CSS to match your site design, or use Squarespace CSS Editor.

Save and Publish

Save the block and publish your site.

<form id="contact-form" class="kantos-form">
  <div class="form-field">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>

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

  <div class="form-field">
    <label for="phone">Phone</label>
    <input type="tel" id="phone" name="phone" />
  </div>

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

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

<style>
  .kantos-form {
    max-width: 500px;
  }
  .kantos-form .form-field {
    margin-bottom: 1.5em;
  }
  .kantos-form label {
    display: block;
    margin-bottom: 0.5em;
    font-weight: 500;
  }
  .kantos-form input,
  .kantos-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
  }
  .kantos-form button {
    background: #000;
    color: #fff;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    font-size: 16px;
  }
  .kantos-form button:hover {
    background: #333;
  }
</style>

Method 3: Form Action URL (No Code Injection)

For Personal plans without code injection, create forms that submit directly to Kantos using our form action endpoint:

<form
  action="https://kantos.ai/api/ingest/form"
  method="POST"
>
  <!-- Kantos configuration -->
  <input type="hidden" name="_org_slug" value="YOUR_ORG_SLUG" />
  <input type="hidden" name="_redirect" value="https://yoursite.squarespace.com/thank-you" />
  <input type="hidden" name="_source" value="squarespace_contact" />

  <div class="form-field">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />
  </div>

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

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

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

Redirect Page

Create a thank-you page on your Squarespace site to redirect users after submission. Use the full URL including https://.

Third-Party Form Embeds

If you embed forms from third-party services, they work well with the Universal Script:

Service	Compatibility	Notes
Typeform	Full	Embedded forms captured automatically
Jotform	Full	All embed types supported
Google Forms	Partial	Iframe embeds limited; use webhook instead
Tally	Full	Works with embed blocks
Formstack	Full	Script and iframe embeds both work

Method 4: Zapier Integration

Connect Squarespace Form Blocks to Kantos via Zapier for a no-code solution:

Connect Squarespace to Zapier

In Zapier, search for Squarespace and connect your account.

Create a New Zap

Click "Create Zap" and select Squarespace as the trigger app.

Set Trigger Event

Choose "New Form Submission" as the trigger event.

Add Webhook Action

Add "Webhooks by Zapier" as the action and choose "POST".

Configure the Webhook

Set up the POST request to send data to Kantos.

Zapier Webhook Configuration

{
  "URL": "https://kantos.ai/api/ingest",
  "Payload Type": "JSON",
  "Data": {
    "source": "squarespace_zapier",
    "fields": {
      "name": "{{name}}",
      "email": "{{email}}",
      "phone": "{{phone}}",
      "message": "{{message}}"
    },
    "metadata": {
      "form_id": "{{form_id}}",
      "submitted_at": "{{timestamp}}"
    }
  },
  "Headers": {
    "Content-Type": "application/json",
    "X-Api-Key": "kantos_YOUR_INTAKE_KEY"
  }
}

Newsletter Forms

Capture newsletter signups from Squarespace's Newsletter Block or custom forms:

<form id="newsletter" class="newsletter-form">
  <input
    type="email"
    name="email"
    placeholder="Enter your email"
    required
  />
  <button type="submit">Subscribe</button>
</form>

<style>
  .newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 400px;
  }
  .newsletter-form input {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  .newsletter-form button {
    background: #000;
    color: #fff;
    padding: 12px 20px;
    border: none;
    cursor: pointer;
  }
</style>

Squarespace Commerce

For Commerce sites, capture leads beyond checkout:

Contact forms - Captured normally with Universal Script
Product inquiries - Create custom quote request forms
Pre-orders - Use Form Blocks or custom forms to collect interest
Checkout - Customer data flows through Squarespace Commerce

Commerce Webhooks

For checkout/order data, use Squarespace Commerce webhooks or Zapier to sync customer purchases to your CRM.

Testing Your Integration

Verify Script Loading

View page source and search for "kantos" to confirm the script is present.

Open Browser Console

Press F12 and check the Console tab for any errors.

Submit a Test Form

Fill out a form on your live site with test data.

Check Kantos Dashboard

Go to Smart Intake → Incoming Events and verify the submission.

Test Form Block (if used)

Submit a native Form Block and verify it appears in Kantos.

Troubleshooting

Code Injection Not Available

Code Injection requires Business plan or higher
Check your current plan in Settings → Billing
Use Method 3 (Form Action URL) as an alternative

Form Block Submissions Not Appearing

Form Blocks use AJAX—there may be a slight delay
Check if the submission appears in Squarespace's Form Storage first
Try using a custom Code Block form for more reliable capture
Verify your API key and org slug are correct

Custom Form Not Working

Make sure the Code Block is set to display HTML (not Markdown)
Check that form field names don't have typos
Verify the form isn't being blocked by browser extensions
Test in an incognito window to rule out caching

Styles Not Applying

Squarespace may override some CSS—use more specific selectors
Try adding !important to critical styles
Use the Custom CSS feature in Design → Custom CSS for site-wide styles

Squarespace-Specific Tips

Using Squarespace CSS Editor

For consistent styling across your site, add form styles in Design → Custom CSS:

/* Kantos form styles */
.kantos-form input,
.kantos-form textarea {
  border: 1px solid var(--tweak-form-field-border-color);
  padding: var(--tweak-form-field-padding);
  font-family: var(--body-font-font-family);
}

.kantos-form button {
  background: var(--tweak-button-background-color);
  color: var(--tweak-button-text-color);
  font-family: var(--tweak-button-font-font-family);
}

Matching Your Template

Squarespace templates use CSS variables. Inspect your site's styles to find the variable names and use them in your custom form CSS for consistency.

Mobile Responsiveness

Custom forms should be mobile-friendly. Add responsive styles:

@media (max-width: 640px) {
  .kantos-form {
    padding: 0 20px;
  }
  .kantos-form input,
  .kantos-form textarea,
  .kantos-form button {
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

Excluding Forms

Exclude specific forms (like search) from being captured:

<!-- This form will NOT be captured -->
<form data-kantos-ignore id="search-form">
  <input type="search" name="q" />
  <button type="submit">Search</button>
</form>

Next Steps

Set up AI classification to automatically categorize leads
Enable spam protection to filter out bot submissions
Create automations to respond to new form submissions
Set up email sequences for lead nurturing

Squarespace Integration

Method 1: Code Injection (Recommended)

Open Site Settings

Navigate to Code Injection

Add to Header

Save

Method 2: Page-Specific Code

Edit the Page

Open Page Settings

Go to Advanced

Add Header Code

Save

Understanding Squarespace Forms

Form Blocks

Code Blocks with Custom Forms

Custom Forms with Code Blocks

Add a Code Block

Paste Form HTML

Style Your Form

Save and Publish

Method 3: Form Action URL (No Code Injection)

Third-Party Form Embeds

Method 4: Zapier Integration

Connect Squarespace to Zapier

Create a New Zap

Set Trigger Event

Add Webhook Action

Configure the Webhook

Zapier Webhook Configuration

Newsletter Forms

Squarespace Commerce

Testing Your Integration

Verify Script Loading

Open Browser Console

Submit a Test Form

Check Kantos Dashboard

Test Form Block (if used)

Troubleshooting

Code Injection Not Available

Form Block Submissions Not Appearing

Custom Form Not Working

Styles Not Applying

Squarespace-Specific Tips

Using Squarespace CSS Editor

Matching Your Template

Mobile Responsiveness

Excluding Forms

Next Steps