How to Add a Working Form to Your Claude-Designed Website

Q: Do I need a server or a database?

No. In Public mode the form submits directly from the browser to Forminit. There's nothing to host, no database to manage, and no backend code. Your site can stay fully static.

Q: How is this different from Typeform or Jotform?

Typeform and Jotform embed their own form UI via an iframe, replacing your design. Forminit keeps the form you built and only handles the backend. If you like your Claude design, that's the difference that matters.

Q: Does it handle file uploads?

Yes. Up to 25 MB per submission with 50+ file types. Add a file input with a name like fi-file-resume to your form.

Q: What if I'm not technical and Claude built everything?

Use the prompt route: paste a prompt with your Form ID and the skill guide URL into Claude, and it wires the integration for you. You only need to create the form and copy the Form ID from the dashboard.

By Forminit in Guides • Published June 6, 2026

Short answer: You don’t need to build a backend. Keep the form exactly as Claude designed it, connect it to Forminit (a ready-to-use form API backend), and instantly start collecting submissions, files, and email notifications, with spam blocked automatically. No server, no database, no redesign. Vibe coding? Paste one prompt back into Claude and it wires everything up for you.

You designed a beautiful form. Now what?

Claude is genuinely good at building front ends now. With Claude Design, Artifacts, or Claude Code, you can describe a site in plain language and get back a polished, responsive form (a multi-step questionnaire, a slick contact card, a lead-capture flow) in HTML or React, styled exactly how you want.

Then you hit the wall every vibe coder hits: a form is just markup until something receives the submit. Click the button and nothing happens. There’s no inbox, no email, no storage, no validation, and, if you’re collecting personal data in the EU, no GDPR story.

That last part matters more than people expect. The moment a real person types their name and email into your form, you’re processing personal data, and “where does it go and who can see it” stops being a nice-to-have.

So you’re left with three options. Two of them are bad.

Option 1: Build your own backend (don’t)

You could stand up a server, a database, an SMTP provider, file storage, spam filtering, and a CSV export, then sign a data-processing agreement with each vendor and make sure everything sits on EU infrastructure for GDPR. For a contact form.

This is real developer work, and it’s never “done.” It’s the exact maintenance project you used Claude to avoid. A simple form becomes a backend you now own forever.

Option 2: Replace your design with Typeform/Jotform (don’t)

This is the one most people reach for, and it quietly throws away the thing you liked most. Form builders embed an iframe or widget that brings its own look (its own fonts, spacing, and branding), and your carefully designed Claude form gets deleted and swapped for theirs.

Form builders assume forms should look like forms. They can’t keep your multi-step questionnaire, your animations, your layout. If the design of your current form is nice and you’d like to keep it, an embed is the wrong tool by definition.

Option 3: Keep your design, add a headless backend (do this)

Forminit is a headless form backend. You keep the front end (the form Claude built, untouched), and Forminit handles everything after the submit: receiving the data, validating it, storing it, emailing you, handling files, blocking spam, and forwarding to other tools.

There’s no iframe and no widget. You send an HTTP request from the form you already have. You own the frontend. Forminit owns the backend. No server required.

That’s the whole pitch, and it’s a perfect match for AI-designed sites: LLMs made building the form UI trivial, so the hard part is no longer the front end. It’s everything after submit. Forminit is that part.

The three options, side by side

	Build your own backend	Typeform / Jotform embed	Forminit
Keep your Claude design	Yes, but you build everything	No, an iframe replaces it	Yes, untouched
Server or database to manage	Yes	No	No
Setup time	Days	Minutes	Minutes
Submission dashboard	Build it yourself	Yes	Yes (inbox-style)
Email notifications	Configure SMTP	Yes	Built in
File uploads	Build it yourself	Limited	Up to 25 MB
Spam protection	Build it yourself	Yes	reCAPTCHA, hCaptcha, honeypot
GDPR (EU hosting + DPA)	Your responsibility	Varies by plan	AWS Ireland + DPA

If keeping your design and skipping a server both matter, the last column is the only one that does both.

How to connect your form

Step 1: Create a form on Forminit

Sign up at forminit.com
Create a new form
Open Form Settings and set authentication mode to Public (this lets the form submit straight from the browser, no API key, no server)
Copy your Form ID

Step 2: Wire it up

You have two ways to do this. If you built the site by vibe coding, the prompt route is fastest. If you’d rather paste a snippet yourself, that works too.

The fast way: prompt Claude to wire it

Forminit publishes agent skill guides, small reference docs that tell an AI tool exactly how to connect a form correctly: the field naming convention, validation rules, and error handling. Paste the right one into Claude with your Form ID and it’ll do the integration without guessing field names.

If Claude built an HTML site:

I already have a contact form in this HTML. Connect it to Forminit so submissions are collected. Keep my existing design, layout, and multi-step flow exactly as they are, only add the backend wiring.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-html/SKILL.md

If Claude built a React app:

Connect my existing form to Forminit for submissions. Keep my current components and styling, only add the integration.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-react/SKILL.md

For a multi-step questionnaire (collect every step in one submission):

