Bootstrap form generator online

Use the sample, or describe another form. The Bootstrap 5 tab is the one that matches this search. The same fields are also available as plain HTML, Tailwind, React and Vue.

Bootstrap 4 class names are not what this tab emits. There is no form-group, no custom-select and no form-control-label. Those names changed in Bootstrap 5.

Describe your form

Live preview

Preview only. Nothing is sent from this page.

Write to the team

Name * Email * Phone Department * Message * Email me a copy

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:#fff;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>Write to the team</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>Department * <select name="department" required><option value="">—</option><option value="Sales">Sales</option><option value="Support">Support</option></select></label>
  <label>Message * <textarea name="message" required></textarea></label>
  <label class="fg-choice"><input type="checkbox" name="copy" value="yes"> Email me a copy</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</button>
</form>

HTML + Tailwind

<form class="relative mx-auto grid w-full max-w-lg gap-4 rounded-lg border border-slate-200 bg-white p-6 text-base text-slate-900" action="https://formgong.com/submit" method="POST">
  <h2 class="text-2xl font-semibold">Write to the team</h2>
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <div class="grid gap-1"><label class="font-medium" for="tw-name">Name *</label><input class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" id="tw-name" type="text" name="name" autocomplete="name" required></div>
  <div class="grid gap-1"><label class="font-medium" for="tw-email">Email *</label><input class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" id="tw-email" type="email" name="email" autocomplete="email" required></div>
  <div class="grid gap-1"><label class="font-medium" for="tw-phone">Phone</label><input class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" id="tw-phone" type="tel" name="phone" autocomplete="tel"></div>
  <div class="grid gap-1"><label class="font-medium" for="tw-department">Department *</label><select class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" id="tw-department" name="department" required><option value="">Choose</option><option value="Sales">Sales</option><option value="Support">Support</option></select></div>
  <div class="grid gap-1"><label class="font-medium" for="tw-message">Message *</label><textarea class="w-full rounded-md border border-slate-400 bg-white px-3 py-2 text-base text-slate-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700 min-h-24" id="tw-message" name="message" required></textarea></div>
  <label class="flex items-center gap-2 font-normal" for="tw-copy"><input class="h-5 w-5" id="tw-copy" type="checkbox" name="copy" value="yes"> Email me a copy</label>
  <div class="absolute start-0 top-0 h-px w-px overflow-hidden" aria-hidden="true"><label>Leave this empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
  <button class="min-h-12 rounded-md bg-indigo-700 px-4 py-3 font-semibold text-white" type="submit">Send</button>
</form>

Bootstrap 5

<form class="position-relative mx-auto" style="max-width:32rem" action="https://formgong.com/submit" method="POST">
  <h2 class="h4 mb-3">Write to the team</h2>
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <div class="mb-3"><label class="form-label" for="bs-name">Name *</label><input class="form-control" id="bs-name" type="text" name="name" autocomplete="name" required></div>
  <div class="mb-3"><label class="form-label" for="bs-email">Email *</label><input class="form-control" id="bs-email" type="email" name="email" autocomplete="email" required></div>
  <div class="mb-3"><label class="form-label" for="bs-phone">Phone</label><input class="form-control" id="bs-phone" type="tel" name="phone" autocomplete="tel"></div>
  <div class="mb-3"><label class="form-label" for="bs-department">Department *</label><select class="form-select" id="bs-department" name="department" required><option value="">Choose</option><option value="Sales">Sales</option><option value="Support">Support</option></select></div>
  <div class="mb-3"><label class="form-label" for="bs-message">Message *</label><textarea class="form-control" id="bs-message" name="message" rows="4" required></textarea></div>
  <div class="mb-3 form-check"><input class="form-check-input" type="checkbox" id="bs-copy" name="copy" value="yes"><label class="form-check-label" for="bs-copy">Email me a copy</label></div>
  <div class="position-absolute top-0 start-0 overflow-hidden" style="width:1px;height:1px" aria-hidden="true"><label>Leave this empty<input name="botcheck" tabindex="-1" autocomplete="off"></label></div>
  <button class="btn btn-primary" type="submit">Send</button>
</form>

React

import { useEffect, useRef, useState } from "react";

// Visitor language for Formgong messages, thank-you text and autoreply.
const LANG = "en";

export default function ContactForm() {
  const captcha = useRef(null);
  const feedback = useRef(null);
  const [failed, setFailed] = useState(false);
  const [busy, setBusy] = useState(false);
  const [status, setStatus] = useState("");
  useEffect(() => mountCaptcha(captcha.current, null), []);
  useEffect(() => { if (failed && status) feedback.current?.focus(); }, [failed, status]);
  async function onSubmit(event) {
    event.preventDefault();
    if (busy) return;
    const form = event.currentTarget;
    const body = new FormData(form);
    body.set("access_key", "fk_your_access_key");
    body.set("_lang", LANG);
    setBusy(true);
    setFailed(false);
    setStatus("Sending…");
    try {
      const response = await fetch("https://formgong.com/submit", {
        method: "POST", headers: { Accept: "application/json" }, body,
      });
      const result = await response.json();
      setFailed(!result.success);
      setStatus(result.success ? (result.message || "Sent. Thank you!") : (result.message || "Could not send. Please try again."));
    } catch { setFailed(true); setStatus("Connection failed. Please try again."); }
    finally { setBusy(false); resetCaptcha(form); }
  }
  return <form id="fg-fk_your_access_key" onSubmit={onSubmit} aria-busy={busy}>
    <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:#fff;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>
    <h2>{"Write to the team"}</h2>
    <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>{"Department"} * <select name="department" required><option value="">—</option><option value={"Sales"}>{"Sales"}</option><option value={"Support"}>{"Support"}</option></select></label>
  <label>{"Message"} * <textarea name="message" required /></label>
  <label className="fg-choice"><input type="checkbox" name="copy" value={"yes"} /> {"Email me a copy"}</label>
    
    <div aria-hidden="true" style={{position:"absolute",insetInlineStart:0,top:0,width:1,height:1,overflow:"hidden",clipPath:"inset(50%)"}}><input name="botcheck" tabIndex={-1} autoComplete="off" /></div>
    
    
    <button type="submit" disabled={busy}>{busy ? "Sending…" : "Send"}</button>
    <p ref={feedback} role="status" tabIndex={-1}>{status}</p>
  </form>;
}

