Migrating from Netlify Forms to Kollect

Netlify Forms is convenient if you’re already on Netlify, but it has significant limitations. This guide shows you how to migrate to Kollect for unlimited submissions, better features, and platform independence.

Why Switch from Netlify Forms?

No Submission Limits: Free from Netlify’s 100 submissions/month cap
File Upload Support: Accept files and attachments
Platform Independent: Works with any hosting provider
Better Integrations: Slack, Discord, Google Sheets, and more
API Access: Full REST API for automation
Advanced Features: Webhooks, custom domains, team collaboration

Key Differences

Feature	Netlify Forms	Kollect
Monthly Submissions	100 free, then $19	Unlimited
File Uploads	❌	✅
Platform Dependent	✅ (Netlify only)	❌ (Any host)
Webhooks	❌	✅
API Access	❌	✅
Integrations	Email only	20+ services
Spam Protection	Basic	Advanced
Custom Domains	❌	✅

Migration Process

Step 1: Create Kollect Account

Step 2: Understanding the Code Changes

Netlify Forms uses a special attribute data-netlify="true". You’ll replace this with Kollect’s action endpoint.

Before (Netlify Forms):


<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

After (Kollect):


<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
  <button type="submit">Send</button>
</form>

Step 3: Remove Netlify-Specific Attributes

Remove these Netlify-specific attributes:

data-netlify="true"
data-netlify-honeypot
name attribute on <form> tag (unless you need it for your own purposes)

Step 4: Static Site Generators

Gatsby

Before:


// src/pages/contact.js
export default function ContactPage() {
  return (
    <form name="contact" method="POST" data-netlify="true">
      <input type="hidden" name="form-name" value="contact" />
      <input type="text" name="name" />
      <input type="email" name="email" />
      <button type="submit">Send</button>
    </form>
  );
}

After:


// src/pages/contact.js
export default function ContactPage() {
  return (
    <form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
      <input type="text" name="name" />
      <input type="email" name="email" />
      <button type="submit">Send</button>
    </form>
  );
}

Next.js (App Router)

Before:


// app/contact/page.tsx
export default function ContactPage() {
  return (
    <form name="contact" method="POST" data-netlify="true">
      <input type="text" name="name" />
      <button type="submit">Send</button>
    </form>
  );
}

After:


// app/contact/page.tsx
export default function ContactPage() {
  return (
    <form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
      <input type="text" name="name" />
      <button type="submit">Send</button>
    </form>
  );
}

Hugo

Before:


<!-- layouts/contact.html -->
<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" />
  <button type="submit">Send</button>
</form>

After:


<!-- layouts/contact.html -->
<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <input type="text" name="name" />
  <button type="submit">Send</button>
</form>

Jekyll

Before:


<!-- contact.html -->
<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" />
  <button type="submit">Send</button>
</form>

After:


<!-- contact.html -->
<form action="https://kollect.app/f/YOUR_FORM_KEY" method="POST">
  <input type="text" name="name" />
  <button type="submit">Send</button>
</form>

Step 5: AJAX/JavaScript Submissions

If you’re using JavaScript to submit forms:

Before (Netlify):


const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(formData).toString()
  })
  .then(() => alert('Success!'))
  .catch((error) => alert(error));
};

After (Kollect):


const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  fetch('https://kollect.app/f/YOUR_FORM_KEY', {
    method: 'POST',
    body: formData
  })
  .then(() => alert('Success!'))
  .catch((error) => alert(error));
};

Step 6: File Uploads (NEW!)

Netlify Forms doesn’t support file uploads. With Kollect:


<form action="https://kollect.app/f/YOUR_FORM_KEY" 
      method="POST" 
      enctype="multipart/form-data">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <input type="file" name="resume" accept=".pdf,.doc,.docx" />
  <button type="submit">Submit Application</button>
</form>

Step 7: Spam Protection

Replace Netlify’s basic spam protection:

Netlify Honeypot:


<form data-netlify="true" data-netlify-honeypot="bot-field">
  <input type="hidden" name="bot-field" />
  <!-- form fields -->
</form>

Kollect Options:

Enable reCAPTCHA in form settings
Built-in spam filtering (automatic)
Honeypot fields (configure in settings)
Rate limiting (automatic)

Step 8: Email Notifications

Configure in Kollect dashboard:

Go to form settings
Navigate to Notifications tab
Add recipient emails
Customize email template
Enable autoresponders

Unlike Netlify, you get:

Custom email templates
Multiple recipients
Conditional notifications
Autoresponders

Step 9: Set Up Integrations

Add integrations that Netlify doesn’t offer:

Slack: Real-time notifications
Discord: Community alerts
Google Sheets: Auto-logging
Mailchimp: List management
Webhooks: Custom integrations

Step 10: Redirects After Submission

Netlify approach:


<input type="hidden" name="_redirect" value="/thank-you" />

Kollect approach:


<input type="hidden" name="_redirect" value="/thank-you" />

Or configure in form settings dashboard.

Keeping Your Site on Netlify

You don’t need to leave Netlify! Kollect works with:

Netlify
Vercel
GitHub Pages
Cloudflare Pages
Any static hosting

Your site stays where it is—only the form backend changes.

Testing Your Migration

Deploy your updated code
Submit a test form
Check Kollect dashboard for submission
Verify email notifications
Test any integrations

Common Issues

Form not submitting?

Verify action URL is correct
Check method="POST" is set
Remove all data-netlify attributes

CORS errors?

Kollect handles CORS automatically
Ensure you’re using the correct endpoint

Existing submissions?

Export from Netlify (CSV)
Import to Kollect via dashboard
Or keep Netlify account for archives

Advanced: Netlify Build Plugin

If you have complex Netlify Forms setup, you might be using build plugins. These can be removed after migration to Kollect.

Cost Comparison

Netlify:

100 submissions free
$19/month for 1,000 submissions
No file uploads
Basic features

Kollect:

50 submissions free
$19/month for unlimited submissions
File uploads included
Advanced features + API

Migration Support

Need help? We offer:

Free migration consultation
Technical support
Bulk data import
Custom integration setup

Contact: support@kollect.app

Next Steps

Frequently Asked Questions

Will this affect my Netlify deployment?

No! Your site will still deploy normally on Netlify. Only the form handling changes.

Can I test without breaking my current forms?

Yes! Set up Kollect on a test form first, or use both simultaneously during migration.

What about form names?

Netlify requires form names for identification. Kollect uses unique form keys instead, giving you more flexibility.

Do I need to change my DNS?

No DNS changes required. Kollect is a backend service, not a hosting provider.