Getting started: build and embed your first form

Before you build anything, it helps to know what you are building on. A form backend is a hosted service that receives form submissions for you. Instead of writing server code to accept a POST, validate it, filter spam, store it, and email you, you point your form at a URL and the backend does all of that. Your site only needs to render the form.

The single thing it gives you is a form endpoint: a unique URL that turns any HTTP POST into a stored, notified submission. That endpoint is framework-agnostic by design - a plain HTML page, a React component, an Astro island, or a server action can all POST to the same URL and get identical behaviour. This is exactly why a form backend is the standard pattern for static sites and Jamstack builds, where there is no server of your own to receive the request.

For this guide you need nothing installed and no credit card. Everything below works on the Free plan, which includes one form, real-time notifications, and the default spam layers. The forms product page covers the full feature set, but you do not need it yet - the four steps that follow get you from nothing to a working form.

Start by creating a free account - no credit card required. Once you are signed in, the dashboard opens on your personal workspace.

Click New form. You will see a template chooser with two paths:

• Empty form - a backend-only endpoint. You keep your own HTML and just POST to the URL. This is the right choice if you already have a form on your site.
• A template (Contact, Newsletter, and others) - a hosted form with sensible defaults that you can design visually in the form builder. Choose this if you want a ready-made form page without writing markup.

Give the form a name (this is what shows up in your inbox and email subject lines), optionally add one or more notification emails (one address per line - each gets a copy of every clean submission), and optionally set allowed origins to restrict which domains may submit. Leave origins empty to accept submissions from anywhere while you are testing. Hit Save. The create-your-first-form doc walks through the same screen with screenshots.

Saving the form generates its unique endpoint - a URL of the form https://formspring.io/f/r2EdO-orF-3S. Anything that POSTs to that URL becomes a submission.

You can prove it works in one command before touching any markup:

curl -X POST https://formspring.io/f/r2EdO-orF-3S \
  -H "Content-Type: application/json" \
  -d '{"name":"Ada","email":"ada@example.com","message":"Hello!"}'

Refresh your inbox in the dashboard and the submission is there. Two things are already true at this point without any configuration: CORS is handled per-form (so browser submissions from your allowed origins just work), and the honeypot plus rate-limit spam layers are active. You have a working form backend before you have written a single line of front-end code.

Now wire the endpoint into your site. The contract is always the same - POST to the endpoint URL - so pick the snippet that matches your stack.

Plain HTML is the most robust option and works with JavaScript disabled. Set the form's action to your endpoint:

<form action="https://formspring.io/f/r2EdO-orF-3S" method="POST">
  <input name="name" required>
  <input type="email" name="email" required>
  <textarea name="message" required></textarea>
  <button>Send</button>
</form>

React, Next.js, Vue, and other frameworks usually want to stay on the page: intercept the submit, send FormData with fetch, and render the JSON response inline. There is no API route of your own to build - that is the whole point of a form backend. The use-case pages for Next.js, React, and Vue have copy-paste components.

Static-site generators (Astro, Hugo, Eleventy, Gatsby) are the natural fit - the form ships as zero-JavaScript HTML. See the static-site contact form pattern.

If you would rather not write markup at all, the embed options include a hosted form page and a script embed. Whichever route you pick, keep the field name attributes stable once the form is live - they are the keys your notifications, exports, and webhooks are built on.

Every clean submission does three things automatically: it appears in your inbox in real time, it triggers a notification email to each address you configured, and it is stored so you can search and export it later.

The notification email matters more than it looks. Speed of response is the highest-leverage variable in handling enquiries, so the notification includes the full submission inline - you can read and reply from your phone without logging in anywhere. You can send notifications to multiple recipients and route different forms to different people, so sales and support reach the right team from day one. The receive-your-first-submission doc covers wiring it to a real front end, and the dashboard tour shows where everything lives.

When email is not enough - you want to create a CRM contact, post to a channel, or kick off a workflow - that is what webhooks and integrations are for. They are a paid feature and out of scope for a first form, but the send-submissions-to-your-CRM guide picks up exactly there when you are ready.

Form spam arrives the moment a form is public, so two defences are on by default on every form, including Free.

The first is a honeypot field - an invisible field a human never sees but automated bots reliably fill in. Any submission that fills it is silently rejected. It costs your real visitors nothing because they never encounter it, and it catches the majority of drive-by bot traffic on its own. The honeypot doc explains the mechanism.

The second is rate limiting, which throttles repeated submissions from the same source so a script cannot hammer your endpoint. The rate-limits doc covers the thresholds.

That baseline is enough for most first forms. As traffic grows you can layer on custom rules, reputation-based spam filtering, AI moderation, or - only where a real attack justifies the conversion cost - a CAPTCHA. The stop-form-spam guide covers the full layered approach. The spam-protection overview is the doc index.

You now have a live form: an endpoint, an embed, real-time notifications, and default spam protection. From here the natural next steps depend on what you are building.

• Make the form convert better. The complete guide to online forms covers field selection, validation UX, accessibility, and the metrics that tell you whether a form is working.
• Tighten spam protection as traffic grows with the stop-form-spam guide.
• Push submissions into your tools - CRM, Slack, spreadsheets - with the send-submissions-to-your-CRM guide.
• Triage at scale with AI moderation and categorization once you are on a paid plan: the moderate-and-categorize guide.

The fastest way to learn the product is to ship a real form on a real page. Start free, create a form, and paste the endpoint into your site - the rest of the library is here when you need it.