FRAMEWORK

Add a form backend to your Preact app

Formstork receives submissions from any Preact form, emails you each one, and keeps every message in a searchable dashboard. Your component POSTs the form data, and there is no server or API route to build.

How it works

A Preact form lives entirely in the browser: it can collect fields with useState from preact/hooks or the native form, but it cannot deliver them anywhere on its own. Formstork is the backend that receives the POST. Your component sends the form data to a Formstork endpoint with your access key, and Formstork emails you each submission, sets the visitor's email as the reply-to, and saves it to a searchable dashboard. Because the request is a plain fetch(), it works the same whether you build with Vite, preact-cli, or Preact dropped into an existing page, with nothing to deploy on your side. Turn on spam filtering, an integration like Slack or Google Sheets, or an autoresponder whenever you need them.

jsx

import { useState } from "preact/hooks";

export default function ContactForm() {
  const [sent, setSent] = useState(false);

  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    data.append("access_key", "YOUR_ACCESS_KEY");
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: data,
    });
    if (res.ok) setSent(true);
  }

  if (sent) return <p>Thanks, we got your message.</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Your email" required />
      <textarea name="message" placeholder="Your message" required />
      <button type="submit">Send</button>
    </form>
  );
}

No API route to build

Your Preact app stays frontend-only. The form POSTs straight to Formstork with a plain fetch(), so there is no Express server, serverless function, or backend route to write, deploy, or keep alive.

Reply straight from your inbox

Every submission emails you with the visitor's address set as the reply-to, so you hit reply and it reaches the person who wrote in. Every message is also stored in a searchable, taggable dashboard you can export to CSV or JSON.

Spam handled for you

A hidden honeypot, a server-side content filter, and optional Turnstile, hCaptcha, or reCAPTCHA keep bots out before they ever email you. Flagged submissions are filtered out before they reach you, so your Preact form needs no anti-spam logic of its own.

Set it up

1Build your form as a Preact component with the fields you need (name, email, message), or start from Formstork's hosted no-code form builder.
2On submit, gather the fields into FormData, append your access key as access_key, and fetch() them to https://api.formstork.com/submit.
3Submit once to test. The submission lands in your inbox and your Formstork dashboard, with the visitor's email set as the reply-to.
4Optional: read res.ok to show a success state with useState, and connect an integration like Slack or Google Sheets in the dashboard.

Frequently asked questions

How do I handle form submissions in Preact without a backend?

Send the form data with a fetch() POST to a Formstork endpoint and include your access key. Formstork is the backend: it receives the submission, emails it to you, and stores it in a searchable dashboard. There is no server or API route to build.

Can I upload files from a Preact form?

Yes, on the paid plans. Send the form as multipart/form-data, which a FormData body does for you, so the file rides along with your other fields and each submission is saved in your dashboard. File uploads are a paid feature; the free plan still includes 250 submissions a month with a full dashboard.

Is it free?

Yes, the free plan includes 250 submissions a month with a full dashboard and 90-day retention. Paid plans add more volume, forever retention, autoresponders, and file uploads or attachments.

Try Formstork free

250 submissions a month with a full dashboard. No credit card required.

Get your access key Read the docs