# Squarespace Integration Guide

Complete guide to integrate MyFormCapture with Squarespace

      Setup time: **5-10 minutes
      Difficulty: **Easy
        Compatible versions: **Squarespace 7.0, 7.1**

Add MyFormCapture forms to your Squarespace website using Code Blocks. Perfect for custom contact forms, lead capture, and form submissions without Squarespace's form limitations.

## ** Prerequisites

- ** A MyFormCapture account - [Sign up here](/users/sign_up)
- ** A form created in your MyFormCapture dashboard with its UUID copied
- ** Squarespace site admin access
- ** Business plan or higher (required for code injection)

## ** Integration Methods

### Code Block (Recommended)

                5 minutes

                Easy

Use Squarespace's Code Block to add a MyFormCapture form to any page. This is the easiest method for adding forms to specific pages.

                  1

#### Copy your form UUID from MyFormCapture

                    You will need the unique UUID that MyFormCapture assigned to your form.

1. Log in to your MyFormCapture dashboard
2. Open the form you want to embed
3. Copy the form UUID from the form URL or settings page (e.g. `550e8400-e29b-41d4-a716-446655440000`)

##### Important Note

                            Each form has a unique UUID. Make sure you use the correct one.

                  2

#### Add a Code Block in Squarespace

                    Insert a Code Block where you want the form to appear.

1. Open your Squarespace site editor
2. Navigate to the page where you want the form
3. Click an **Add Block** insertion point (+)
4. Search for **Code** and select the **Code** block
5. The code editor will appear

##### Important Note

                            Code Blocks require a Squarespace Business plan or higher.

                  3

#### Paste your form code

                    Add your MyFormCapture form HTML to the Code Block.

1. In the Code Block editor, paste the form code below
2. Replace `YOUR_FORM_UUID` with your actual form UUID
3. Make sure the code type is set to **HTML**
4. Click **Apply** or close the editor

```
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <form action="https://myformcapture.com/f/YOUR_FORM_UUID" method="POST" data-mfc="true" style="max-width: 500px; margin: 0 auto;">
    <div style="margin-bottom: 15px;">
      <label for="name" style="display: block; margin-bottom: 5px; font-weight: 500;">Name *</label>
      <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="email" style="display: block; margin-bottom: 5px; font-weight: 500;">Email *</label>
      <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="message" style="display: block; margin-bottom: 5px; font-weight: 500;">Message</label>
      <textarea id="message" name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
    </div>
    <button type="submit" style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;">Send Message</button>
  </form>
  <script src="https://myformcapture.com/loader.js" data-client-id="YOUR_FORM_UUID"></script>
</div>
```

##### Important Note

                            The inline styles ensure the form looks good. You can customize colors and spacing to match your Squarespace theme.

                  4

#### Save and test

                    Publish your page and verify submissions reach your MyFormCapture dashboard.

1. Click **Save** in the top-left
2. Visit your live site (published version)
3. Fill in the form and click Submit
4. Check your MyFormCapture dashboard under **Leads** to confirm the submission arrived

##### Important Note

                            Changes appear immediately after saving in Squarespace.

### Code Injection (Site-wide)

                8 minutes

                Easy

Use Squarespace Code Injection to add MyFormCapture loader.js across your entire site. Best for sites with multiple forms on different pages.

                  1

#### Access Code Injection

                    Navigate to the Code Injection settings in Squarespace.

1. Go to your Squarespace **Home Menu**
2. Click **Settings**
3. Click **Advanced**
4. Click **Code Injection

##### Important Note

                            Code Injection requires a Squarespace Business plan or higher.

                  2

#### Add loader.js to Header

                    Insert MyFormCapture loader.js in the Header section.

1. In the **Header** text area, paste the loader script below
2. Replace `YOUR_DOMAIN_UUID` with your domain UUID from MyFormCapture dashboard
3. Click **Save**

```
<!-- MyFormCapture loader.js (site-wide) -->
<script src="https://myformcapture.com/loader.js" data-client-id="YOUR_DOMAIN_UUID"></script>
```

##### Important Note

                            When loading loader.js globally, use your **domain UUID** (not a form UUID) as the data-client-id.

                  3

#### Add forms using Code Blocks

                    Now add forms to any page without including the script tag.

1. Add a **Code Block** to any page
2. Paste the form HTML (without the script tag)
3. Use the correct form-specific UUID in the action attribute
4. Ensure the form has `data-mfc="true"`

```
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
  <form action="https://myformcapture.com/f/YOUR_FORM_UUID" method="POST" data-mfc="true" style="max-width: 500px; margin: 0 auto;">
    <div style="margin-bottom: 15px;">
      <label for="name" style="display: block; margin-bottom: 5px; font-weight: 500;">Name *</label>
      <input type="text" id="name" name="name" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="email" style="display: block; margin-bottom: 5px; font-weight: 500;">Email *</label>
      <input type="email" id="email" name="email" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
    </div>
    <div style="margin-bottom: 15px;">
      <label for="message" style="display: block; margin-bottom: 5px; font-weight: 500;">Message</label>
      <textarea id="message" name="message" rows="4" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
    </div>
    <button type="submit" style="background: #3b82f6; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; font-weight: 500;">Send Message</button>
  </form>
</div>
```

##### Important Note

                            Do not include the `<script>` tag when using the site-wide loader approach.

## ** Troubleshooting

              Code Blocks require a Squarespace Business plan or higher. Solutions: 1) Upgrade to a Business plan, 2) Squarespace Personal plans cannot add custom code, 3) Check your plan at Settings → Billing.

              Verify: 1) The form UUID in the action URL is correct, 2) You're checking the correct form in your MyFormCapture dashboard, 3) Check browser console (F12 → Console) for errors, 4) Your site URL is added to MyFormCapture dashboard under Domains (optional).

              Check: 1) The Code Block type is set to **HTML** (not Display Text), 2) The HTML code is complete with opening and closing tags, 3) You clicked Apply after pasting code, 4) Try saving and refreshing the page.

              Ensure: 1) The form has `data-mfc="true"`, 2) The script `data-client-id` is a valid UUID, 3) If using site-wide injection, check it's in the Header section, 4) Clear browser cache and test.

              Customize: 1) Edit the inline styles in the form code, 2) Use your site's colors from Style Editor, 3) Match fonts to your Squarespace theme, 4) Adjust button colors and border radius, 5) Test changes after updating the Code Block.

              Code Injection requires: 1) Squarespace Business plan or higher, 2) Not available on Personal or lower plans, 3) Use the Code Block method instead if you don't have Code Injection access.

#### Still having issues?

Can't find the answer you're looking for? Our support team is here to help with your integration.

          [** Contact Support](/support)

## ** Related Integrations

      [Wix Integration Guide →](/docs/platforms/builders/wix)      [Webflow Integration Guide →](/docs/platforms/builders/webflow)      [Static Sites Integration Guide →](/docs/deployment/static-sites)

## ** References & Official Documentation

- ** [Squarespace Developer Documentation](https://developers.squarespace.com/) **
- ** [Squarespace Code Injection](https://support.squarespace.com/hc/en-us/articles/205815908) **
- ** [Squarespace Template Development](https://developers.squarespace.com/template-overview) **
- ** [Squarespace Custom CSS](https://support.squarespace.com/hc/en-us/articles/206545617) **

## ** Next Steps

#### ** Configure MyFormCapture

- ** Set up your timezone
- ** Configure lead notifications
- ** Set up advanced spam detection
- ** Add team members to your account

#### ** Advanced Features

- ** Use our custom form templates
- ** Try AI Insights for Leads
- ** Integrate with your CRM
- ** Set up automated workflows