How to Migrate from Formspree to Kollect in 5 Minutes

If you've hit Formspree's submission limits or form caps and want a form backend service that scales, migrating to Kollect is straightforward. The form API is similar—you're mainly swapping the endpoint URL. Here's how to do it for different setups.

What You Need Before Migrating

1. A Kollect account (free signup)
2. A form in Kollect with a unique endpoint URL (e.g. https://kollect.app/f/YOUR_FORM_KEY)
3. Your current form code

The migration pattern is the same everywhere: change the form action from Formspree to your Kollect endpoint. Field names, method, and enctype typically stay the same.

---

HTML Forms

Before (Formspree):

<form action="https://formspree.io/f/YOUR_FORMSPREE_ID" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="your@email.com" required />
  <textarea name="message" placeholder="Your message..."></textarea>
  <button type="submit">Send</button>
</form>

After (Kollect):

<form action="https://kollect.app/f/YOUR_KOLLECT_KEY" method="POST">
  <input type="text" name="name" placeholder="Your name" required />
  <input type="email" name="email" placeholder="your@email.com" required />
  <textarea name="message" placeholder="Your message..."></textarea>
  <button type="submit">Send</button>
</form>

That's it for plain HTML. Create a form in the Kollect dashboard, copy the endpoint URL, and replace the Formspree action. Field names carry over, so submissions will map correctly.

---

React (Client-Side)

If you're using React with a regular form submit (no custom handler):

Before (Formspree):

<form action="https://formspree.io/f/YOUR_FORMSPREE_ID" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <button type="submit">Send</button>
</form>

After (Kollect):

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

If you're using a controlled form with fetch or axios:

Before (Formspree):

const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  await fetch("https://formspree.io/f/YOUR_FORMSPREE_ID", {
    method: "POST",
    body: formData,
    headers: { Accept: "application/json" },
  });
};

After (Kollect):

const handleSubmit = async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  await fetch("https://kollect.app/f/YOUR_KOLLECT_KEY", {
    method: "POST",
    body: formData,
    headers: { Accept: "application/json" },
  });
};

Replace the URL; the rest stays the same.

---

Next.js

For Next.js, the same pattern applies. Use your Kollect endpoint as the form action. If your app is on Vercel or a custom domain, use that base URL:

Before (Formspree):

<form action="https://formspree.io/f/YOUR_FORMSPREE_ID" method="POST">
  {/* fields */}
</form>

After (Kollect):

<form action={`${process.env.NEXT_PUBLIC_APP_URL}/f/YOUR_KOLLECT_KEY`} method="POST">
  {/* fields */}
</form>

Or hardcode your production URL. Kollect endpoints work with any domain that points to your app.

For server actions or API routes that forward to a form backend, swap the Formspree URL for the Kollect endpoint in your fetch/axios call.

---

Static Site Generators (Hugo, Jekyll, Astro, 11ty, etc.)

Static sites often use plain HTML forms. The migration is identical to the HTML example:

1. Create a form in Kollect
2. Replace the Formspree action with the Kollect endpoint
3. Redeploy

No build changes needed. Serverless form handling works the same.

---

File Uploads

If you're uploading files, keep enctype="multipart/form-data":

<form
  action="https://kollect.app/f/YOUR_KOLLECT_KEY"
  method="POST"
  enctype="multipart/form-data"
>
  <input type="file" name="attachment" />
  <button type="submit">Send</button>
</form>

Kollect supports file uploads on paid plans. Ensure your form is configured for file uploads in the dashboard.

---

Troubleshooting

Forms submit but no submissions in Kollect

• Verify the form key and URL. A typo sends data to a non-existent form.
• Check CORS if you're using fetch from a different domain—Kollect allows common origins by default.
• Confirm the form exists and is active in the Kollect dashboard.

Redirect after submit

Formspree supports ?next= for redirects. Kollect handles this similarly: add a redirect or _next field, or configure redirects in the form settings.

AJAX / fetch not working

Ensure you're sending FormData (for multipart) or application/x-www-form-urlencoded with the correct field names. Kollect expects standard form encoding.

Spam / honeypot

If you used Formspree's built-in spam filtering, add a honeypot field and/or integrate with a service like reCAPTCHA. Kollect supports both.

---

Wrapping Up

Migrating from Formspree to Kollect is mainly a URL swap. Create your form in Kollect, update the action, and you're done. Whether you're on HTML, React, Next.js, or a static generator, the form API stays consistent—and you get unlimited submissions and forms on paid plans.