Form Builder

Build an HTML form visually and copy the code.

Live preview
HTML
<style>
form { display: grid; gap: 14px; max-width: 480px; font-family: system-ui, sans-serif; }
.form-field { display: grid; gap: 4px; }
.form-field label { font-weight: 600; }
.form-field fieldset label { font-weight: 400; display: block; }
.form-field input:not([type="checkbox"]):not([type="radio"]), .form-field select, .form-field textarea { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; }
fieldset { border: 1px solid #ddd; border-radius: 6px; }
button[type="submit"] { padding: 10px 16px; border: 0; border-radius: 6px; background: #d10505; color: #fff; font: inherit; cursor: pointer; }
</style>
<form action="/contact" method="post">
  <div class="form-field">
    <label for="f-full_name">Full name</label>
    <input type="text" id="f-full_name" name="full_name" placeholder="Jane Doe" required>
  </div>
  <div class="form-field">
    <label for="f-email">Email</label>
    <input type="email" id="f-email" name="email" placeholder="[email protected]" required>
  </div>
  <button type="submit">Send</button>
</form>

HTML Form Builder

Contact forms, sign-ups, surveys, booking requests and support tickets all start with the same boilerplate: labels, inputs, names, ids, required flags and a submit button. The HTML Form Builder lets you assemble that markup visually. Add fields, choose their type, write labels and placeholders, reorder them with the arrow buttons and watch the form render live. When it looks right, copy the HTML — with or without a small, modern stylesheet.

Field types

  • Text inputs – text, email, password, telephone, URL, number and date, each with the correct type so mobile keyboards and browser validation work automatically.
  • Textarea for long messages.
  • Select drop-downs, radio groups and checkbox groups built from a comma-separated list of options.
  • Single checkbox for consent or newsletter opt-ins.
  • File uploads (the form switches to multipart/form-data) and hidden fields for tracking values.

Clean, accessible output

Field names are generated from the labels (Full name → full_name), ids are prefixed to avoid clashes, every input has a matching <label for>, and groups use fieldset and legend. The markup has no framework dependencies, so it drops into WordPress, a static site, a React component or an email landing page.

Connecting the form

Set the action URL and method. Use POST for anything that changes data or contains personal information, GET for search forms. Always validate the input again on the server — browser validation helps users but can be bypassed. For single fields with every attribute exposed, see generators like the HTML Text Input Generator or the HTML Textarea Generator.

Frequently Asked Questions

No. HTML forms only send data to the URL in the action attribute. Point it at your backend, a serverless function or a form service such as Formspree or Netlify Forms to receive submissions.

Every field gets a label linked with for/id, radio and checkbox groups are wrapped in a fieldset with a legend, and required fields use the native required attribute that screen readers announce.

Files can only be uploaded with multipart/form-data. The builder adds enctype="multipart/form-data" automatically as soon as a file field is present.

Yes. Turn off "Include CSS in the HTML" and the output contains only semantic markup with a form-field class on each wrapper, ready for your own styles or a CSS framework.