Formgong

Free tool

HTML form builder

Formgong team ·

Build a form one field at a time. The editor below starts with a project inquiry that uses all 11 field types, so you can see each one, delete what you do not need and add your own.

Short answer: This HTML form builder is a field editor: add a field, choose its type from 11, mark it required, move it up or down, then press Update the preview. You get plain HTML plus Tailwind, Bootstrap 5, React and Vue copies. The form posts to Formgong once you add your free key. No account is needed to copy.

Build your form online

Each row is one field: its label, its type, a Required box and, for lists, the options separated by commas. The arrows move a row up or down. Remove deletes it, and Add field puts a new one at the end. When the list looks right, press “Update the preview”. The preview and all five code tabs are rebuilt from the rows in the order you left them.

The box at the top is still there if you would rather describe the form in a sentence. The AI answer replaces the preview and the code, but it does not fill the rows. Build by hand or by description, not both at once.

Fields, no AI

Live preview

Preview only. Nothing is sent from this page.

Tell us about your project

Project type *
What do you need

Copy the code

Replace fk_your_access_key with your own Formgong access key. The placeholder does not accept submissions. The honeypot field is named botcheck. Leave it empty.

The HTML form posts in the browser. React and Vue show an error on the page if the request fails. These class names need Tailwind on your site. This page does not load Tailwind. Bootstrap 5 class names need Bootstrap on your site. This page does not load Bootstrap.

HTML
<style>
#fg-fk_your_access_key{box-sizing:border-box;max-width:520px;width:100%;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif;display:grid;gap:16px}#fg-fk_your_access_key *{box-sizing:border-box}#fg-fk_your_access_key h2{font-size:24px;line-height:1.3;margin:0 0 4px;color:#0f172a}#fg-fk_your_access_key label{display:grid;gap:6px;font-weight:500}#fg-fk_your_access_key input,#fg-fk_your_access_key textarea,#fg-fk_your_access_key select{width:100%;font:inherit;min-height:44px;border:1px solid #94a3b8;border-radius:8px;padding:10px 12px;background:#fff;color:#0f172a}#fg-fk_your_access_key textarea{min-height:96px;resize:vertical}#fg-fk_your_access_key .fg-reminder-consent{display:flex;align-items:flex-start;gap:10px;font-weight:400}#fg-fk_your_access_key input[type=checkbox]{width:20px;min-height:20px;flex-shrink:0;margin:2px 0}#fg-fk_your_access_key button{font:inherit;font-weight:600;min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#ffffff;cursor:pointer}#fg-fk_your_access_key :focus-visible{outline:3px solid #4338ca;outline-offset:3px}#fg-fk_your_access_key button:disabled{cursor:wait;opacity:.7}#fg-fk_your_access_key p{margin:0}#fg-fk_your_access_key fieldset{border:0;padding:0;margin:0;display:grid;gap:8px;min-width:0}#fg-fk_your_access_key legend{font-weight:500;padding:0;margin-bottom:6px}#fg-fk_your_access_key .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}#fg-fk_your_access_key input[type=radio]{width:20px;min-height:20px;flex-shrink:0;margin:0}#fg-fk_your_access_key .fg-trap{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
</style>
<form id="fg-fk_your_access_key" action="https://formgong.com/submit" method="POST">
  <h2>Tell us about your project</h2>
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <label>Name * <input type="text" name="name" required autocomplete="name"></label>
  <label>Email * <input type="email" name="email" required autocomplete="email"></label>
  <label>Phone <input type="tel" name="phone" autocomplete="tel"></label>
  <label>Current website <input type="url" name="website"></label>
  <fieldset><legend>Project type *</legend><label class="fg-choice"><input type="radio" name="project_type" value="New site" required> New site</label><label class="fg-choice"><input type="radio" name="project_type" value="Redesign" required> Redesign</label><label class="fg-choice"><input type="radio" name="project_type" value="Small fixes" required> Small fixes</label></fieldset>
  <fieldset><legend>What do you need</legend><label class="fg-choice"><input type="checkbox" name="services" value="Design"> Design</label><label class="fg-choice"><input type="checkbox" name="services" value="Development"> Development</label><label class="fg-choice"><input type="checkbox" name="services" value="Copywriting"> Copywriting</label></fieldset>
  <label>How did you hear about us <select name="heard_from"><option value="">—</option><option value="Search">Search</option><option value="A friend">A friend</option><option value="Social media">Social media</option></select></label>
  <label>Number of pages <input type="number" name="pages"></label>
  <label>Ideal start date <input type="date" name="ideal_start_date"></label>
  <label>Project details * <textarea name="details" required></textarea></label>
  <label class="fg-choice"><input type="checkbox" name="agree" value="yes" required> I agree to be contacted about this inquiry *</label>
  
  <div class="fg-trap" aria-hidden="true"><label>Leave this field empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
  
  
  <button type="submit">Send inquiry</button>