function mountCaptcha(node, siteKey) {
  if (!node || !siteKey) return () => {};
  let disposed = false;
  let widget;
  function render() {
    if (disposed || !window.turnstile) return;
    window.turnstile.ready(() => {
      if (disposed) return;
      widget = window.turnstile.render(node, { sitekey: siteKey, language: node.dataset.language || document.documentElement.lang || "auto" });
      node.dataset.widgetId = widget;
    });
  }
  if (window.turnstile) render();
  else {
    let script = document.querySelector('script[src^="https://challenges.cloudflare.com/turnstile/v0/api.js"]');
    if (!script) {
      script = document.createElement("script");
      script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit";
      script.async = true;
      document.head.appendChild(script);
    }
    script.addEventListener("load", render, { once: true });
  }
  return () => { disposed = true; if (widget !== undefined) window.turnstile?.remove(widget); };
}
function resetCaptcha(form) {
  const widget = form.querySelector("[data-turnstile]")?.dataset.widgetId;
  if (widget !== undefined) window.turnstile?.reset(widget);
}

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.

Bootstrap form tools, checked 11 October 2026
	This page	Start Bootstrap form builder
Bootstrap version	5 class names only	Bootstrap 5 builder
How you build	A description, or fields typed by hand	Drag and drop
Delivery	Posts to Formgong after you add a key	Markup you host yourself
Account	None to copy the code	Check their page for the current rule

Bootstrap 5 form classes in the copy

Spacing. Each field sits in mb-3, the Bootstrap 5 margin utility. Bootstrap 4 often used form-group for that gap.
Text, email, phone, number, date, url, textarea. form-label plus form-control. The label’s for matches the input id (bs- plus the field name).
Select. form-select, not the old custom-select. The first option is an empty “Choose”.
One checkbox. form-check, form-check-input and form-check-label. The sample’s “Email me a copy” box is optional.
Radio or checkbox group. A fieldset and legend, then one form-check per option. Radios share a name.
Button. btn btn-primary. Change btn-primary if your theme uses another button color.
Honeypot. botcheck is clipped to one pixel with an inline style, so it stays hidden even before Bootstrap’s CSS loads.

The form posts with method="POST" to /submit. You do not need Bootstrap’s validation JavaScript. The required attribute is enough for an empty-field check.

Load Bootstrap on your site, not here

This page does not include Bootstrap’s stylesheet. The live preview uses Formgong’s preview CSS, so it will not look like a Bootstrap form until you paste the code.

On your site, load Bootstrap 5 before the form. A typical 5.3 stylesheet link is the one in the Bootstrap introduction. If you already compile Bootstrap from Sass, do not add a second copy.

Drag-and-drop builders such as Start Bootstrap’s form builder and Bootsnipp’s form tool are a better fit when you want to arrange a grid by hand. This page is the copy-paste path: describe the fields, or edit them without AI, then take the markup.

Forms this sample is meant for

A support or sales inbox. The department list tells you who should see the lead. Change the option text to your own team names.
A Bootstrap theme or admin skin. The classes match the theme’s inputs, so the form does not need a second CSS system.
A static page. Paste the HTML into a Bootstrap template. The HTML contact form guide covers the hidden fields Formgong understands.

This generator does not build a Bootstrap grid of several columns, a floating label, or an input group with an icon. Add those classes yourself if the theme needs them. The field names and the honeypot should stay as they are.

Free limits, email and storage

Generating Bootstrap markup is free. The form delivers mail only after the placeholder key is real.

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 300 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

What is a Bootstrap form generator?

It writes a form that uses Bootstrap’s class names. This one targets Bootstrap 5: form-control, form-select, form-check and btn btn-primary. It does not emit Bootstrap 4 class names.

Is there a Bootstrap 5 form generator online?

Yes. This page is the online tool. The Bootstrap 5 tab is selected when you open it. Copy the code with no account. Load Bootstrap 5 on your own site.

Does the preview look like Bootstrap?

No. This page does not load Bootstrap’s CSS. Paste the snippet into a Bootstrap 5 page to see form-control and btn-primary.

How is this different from Bootstrap 4 form HTML?

Bootstrap 5 replaced form-group with margin utilities, custom-select with form-select, and form-control-label with form-label. The copy on this page uses the Bootstrap 5 names.

Will submissions arrive by email?

After you replace fk_your_access_key, yes. On the free plan, Telegram is instant and email is sent for every submission. The free plan is 300 a month.

Sources

Checked on 11.10.2026 against these public pages: Bootstrap 5.3 forms, Bootstrap introduction, Start Bootstrap form builder, Bootstrap Form Builder, Bootsnipp forms.

← Formgong