Form Backend API
Forminit is a form backend API that handles submissions, validation, file uploads, spam protection and notifications. Learn how to add a working contact form to HTML, React or Next.js without building a backend.
Forminit is a form backend API. Your frontend sends a form submission to Forminit, and it validates the data, stores it, and runs the actions you configure: email, Slack, webhooks, Google Sheets and more.
You do not need a database, a server route or an email service. Forminit works with plain HTML, React, Next.js, Nuxt, Node.js, Python and anything else that can make an HTTP request.
Key features
Use Forminit when you need a form to work without writing and hosting your own backend:
fi- convention and submit them with the SDK.<form id="contact-form">
<input type="email" name="fi-sender-email" required />
<textarea name="fi-text-message" required></textarea>
<button type="submit">Send</button>
</form>
<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
const forminit = new Forminit()
const form = document.getElementById("contact-form")
form.addEventListener("submit", async (event) => {
event.preventDefault()
const { data, error } = await forminit.submit("YOUR_FORM_ID", new FormData(form))
if (error) return console.error(error.message)
form.reset()
})
</script>submit returns { data, redirectUrl, error }. On success, data.hashId is the submission ID.
A block is one typed value in a submission. The input name tells Forminit what the value is and how to validate it:
fi-{blockType}-{name}There is no field builder. The names in your form are the schema, and the first submission creates it.
| Block | Example name | Purpose |
|---|---|---|
sender | fi-sender-email | Who is submitting: name, email, phone, company |
text | fi-text-message | Free-form text |
number | fi-number-budget | Numeric value |
select, radio, checkbox | fi-select-plan | Choices |
email, phone, url, date, country, rating | fi-url-website | Validated values |
file | fi-file-resume | File upload |
Email, phone, URL, country, rating, date and number values are validated on the server before anything is stored. Invalid submissions are rejected.
Install the SDK:
npm install forminitpnpm add forminityarn add forminitbun add forminitCall submit from a client component:
"use client"
import { Forminit } from "forminit"
const forminit = new Forminit()
export function ContactForm() {
async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault()
const { error } = await forminit.submit("YOUR_FORM_ID", new FormData(e.currentTarget))
if (error) console.error(error.message)
}
return (
<form onSubmit={onSubmit}>
<input type="email" name="fi-sender-email" required />
<textarea name="fi-text-message" required />
<button type="submit">Send</button>
</form>
)
}| Mode | Use case | Rate limit |
|---|---|---|
| Public | Client-side forms on websites and apps | 1 request per 5 seconds per IP |
| Protected | Server-side integrations | 5 requests per second per IP |
Protected mode requires an API key. Keep it on the server and never ship it to the browser.
import { Forminit } from "forminit"
const forminit = new Forminit({ apiKey: process.env.FORMINIT_API_KEY })
const { data, error } = await forminit.submit("YOUR_FORM_ID", {
blocks: [
{ type: "sender", properties: { email: "john@example.com", firstName: "John" } },
{ type: "text", name: "message", value: "Hello world" },
],
})To submit from the browser without exposing the key, pass a proxy URL and forward the request from your own route:
const forminit = new Forminit({ proxyUrl: "/api/forminit" })JSON submissions do not support file uploads. Use FormData when a form includes files.
Enable one of these in the form settings:
Every submission is stored in the dashboard. Forminit can then:
Retention is configurable per form, and expired submissions and their files are deleted automatically.
The SDK captures UTM parameters automatically, so each submission shows which campaign, source and medium produced the lead, not just that a form was sent.
No. Forminit is the backend.
Yes. Use the browser SDK in public mode.
Yes, up to 25 MB per submission, with automatic type validation.
Yes. Connect any SMTP provider to brand notifications and autoresponders.