</form>

Make it live free

Create a free form, then open Connect on that form in this browser. If it still has the default name, email and message fields, they are replaced with this form.

HTML form builders, checked 16 October 2026
This pageBasin HTML form generator
How you buildField rows you add, remove and move with arrows, or a descriptionTemplates, then add, remove and reorder fields
OutputPlain HTML with a scoped style block, plus Tailwind, Bootstrap 5, React and VuePlain HTML for your own styles
Where it postsFormgong, after you add a keyBasin, after you add an endpoint
Account to copyNoneNone

The 11 field types and the HTML they become

  • Short text: <input>. If the label is Name, the code gets autocomplete="name".
  • Email: type="email", so the browser rejects an address without an @. A field labelled Email also gets autocomplete="email", and Formgong uses it as the reply-to address.
  • Phone: type="tel", which opens the number keypad on phones.
  • Long text: a <textarea>.
  • Dropdown: a <select> whose first option is empty, so a required list makes people choose.
  • Choose one: radio buttons inside a <fieldset> with a <legend>.
  • Checkboxes: several boxes under one name. Every ticked option is sent.
  • Single checkbox: one box with the value yes, for consent or “email me a copy”.
  • Number, Date and Website: type="number", type="date" and type="url", each with the browser's own picker and check.

The field name, the key you see in the inbox and in webhooks, is made from the label: “Ideal start date” becomes ideal_start_date. Two fields with the same label get _2 on the second name. A form can have up to 20 fields.

What the builder adds for you

You only choose labels and types. The rest is written into every copy: the action pointing to Formgong's /submit address with method="POST", a hidden access_key, a hidden _lang for the thank-you page, a label tied to every field, and a hidden botcheck field that catches simple bots.

The HTML tab works without any script on your page. Formgong saves the submission and only then shows a thank-you page; a wrong key or a failed check shows an error page with the reason. The React and Vue tabs stay on the page and say “sent” only when Formgong answers success: true.

The HTML tab carries a short style block, every rule scoped to the form's id. Delete it and your own CSS takes over. Keep the field names and the hidden inputs: those are what make the form send.

Builder, generator or examples?

Use this page when you know the fields and want to set each one yourself: an inquiry with a project type, a registration with a consent box, a survey with checkboxes. For a quick name, email and message form, the HTML form generator and the contact form generator are faster. If you would rather start from a finished design, the contact form examples page has fourteen forms with previews, including a multi-step form and a file upload, which this builder does not make.

One limit to know: the rows move with the ↑ and ↓ buttons, not by dragging. The buttons work with a keyboard too.

Free limits, email and storage

The builder and the code are free. Submissions are delivered only after you replace the placeholder key.

Copying the code needs no account. AI generations are limited to 5 an hour and 10 a day for each network, plus 100 a day for the whole site. When a limit is hit, use “Build it yourself, without AI”. That path does not call the model.

On the free plan, Telegram is instant and email is sent for every submission. The free plan is 1,000 submissions a month. Auto-reply is not on the free plan. Submission data is stored in the EU. Support is Formgong at support@formgong.com.

Your description is sent to the model so it can choose fields. It is not stored. Do not paste passwords, card numbers or other secrets.

Questions

Is this HTML form builder free?

Yes. Building the form and copying the code need no account. To receive submissions, create a free Formgong form and replace fk_your_access_key with its key.

Can I drag fields to reorder them?

Not on this page. Each row has up and down arrows instead, and they work with a keyboard. The form builder inside the Formgong dashboard also supports dragging.

Which field types can I add?

Short text, email, phone, long text, dropdown, choose one (radio buttons), checkboxes, a single checkbox, number, date and website. Up to 20 fields per form.

Does the HTML form need JavaScript?

No. The HTML tab is a normal POST form. Formgong stores the submission and then shows a thank-you page, or an error page that says what went wrong.

Can I add a file upload or several steps?

Not in this builder. The contact form examples page has a file upload form and a multi-step form you can copy and edit.

Sources

Checked on 16.10.2026 against these public pages: MDN: <form>, MDN: <input> types, MDN: <fieldset>, Basin HTML form generator, Formgong HTML guide.

← Formgong