Home › Developer Tools › HTML Form Builder
HTML Form Builder
Drag fields onto the canvas, edit labels, placeholders and validation rules, and watch a working preview update as you go. Copy clean, accessible HTML and CSS that works with any backend, or download a complete page.
Last updated:
Form fields
Field properties
Advertisement
Advertisement
How to use the HTML Form Builder
- Start from a template or a blank form, and set the form title, action URL and method in Form settings.
- Add fields: drag a field type onto the canvas or click it to add it below the selected field. Drag fields (or use the arrow buttons) to reorder them.
- Edit the selected field: label, name, placeholder, help text, options and validation rules such as required, length or pattern.
- Test the preview: fill it in and press submit to see browser validation and the data that would be sent.
- Copy the code: copy the HTML and CSS separately or download a complete page, then point the action URL at your form handler.
HTML form validation attributes
The generated code relies on the browser's built-in constraint validation, so it works without JavaScript. These are the attributes the builder can add:
| Attribute | Works on | Example | Effect |
|---|---|---|---|
required | All fields | required | Field must be filled (a radio group needs one choice, a checkbox must be ticked) |
type | input | type="email" | email and url must be well formed; number only accepts numbers |
minlength / maxlength | Text, email, password, textarea | minlength="8" | Limits the number of characters |
min / max / step | number, date, time | min="0" max="10" | Allowed range and increments |
pattern | Text, tel, password | pattern="[0-9]{5}" | The whole value must match the regular expression |
title | With pattern | title="5 digits" | Hint shown in the browser's error message |
accept | file | accept=".pdf,image/*" | Filters the file picker (not a security check) |
autocomplete | Text-like inputs | autocomplete="email" | Lets browsers and password managers fill the field (WCAG 1.3.5) |
Useful pattern examples
| Use | Pattern |
|---|---|
| US ZIP code (5 or 9 digits) | \d{5}(-\d{4})? |
| UK postcode (simplified) | [A-Za-z]{1,2}\d[A-Za-z\d]? ?\d[A-Za-z]{2} |
| Phone number (digits, spaces, + ( ) -) | [0-9 +()\-]{7,20} |
| Username (3-16 letters, digits, _) | [A-Za-z0-9_]{3,16} |
| Strong password (8+, upper, lower, digit) | (?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,} |
| Hex color | #?[0-9A-Fa-f]{6} |
The browser anchors patterns automatically, so ^ and $ are not needed.
Accessible form checklist
- Visible labels for every field, connected with
forandid. Placeholders disappear when typing and are not a substitute. - Group related choices (radio buttons, checkbox groups) in a
<fieldset>with a<legend>that asks the question. - Explain the format in help text linked with
aria-describedby, for example "At least 8 characters". - Mark required fields visibly and with the
requiredattribute, and say what the asterisk means. - Keep good contrast for text, borders and the submit button (at least 4.5:1 for text).
- Validate on the server too. Browser validation helps users but anyone can bypass it.
Frequently asked questions
Does the form send emails or store submissions?
No. This tool generates front-end HTML and CSS only. Set the form's action URL to your own server script or a form backend service, which receives the fields by their name attributes and handles email or storage.
What makes the generated form accessible?
Every input has a visible label connected with for and id, radio and checkbox groups are wrapped in a fieldset with a legend, help text is linked with aria-describedby, required fields use the native required attribute, and common fields get autocomplete hints so browsers and assistive technology can fill them in.
How does validation work?
The form uses built-in HTML validation: required, type=email/url/number, min and max, minlength and maxlength, and pattern (a regular expression the whole value must match). Browsers block submission and show a message until the rules are met. Always validate again on the server.
Why is the name attribute important?
Only fields with a name are submitted, and the name becomes the key in the submitted data (for example [email protected]). Use unique, lowercase names without spaces.
When is enctype=multipart/form-data needed?
Whenever the form has a file upload field and uses POST. The builder adds it automatically when you add a file field.
GET or POST?
Use POST for forms that send personal data, messages or files, or that change something on the server. GET puts the data in the URL and suits search and filter forms.
Is my form saved?
Your current form is saved in this browser's local storage so you can come back to it. Nothing is uploaded.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.
Related tools
HTML Table GeneratorBuild HTML tables in an editable grid with styles, header rows, CSV import and live preview.Iframe GeneratorCreate iframe embed code: size or responsive ratio, border, allow, sandbox, lazy load, live preview.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.Create Fillable PDF FormTurn any PDF into a fillable form: add text fields, checkboxes, radio buttons and dropdowns.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.