HTML Contact Form Generator (Free)

How to use

Add and edit fieldsUse the type chips to add text, email, select, checkbox, and more. Click a field to open settings and edit name, label, and options.

Reorder, theme, and colorDrag fields or use the arrows. Choose Light or Minimal, then pick an accent color for the button and focus styles.

Preview and copySwitch Preview and Code tabs, then copy HTML. The snippet starts with the Tailwind v4 browser script so classes work on a blank page. Replace YOUR_API_KEY with your FormsReach key.

Why use this HTML form generator

Static sites still need solid contact form markup. Hand-writing labels, names, and select options is slow, and a code-only tool makes it hard to see the result.

This free generator lets you assemble a contact-style form in the browser: pick field types, reorder fields, open field settings in a popup, choose a theme and accent color, preview the layout, and copy HTML with Tailwind classes. Point the form at FormsReach (or your own endpoint) when you are ready for delivery.

Preview vs Code

Preview renders the form on a light card. Submit is blocked so nothing leaves the page.
Code shows the full HTML string, starting with the Tailwind v4 browser <script> plus the form.
Copy HTML always copies that same markup. Delete the script tag if your project already includes Tailwind.

Themes and colors

Light - rounded controls and solid button.
Minimal - underline-style controls and outline button.
Accent color - zinc, slate, emerald, blue, violet, rose, or orange for the submit button and focus rings.

FormsReach fit

Create an API key in the FormsReach app, replace YOUR_API_KEY, and keep action as https://api.formsreach.com/submit. Free includes email, webhooks, and workflow rules; WhatsApp unlocks on Pro and Agency. For honeypot and time-trap fields, see the spam docs after you wire delivery.

This page is a free developer utility - not a substitute for the product form builder or dashboard.

Next steps

FAQ

Quick answers about this free browser tool and how it relates to FormsReach.

Does this tool need an account?+

No. It runs in your browser and does not upload your form HTML to FormsReach.

Will Tailwind classes work if I paste into plain HTML?+

Yes. Copied HTML starts with the Tailwind v4 browser script (cdn.jsdelivr.net/npm/@tailwindcss/browser@4) so utility classes apply on a blank page. Remove that script tag if the page already loads Tailwind.

Is this the FormsReach product form builder?+

No. This is a free browser markup generator for developers. The product form builder is separate. Wire the HTML to FormsReach when you want hosted delivery.

What is the submit URL?+

https://api.formsreach.com/submit with a hidden api_key field. See the HTML form POST docs.

Free HTML form generator with live preview

Field settings