Squarespace + Forminit Integration Guide

Add onbrand, custom forms to your Squarespace site in minutes. 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
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:

<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:

<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:

<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

<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

<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

<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

<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.

---

Error Handling

Handle common errors appropriately:

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: Complete reference for all block types
• File Uploads: Detailed file upload guide
• API Reference: Full REST API documentation
• HTML Integration: General HTML/static site setup
• reCAPTCHA Integration: Add reCAPTCHA protection
• hCaptcha Integration: Add hCaptcha protection
• Honeypot: Add honeypot spam protection