---
title: "Add forms to Squarespace"
description: "Add custom forms to your Squarespace site. Forminit handles submissions, file uploads, and notifications for you."
url: https://forminit.com/docs/squarespace/
---

# Add forms to Squarespace

Add onbrand, custom forms to your Squarespace site. Forminit handles submissions, validation, file uploads, and notifications so you don't have to.

---

## Overview

Squarespace allows custom HTML and JavaScript through code blocks and code injection. You can add Forminit forms to:

- Individual pages using Code Blocks
- Your entire site using Code Injection settings
- Specific sections using the Embed Block

---

## Prerequisites

1. Create a Forminit account at [forminit.com](https://forminit.com)
2. Create a form in your dashboard
3. Set authentication mode to **Public** in Form Settings
4. Squarespace Business plan or higher (required for custom code)

> **Caution**
>
> Squarespace integrations are client-side only. Never use API keys in Squarespace as they would be exposed in your page source.

---

## Adding a Form to a Page

Use Squarespace's Code Block to embed a form on any page.

### Step 1: Add a Code Block

1. Open the Squarespace editor for your page
2. Click **Add Block** or the **+** button
3. Select **Code** from the block options

### Step 2: Add the Form HTML

Paste the following code into the Code Block and enable the **Display Source** option:

```html
<form id="contact-form">
  <div style="margin-bottom: 1rem;">
    <input 
      type="text" 
      name="fi-sender-firstName" 
      placeholder="First name" 
      required 
      style="width: 100%; padding: 0.75rem; border: 1px solid #e5e5e5; border-radius: 4px; font-family: inherit;"
    />
  </div>
  <div style="margin-bottom: 1rem;">
    <input 
      type="text" 
      name="fi-sender-lastName" 
      placeholder="Last name" 
      required 
      style="width: 100%; padding: 0.75rem; border: 1px solid #e5e5e5; border-radius: 4px; font-family: inherit;"
    />
  </div>
  <div style="margin-bottom: 1rem;">
    <input 
      type="email" 
      name="fi-sender-email" 
      placeholder="Email" 
      required 
      style="width: 100%; padding: 0.75rem; border: 1px solid #e5e5e5; border-radius: 4px; font-family: inherit;"
    />
  </div>
  <div style="margin-bottom: 1rem;">
    <textarea 
      name="fi-text-message" 
      placeholder="Message" 
      required 
      rows="5"
      style="width: 100%; padding: 0.75rem; border: 1px solid #e5e5e5; border-radius: 4px; resize: vertical; font-family: inherit;"
    ></textarea>
  </div>
  
  <p id="form-result" style="margin-bottom: 1rem;"></p>
  
  <button 
    type="submit" 
    style="background: #000; color: #fff; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer; font-family: inherit;"
  >
    Send Message
  </button>
</form>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  (function() {
    const forminit = new Forminit();
    const FORM_ID = 'YOUR_FORM_ID'; // ← Replace with your Form ID
    
    const form = document.getElementById('contact-form');
    const resultEl = document.getElementById('form-result');
    
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      const submitBtn = form.querySelector('button[type="submit"]');
      const originalText = submitBtn.textContent;
      submitBtn.textContent = 'Sending...';
      submitBtn.disabled = true;
      
      const formData = new FormData(form);
      const { data, redirectUrl, error } = await forminit.submit(FORM_ID, formData);
      
      if (error) {
        resultEl.textContent = error.message;
        resultEl.style.color = '#dc2626';
        submitBtn.textContent = originalText;
        submitBtn.disabled = false;
        return;
      }
      
      resultEl.textContent = 'Message sent successfully!';
      resultEl.style.color = '#16a34a';
      form.reset();
      submitBtn.textContent = originalText;
      submitBtn.disabled = false;
    });
  })();
</script>
```

### Step 3: Replace Your Form ID

Replace `YOUR_FORM_ID` with your actual Form ID from the Forminit dashboard.

### Step 4: Save and Publish

Click **Save** on the Code Block, then publish your page.

---

## Site-Wide SDK with Code Injection

For better performance when using multiple forms, load the SDK once using Code Injection.

### Step 1: Open Code Injection Settings

1. Go to your Squarespace dashboard
2. Navigate to **Settings → Advanced → Code Injection**

### Step 2: Add the SDK to Footer

In the **Footer** section, add:

```html
<script src="https://forminit.com/sdk/v1/forminit.js"></script>
```

### Step 3: Add Forms Without SDK Script

Now you can add forms on any page without including the SDK script each time:

```html
<form id="newsletter-form">
  <input 
    type="email" 
    name="fi-sender-email" 
    placeholder="Enter your email" 
    required 
    style="width: 100%; padding: 0.75rem; border: 1px solid #e5e5e5; border-radius: 4px;"
  />
  <button 
    type="submit"
    style="margin-top: 0.5rem; background: #000; color: #fff; padding: 0.75rem 1.5rem; border: none; border-radius: 4px; cursor: pointer;"
  >
    Subscribe
  </button>
</form>

<p id="newsletter-result"></p>

<script>
  (function() {
    const forminit = new Forminit();
    const FORM_ID = 'YOUR_FORM_ID';
    
    const form = document.getElementById('newsletter-form');
    const resultEl = document.getElementById('newsletter-result');
    
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      const formData = new FormData(form);
      const { data, error } = await forminit.submit(FORM_ID, formData);
      
      if (error) {
        resultEl.textContent = error.message;
        return;
      }
      
      resultEl.textContent = 'Thanks for subscribing!';
      form.reset();
    });
  })();
</script>
```

---

## Form Examples

### Contact Form

```html
<form id="contact-form">
  <input type="text" name="fi-sender-firstName" placeholder="First name" required />
  <input type="text" name="fi-sender-lastName" placeholder="Last name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  <input type="tel" name="fi-sender-phone" placeholder="Phone (optional)" />
  <textarea name="fi-text-message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>

<p id="contact-result"></p>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  (function() {
    const forminit = new Forminit();
    const FORM_ID = 'YOUR_FORM_ID';
    
    const form = document.getElementById('contact-form');
    
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      const formData = new FormData(form);
      const { data, error } = await forminit.submit(FORM_ID, formData);
      
      const resultEl = document.getElementById('contact-result');
      
      if (error) {
        resultEl.textContent = error.message;
        return;
      }
      
      resultEl.textContent = 'Message sent successfully!';
      form.reset();
    });
  })();
</script>
```

### Inquiry Form with Service Selection

```html
<form id="inquiry-form">
  <input type="text" name="fi-sender-fullName" placeholder="Your name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  <input type="tel" name="fi-sender-phone" placeholder="Phone" />
  
  <label>Which service are you interested in?</label>
  <select name="fi-select-service" required>
    <option value="">Select a service</option>
    <option value="consulting">Consulting</option>
    <option value="design">Design</option>
    <option value="development">Development</option>
    <option value="marketing">Marketing</option>
  </select>
  
  <label>Budget range</label>
  <select name="fi-select-budget">
    <option value="">Select budget</option>
    <option value="under-5k">Under $5,000</option>
    <option value="5k-10k">$5,000 - $10,000</option>
    <option value="10k-25k">$10,000 - $25,000</option>
    <option value="over-25k">Over $25,000</option>
  </select>
  
  <textarea name="fi-text-details" placeholder="Tell us about your project" required></textarea>
  <button type="submit">Submit Inquiry</button>
</form>

<p id="inquiry-result"></p>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  (function() {
    const forminit = new Forminit();
    const FORM_ID = 'YOUR_FORM_ID';
    
    const form = document.getElementById('inquiry-form');
    
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      const submitBtn = form.querySelector('button[type="submit"]');
      submitBtn.textContent = 'Submitting...';
      submitBtn.disabled = true;
      
      const formData = new FormData(form);
      const { data, error } = await forminit.submit(FORM_ID, formData);
      
      const resultEl = document.getElementById('inquiry-result');
      
      if (error) {
        resultEl.textContent = error.message;
        submitBtn.textContent = 'Submit Inquiry';
        submitBtn.disabled = false;
        return;
      }
      
      resultEl.textContent = 'Thank you! We\'ll be in touch soon.';
      form.reset();
      submitBtn.textContent = 'Submit Inquiry';
      submitBtn.disabled = false;
    });
  })();
</script>
```

### Event Registration with File Upload

```html
<form id="registration-form">
  <input type="text" name="fi-sender-firstName" placeholder="First name" required />
  <input type="text" name="fi-sender-lastName" placeholder="Last name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  <input type="text" name="fi-sender-company" placeholder="Company" />
  
  <label>Dietary requirements</label>
  <select name="fi-select-dietary">
    <option value="none">None</option>
    <option value="vegetarian">Vegetarian</option>
    <option value="vegan">Vegan</option>
    <option value="gluten-free">Gluten-free</option>
    <option value="other">Other</option>
  </select>
  
  <textarea name="fi-text-notes" placeholder="Any additional notes"></textarea>
  
  <label>Upload proof of payment (optional)</label>
  <input type="file" name="fi-file-payment" accept=".pdf,.jpg,.jpeg,.png" />
  
  <button type="submit">Register</button>
</form>

<p id="registration-result"></p>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  (function() {
    const forminit = new Forminit();
    const FORM_ID = 'YOUR_FORM_ID';
    
    const form = document.getElementById('registration-form');
    
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      const submitBtn = form.querySelector('button[type="submit"]');
      submitBtn.textContent = 'Registering...';
      submitBtn.disabled = true;
      
      const formData = new FormData(form);
      const { data, error } = await forminit.submit(FORM_ID, formData);
      
      const resultEl = document.getElementById('registration-result');
      
      if (error) {
        resultEl.textContent = error.message;
        submitBtn.textContent = 'Register';
        submitBtn.disabled = false;
        return;
      }
      
      resultEl.textContent = 'Registration complete! Check your email for confirmation.';
      form.reset();
      submitBtn.textContent = 'Register';
      submitBtn.disabled = false;
    });
  })();
</script>
```

### Feedback Form with Rating

```html
<form id="feedback-form">
  <input type="text" name="fi-sender-fullName" placeholder="Your name" required />
  <input type="email" name="fi-sender-email" placeholder="Email" required />
  
  <label>How would you rate your experience? (1-5)</label>
  <select name="fi-rating-experience" required>
    <option value="">Select rating</option>
    <option value="5">5 - Excellent</option>
    <option value="4">4 - Good</option>
    <option value="3">3 - Average</option>
    <option value="2">2 - Poor</option>
    <option value="1">1 - Very Poor</option>
  </select>
  
  <textarea name="fi-text-feedback" placeholder="Your feedback" required></textarea>
  <button type="submit">Submit Feedback</button>
</form>

<p id="feedback-result"></p>

<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  (function() {
    const forminit = new Forminit();
    const FORM_ID = 'YOUR_FORM_ID';
    
    const form = document.getElementById('feedback-form');
    
    form.addEventListener('submit', async function(event) {
      event.preventDefault();
      
      const formData = new FormData(form);
      const { data, error } = await forminit.submit(FORM_ID, formData);
      
      const resultEl = document.getElementById('feedback-result');
      
      if (error) {
        resultEl.textContent = error.message;
        return;
      }
      
      resultEl.textContent = 'Thank you for your feedback!';
      form.reset();
    });
  })();
</script>
```

---

## Available Form Blocks

For complete documentation on all available blocks, field naming conventions, and validation rules, see the [Form Blocks Reference](https://forminit.com/docs/form-blocks/).

---

## Error Handling

Handle common errors appropriately:

```javascript
const { data, error } = await forminit.submit(FORM_ID, formData);

if (error) {
  let message = error.message;
  
  switch (error.error) {
    case 'FI_SCHEMA_FORMAT_EMAIL':
      message = 'Please enter a valid email address.';
      break;
    case 'FI_RULES_PHONE_INVALID':
      message = 'Please enter a valid phone number (e.g., +12025550123).';
      break;
    case 'FI_SCHEMA_RANGE_RATING':
      message = 'Rating must be between 1 and 5.';
      break;
    case 'TOO_MANY_REQUESTS':
      message = 'Please wait a moment before submitting again.';
      break;
  }
  
  resultEl.textContent = message;
  return;
}
```

### Common Error Codes

| Error Code | Description |
|------------|-------------|
| `FORM_NOT_FOUND` | Form ID doesn't exist or was deleted |
| `FORM_DISABLED` | Form is disabled by owner |
| `EMPTY_SUBMISSION` | No fields with values submitted |
| `FI_SCHEMA_FORMAT_EMAIL` | Invalid email format |
| `FI_RULES_PHONE_INVALID` | Invalid phone number format |
| `FI_SCHEMA_RANGE_RATING` | Rating not between 1-5 |
| `FI_DATA_COUNTRY_INVALID` | Invalid country code |
| `TOO_MANY_REQUESTS` | Rate limit exceeded |

---

## Related Documentation

- [Form Blocks Reference](https://forminit.com/docs/form-blocks/): Complete reference for all block types
- [File Uploads](https://forminit.com/docs/file-upload/): Detailed file upload guide
- [API Reference](https://forminit.com/docs/submit-form-api/): Full REST API documentation
- [HTML Integration](https://forminit.com/docs/html/): General HTML/static site setup
- [Cloudflare Turnstile Integration](https://forminit.com/docs/cloudflare-turnstile/): Add Turnstile protection
- [reCAPTCHA Integration](https://forminit.com/docs/recaptcha/): Add reCAPTCHA protection
- [hCaptcha Integration](https://forminit.com/docs/hcaptcha/): Add hCaptcha protection
- [Honeypot](https://forminit.com/docs/honeypot/): Add honeypot spam protection