Squarespace Integration Guide
Complete guide to integrate MyFormConnect with Squarespace
Setup time: 5-10 minutes
Difficulty: Easy
Compatible versions: Squarespace 7.0, 7.1
Add MyFormConnect 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 MyFormConnect account - Sign up here
- A form created in your MyFormConnect 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 MyFormConnect form to any page. This is the easiest method for adding forms to specific pages.
1
Copy your form UUID from MyFormConnect
You will need the unique UUID that MyFormConnect assigned to your form.
- Log in to your MyFormConnect dashboard
- Open the form you want to embed
- 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.
- Open your Squarespace site editor
- Navigate to the page where you want the form
- Click an Add Block insertion point (+)
- Search for Code and select the Code block
- The code editor will appear
Important Note
Code Blocks require a Squarespace Business plan or higher.
3
Paste your form code
Add your MyFormConnect form HTML to the Code Block.
- In the Code Block editor, paste the form code below
- Replace
YOUR_FORM_UUIDwith your actual form UUID - Make sure the code type is set to HTML
- Click Apply or close the editor
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
<form action="https://myformconnect.io/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://myformconnect.io/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 MyFormConnect dashboard.
- Click Save in the top-left
- Visit your live site (published version)
- Fill in the form and click Submit
- Check your MyFormConnect dashboard under Leads to confirm the submission arrived
Important Note
Changes appear immediately after saving in Squarespace.
Related Integrations
References & Official Documentation
Next Steps
Configure MyFormConnect
- 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