I have a multi-step questionnaire form. Wire it to Forminit so all the answers from every step are submitted together at the end. Keep the multi-step UX and design exactly as is.

formId: <PASTE-YOUR-FORM-ID-HERE>

Use this integration skill guide: https://forminit.com/skills/forminit-html/SKILL.md

The skill guide is the important part. Without it, Claude might name an input email instead of fi-sender-email, and submissions arrive empty. With it, the integration is correct on the first try.

The hands-on way: add a few lines

If you’d rather do it manually, the only change to your markup is the input names. Everything else Claude built (your classes, layout, animations, multi-step logic) stays exactly as-is. Field names follow one pattern: fi-{blockType}-{name}.

<!-- Your Claude-designed form: keep all your markup, classes, and styles -->
<form id="contact-form">
  <input type="text"  name="fi-sender-fullName" placeholder="Your name" required />
  <input type="email" name="fi-sender-email"    placeholder="Email" required />
  <textarea name="fi-text-message" placeholder="How can we help?" required></textarea>
  <button type="submit">Send</button>
  <p id="form-status"></p>
</form>

<!-- Add two things: the Forminit script, and a short submit handler -->
<script src="https://forminit.com/sdk/v1/forminit.js"></script>
<script>
  const forminit = new Forminit();
  const form = document.getElementById('contact-form');
  const status = document.getElementById('form-status');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const { error } = await forminit.submit('YOUR_FORM_ID', new FormData(form));
    status.textContent = error ? error.message : 'Thanks! We got your message.';
    if (!error) form.reset();
  });
</script>

That’s it. No build step, no npm, no server. Drop the HTML on any static host (Netlify, Vercel, Cloudflare Pages, GitHub Pages, or wherever Claude’s output is deployed) and it works.

Need other field types? select, radio, checkbox, rating, date, file, number, url, country all follow the same fi- pattern. See the Form Blocks reference for the full list. Using React instead of plain HTML? The React integration guide covers the npm install forminit path.

What about multi-step forms?

They just work. A multi-step form is still a single <form>. The steps are shown and hidden with JavaScript, and the final submit sends the whole FormData at once. Forminit doesn’t care how many steps the user clicked through; it receives all the named fields together. Keep your progress bar and transitions exactly as Claude designed them, and make sure each input across every step has a fi- name.

What happens after someone submits

Once the form posts, Forminit automatically:

Validates every field server-side (email format, phone format, file types) so garbage never reaches you
Stores the submission in an inbox-style dashboard you control
Emails you (and any teammates) a notification
Captures attribution like UTM parameters, ad click IDs, referrer, and geolocation
Forwards the data anywhere you need via webhooks, Zapier, Slack, or Discord

You can also enable an autoresponder to reply to the person who submitted, and turn on reCAPTCHA, hCaptcha, or a honeypot for spam, all from the dashboard, no code.

Frequently asked questions

Can I really keep the exact design Claude made?

Yes. That’s the entire point of going headless. Forminit never touches your markup or styles. The only edits are the name="fi-..." attributes on inputs (and a small submit handler). Your layout, Tailwind classes, multi-step flow, and animations are untouched.

Do I need a server or a database?

No. In Public mode the form submits directly from the browser to Forminit. There’s nothing to host, no database to manage, and no backend code. Your site can stay fully static.

Forminit gives you the compliant infrastructure: EU data residency (AWS Ireland), a DPA, ICO-registered operations, your email kept out of the page source, and full control to export or delete submissions. You’re responsible for your own privacy notice and, where required, consent, which is just a checkbox and a link on your form.

How is this different from Typeform or Jotform?

Those embed their own form UI via an iframe, replacing your design. Forminit keeps the form you built and only handles the backend. If you like your Claude design, that’s the difference that matters.

Does it handle file uploads?

Yes. Up to 25 MB per submission with 50+ file types. Add an <input type="file" name="fi-file-resume" /> to your form. See the file upload guide.

What if I’m not technical and Claude built everything?

Then use the prompt route above. Paste the prompt with your Form ID and the skill guide URL into Claude, and it wires the integration for you. You only need to create the form and copy the Form ID from the dashboard.

This is the question the embed-vs-DIY debate usually skips, so let’s be direct about it.

Forminit is built for EU data handling:

EU data residency. Submissions are stored on AWS servers in Ireland (EU).
A real data processor relationship. Forminit provides a DPA (Data Processing Agreement) and documents how data is handled. The operating company, UXPLUS LTD, is registered with the UK ICO.
Your email is never in the page source. Forminit uses a Form ID in the request, not your email address. Email-to-form services that put action="...your@email.com" in the HTML leak your address to scrapers, and that’s a liability, not just spam.
You control the data. Submissions live in your dashboard. You can view, export, and delete them, and grant teammates role-based access instead of sharing a mailbox.

One honest caveat: no backend makes you automatically compliant. GDPR also depends on what you do on your side: a clear privacy notice, a lawful basis, and (for marketing) consent. The good news is that’s easy to add to a Claude form: drop in a consent checkbox and link your privacy policy. Forminit gives you the compliant infrastructure; you supply the notice and consent.