KI-Formulargenerator: kostenloser HTML-Code

Formular bauen

Wählen Sie ein Startformular oder beschreiben Sie Ihres, dann bearbeiten Sie die Felder. Vorschau und Code ändern sich beim Tippen. Die KI-Antwort wird gegen eine feste Liste von Feldtypen geprüft, und Ihre Beschreibung wird nie als HTML ausgegeben.

1. Mit einem Formular starten

Oder beschreiben Sie das Formular und lassen Sie die KI die Felder ausfüllen

Beschreiben Sie Ihr Formular

Nur Ihre Beschreibung geht an das KI-Modell. Die Antwort ersetzt die Felder darüber, und Sie können sie wie alle anderen bearbeiten.

2. Felder bearbeiten

Formular-Überschrift Button-Text

Beschriftung Typ Platzhalter

Pflichtfeld
Beschriftung Typ Platzhalter

Pflichtfeld
Beschriftung Typ Platzhalter

Pflichtfeld

3. Live-Vorschau prüfen

Das ist der HTML-Tab, gerendert. Setzen Sie in Schritt 4 Ihren Zugriffsschlüssel ein, dann sendet der Button eine echte Test-Einsendung.

4. Zugriffsschlüssel einsetzen

Zugriffsschlüssel

Jede Kopie unten übernimmt ihn beim Tippen. Bis dahin steht im Code fk_your_access_key, das Formgong ablehnt.

5. Code kopieren

Schlichtes HTML mit einem kurzen Style-Block. Das Skript am Ende ist optional: Es hält Besucher auf der Seite und meldet „gesendet“ nur, wenn Formgong success: true antwortet. Löschen Sie es, dann sendet der Browser das Formular selbst.

HTML

<style>
#fg-form{position:relative;box-sizing:border-box;display:grid;gap:16px;width:100%;max-width:520px;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif}
#fg-form *{box-sizing:border-box}
#fg-form h2{margin:0;font-size:24px;line-height:1.3}
#fg-form .fg-field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
#fg-form label,#fg-form legend{font-weight:500}
#fg-form legend{padding:0;margin-bottom:2px}
#fg-form input,#fg-form select,#fg-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #94a3b8;border-radius:8px;background:#fff;color:inherit;font:inherit}
#fg-form textarea{min-height:120px;resize:vertical}
#fg-form .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}
#fg-form .fg-choice input{width:20px;min-height:20px;margin:0;flex-shrink:0}
#fg-form [aria-invalid=true]{border-color:#b91c1c}
#fg-form .fg-error{margin:0;color:#b91c1c;font-size:14px}
#fg-form .fg-status{margin:0}
#fg-form .fg-error:empty,#fg-form .fg-status:empty{display:none}
#fg-form button{min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#fff;font:inherit;font-weight:600;cursor:pointer}
#fg-form button:disabled{opacity:.7;cursor:wait}
#fg-form :focus-visible{outline:3px solid #4338ca;outline-offset:3px}
#fg-form .fg-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
</style>
<form id="fg-form" action="https://formgong.com/submit" method="POST">
  <h2>Contact us</h2>
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <div class="fg-field">
    <label for="fg-name">Name *</label>
    <input type="text" id="fg-name" name="name" autocomplete="name" required aria-describedby="fg-name-error" placeholder="Jane Smith">
    <p class="fg-error" id="fg-name-error"></p>
  </div>
  <div class="fg-field">
    <label for="fg-email">Email *</label>
    <input type="email" id="fg-email" name="email" autocomplete="email" required aria-describedby="fg-email-error" placeholder="jane@example.com">
    <p class="fg-error" id="fg-email-error"></p>
  </div>
  <div class="fg-field">
    <label for="fg-message">Message *</label>
    <textarea id="fg-message" name="message" required aria-describedby="fg-message-error" placeholder="How can we help?" rows="4"></textarea>
    <p class="fg-error" id="fg-message-error"></p>
  </div>
  <div class="fg-trap" aria-hidden="true"><label>Leave this empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label></div>
  <button type="submit">Send message</button>
  <p class="fg-status" data-fg-status role="status"></p>
</form>
<script>
// Optional. Without it the browser posts the form and Formgong shows its own thank-you or error page.
(function () {
  var form = document.getElementById("fg-form");
  var status = form.querySelector("[data-fg-status]");
  form.noValidate = true;
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var first = null, seen = {};
    Array.prototype.forEach.call(form.elements, function (field) {
      var id = field.getAttribute("aria-describedby");
      if (!id || seen[id]) return;
      seen[id] = true;
      var ok = field.checkValidity();
      field.setAttribute("aria-invalid", ok ? "false" : "true");
      document.getElementById(id).textContent = ok ? "" : field.validationMessage;
      if (!ok && !first) first = field;
    });
    if (first) { first.focus(); return; }
    var button = form.querySelector("[type=submit]");
    button.disabled = true;
    status.textContent = "Sending…";
    fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) })
      .then(function (response) { return response.json().catch(function () { return {}; }); })
      .then(function (data) {
        if (data.success === true) { form.reset(); status.textContent = "Thank you. Your message was sent."; }
        else status.textContent = data.message || "Could not send. Please try again.";
      })
      .catch(function () { status.textContent = "Could not reach the server. Check your connection and try again."; })
      .then(function () { button.disabled = false; });
  });
})();
</script>

Dasselbe Formular mit Tailwind-Klassen. Ihre Website muss Tailwind laden; diese Seite tut es nicht.

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" id="tw-form" action="https://formgong.com/submit" method="POST">
  <h2 class="text-2xl font-semibold">Contact us</h2>
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="en">
  <div class="grid gap-1.5">
    <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 aria-[invalid=true]:border-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" type="text" id="tw-name" name="name" autocomplete="name" required aria-describedby="tw-name-error" placeholder="Jane Smith">
    <p class="text-sm text-red-700 empty:hidden" id="tw-name-error"></p>
  </div>
  <div class="grid gap-1.5">
    <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 aria-[invalid=true]:border-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700" type="email" id="tw-email" name="email" autocomplete="email" required aria-describedby="tw-email-error" placeholder="jane@example.com">
    <p class="text-sm text-red-700 empty:hidden" id="tw-email-error"></p>
  </div>
  <div class="grid gap-1.5">
    <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 aria-[invalid=true]:border-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-700 min-h-28" id="tw-message" name="message" required aria-describedby="tw-message-error" placeholder="How can we help?" rows="4"></textarea>
    <p class="text-sm text-red-700 empty:hidden" id="tw-message-error"></p>
  </div>
  <div class="absolute -left-[9999px] h-px w-px overflow-hidden" aria-hidden="true"><label>Leave this empty <input type="text" 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 disabled:opacity-70" type="submit">Send message</button>
  <p class="empty:hidden" data-fg-status role="status"></p>
</form>
<script>
// Optional. Without it the browser posts the form and Formgong shows its own thank-you or error page.
(function () {
  var form = document.getElementById("tw-form");
  var status = form.querySelector("[data-fg-status]");
  form.noValidate = true;
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var first = null, seen = {};
    Array.prototype.forEach.call(form.elements, function (field) {
      var id = field.getAttribute("aria-describedby");
      if (!id || seen[id]) return;
      seen[id] = true;
      var ok = field.checkValidity();
      field.setAttribute("aria-invalid", ok ? "false" : "true");
      document.getElementById(id).textContent = ok ? "" : field.validationMessage;
      if (!ok && !first) first = field;
    });
    if (first) { first.focus(); return; }
    var button = form.querySelector("[type=submit]");
    button.disabled = true;
    status.textContent = "Sending…";
    fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) })
      .then(function (response) { return response.json().catch(function () { return {}; }); })
      .then(function (data) {
        if (data.success === true) { form.reset(); status.textContent = "Thank you. Your message was sent."; }
        else status.textContent = data.message || "Could not send. Please try again.";
      })
      .catch(function () { status.textContent = "Could not reach the server. Check your connection and try again."; })
      .then(function () { button.disabled = false; });
  });
})();
</script>

Dasselbe Formular mit Bootstrap-5-Klassen. Ihre Website muss Bootstrap laden; diese Seite tut es nicht.

Bootstrap 5

<form class="position-relative mx-auto" id="bs-form" action="https://formgong.com/submit" method="POST">
  <h2 class="h4 mb-3">Contact us</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" type="text" id="bs-name" name="name" autocomplete="name" required aria-describedby="bs-name-error" placeholder="Jane Smith">
    <p class="form-text text-danger" id="bs-name-error"></p>
  </div>
  <div class="mb-3">
    <label class="form-label" for="bs-email">Email *</label>
    <input class="form-control" type="email" id="bs-email" name="email" autocomplete="email" required aria-describedby="bs-email-error" placeholder="jane@example.com">
    <p class="form-text text-danger" id="bs-email-error"></p>
  </div>
  <div class="mb-3">
    <label class="form-label" for="bs-message">Message *</label>
    <textarea class="form-control" id="bs-message" name="message" required aria-describedby="bs-message-error" placeholder="How can we help?" rows="4"></textarea>
    <p class="form-text text-danger" id="bs-message-error"></p>
  </div>
  <div class="visually-hidden" aria-hidden="true"><label>Leave this empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label></div>
  <button class="btn btn-primary" type="submit">Send message</button>
  <p class="mt-3 mb-0" data-fg-status role="status"></p>
</form>
<script>
// Optional. Without it the browser posts the form and Formgong shows its own thank-you or error page.
(function () {
  var form = document.getElementById("bs-form");
  var status = form.querySelector("[data-fg-status]");
  form.noValidate = true;
  form.addEventListener("submit", function (event) {
    event.preventDefault();
    var first = null, seen = {};
    Array.prototype.forEach.call(form.elements, function (field) {
      var id = field.getAttribute("aria-describedby");
      if (!id || seen[id]) return;
      seen[id] = true;
      var ok = field.checkValidity();
      field.setAttribute("aria-invalid", ok ? "false" : "true");
      document.getElementById(id).textContent = ok ? "" : field.validationMessage;
      if (!ok && !first) first = field;
    });
    if (first) { first.focus(); return; }
    var button = form.querySelector("[type=submit]");
    button.disabled = true;
    status.textContent = "Sending…";
    fetch(form.action, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) })
      .then(function (response) { return response.json().catch(function () { return {}; }); })
      .then(function (data) {
        if (data.success === true) { form.reset(); status.textContent = "Thank you. Your message was sent."; }
        else status.textContent = data.message || "Could not send. Please try again.";
      })
      .catch(function () { status.textContent = "Could not reach the server. Check your connection and try again."; })
      .then(function () { button.disabled = false; });
  });
})();
</script>

Eine Komponente mit eigenen Styles. Sie prüft jedes Feld, sendet FormData und meldet „gesendet“ nur, wenn Formgong success: true antwortet.

React

import { useState } from "react";

const ENDPOINT = "https://formgong.com/submit";
const CSS = "#fg-form{position:relative;box-sizing:border-box;display:grid;gap:16px;width:100%;max-width:520px;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif}\n#fg-form *{box-sizing:border-box}\n#fg-form h2{margin:0;font-size:24px;line-height:1.3}\n#fg-form .fg-field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}\n#fg-form label,#fg-form legend{font-weight:500}\n#fg-form legend{padding:0;margin-bottom:2px}\n#fg-form input,#fg-form select,#fg-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #94a3b8;border-radius:8px;background:#fff;color:inherit;font:inherit}\n#fg-form textarea{min-height:120px;resize:vertical}\n#fg-form .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}\n#fg-form .fg-choice input{width:20px;min-height:20px;margin:0;flex-shrink:0}\n#fg-form [aria-invalid=true]{border-color:#b91c1c}\n#fg-form .fg-error{margin:0;color:#b91c1c;font-size:14px}\n#fg-form .fg-status{margin:0}\n#fg-form .fg-error:empty,#fg-form .fg-status:empty{display:none}\n#fg-form button{min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#fff;font:inherit;font-weight:600;cursor:pointer}\n#fg-form button:disabled{opacity:.7;cursor:wait}\n#fg-form :focus-visible{outline:3px solid #4338ca;outline-offset:3px}\n#fg-form .fg-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}";

export default function GeneratedForm() {
  const [errors, setErrors] = useState({});
  const [status, setStatus] = useState("");
  const [busy, setBusy] = useState(false);

  async function onSubmit(event) {
    event.preventDefault();
    const form = event.currentTarget;
    const found = {};
    for (const field of form.elements) {
      if (field.name && !(field.name in found) && !field.checkValidity()) found[field.name] = field.validationMessage;
    }
    setErrors(found);
    const first = Object.keys(found)[0];
    if (first) { form.querySelector(`[name="${first}"]`).focus(); return; }
    setBusy(true);
    setStatus("Sending…");
    try {
      const response = await fetch(ENDPOINT, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) });
      const data = await response.json().catch(() => ({}));
      if (data.success === true) {
        form.reset();
        setStatus("Thank you. Your message was sent.");
      } else {
        setStatus(data.message || "Could not send. Please try again.");
      }
    } catch {
      setStatus("Could not reach the server. Check your connection and try again.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <form id="fg-form" action={ENDPOINT} method="POST" onSubmit={onSubmit} noValidate aria-busy={busy}>
      <style>{CSS}</style>
      <h2>{"Contact us"}</h2>
      <input type="hidden" name="access_key" value={"fk_your_access_key"} />
      <input type="hidden" name="_lang" value={"en"} />
      <div className="fg-field">
        <label htmlFor="fg-name">{"Name *"}</label>
        <input type="text" id="fg-name" name="name" autoComplete="name" required aria-describedby="fg-name-error" aria-invalid={errors.name ? "true" : undefined} placeholder={"Jane Smith"} />
        <p className="fg-error" id="fg-name-error">{errors.name}</p>
      </div>
      <div className="fg-field">
        <label htmlFor="fg-email">{"Email *"}</label>
        <input type="email" id="fg-email" name="email" autoComplete="email" required aria-describedby="fg-email-error" aria-invalid={errors.email ? "true" : undefined} placeholder={"jane@example.com"} />
        <p className="fg-error" id="fg-email-error">{errors.email}</p>
      </div>
      <div className="fg-field">
        <label htmlFor="fg-message">{"Message *"}</label>
        <textarea id="fg-message" name="message" required aria-describedby="fg-message-error" aria-invalid={errors.message ? "true" : undefined} placeholder={"How can we help?"} rows={4} />
        <p className="fg-error" id="fg-message-error">{errors.message}</p>
      </div>
      <div className="fg-trap" aria-hidden="true"><label>Leave this empty <input type="text" name="botcheck" tabIndex={-1} autoComplete="off" /></label></div>
      <button type="submit" disabled={busy}>{"Send message"}</button>
      <p className="fg-status" role="status">{status}</p>
    </form>
  );
}

Eine Single-File-Komponente, die dasselbe tut wie die React-Version.

Vue

<script setup>
import { reactive, ref } from "vue";

const endpoint = "https://formgong.com/submit";
const errors = reactive({});
const status = ref("");
const busy = ref(false);

async function onSubmit(event) {
  const form = event.currentTarget;
  for (const name of Object.keys(errors)) delete errors[name];
  for (const field of form.elements) {
    if (field.name && !(field.name in errors) && !field.checkValidity()) errors[field.name] = field.validationMessage;
  }
  const first = Object.keys(errors)[0];
  if (first) { form.querySelector(`[name="${first}"]`).focus(); return; }
  busy.value = true;
  status.value = "Sending…";
  try {
    const response = await fetch(endpoint, { method: "POST", headers: { Accept: "application/json" }, body: new FormData(form) });
    const data = await response.json().catch(() => ({}));
    if (data.success === true) {
      form.reset();
      status.value = "Thank you. Your message was sent.";
    } else {
      status.value = data.message || "Could not send. Please try again.";
    }
  } catch {
    status.value = "Could not reach the server. Check your connection and try again.";
  } finally {
    busy.value = false;
  }
}
</script>

<template>
  <form id="fg-form" :action="endpoint" method="POST" novalidate :aria-busy="busy" @submit.prevent="onSubmit">
    <h2>Contact us</h2>
    <input type="hidden" name="access_key" value="fk_your_access_key">
    <input type="hidden" name="_lang" value="en">
    <div class="fg-field">
      <label for="fg-name">Name *</label>
      <input type="text" id="fg-name" name="name" autocomplete="name" required aria-describedby="fg-name-error" :aria-invalid="errors.name ? 'true' : undefined" placeholder="Jane Smith">
      <p class="fg-error" id="fg-name-error">{{ errors.name }}</p>
    </div>
    <div class="fg-field">
      <label for="fg-email">Email *</label>
      <input type="email" id="fg-email" name="email" autocomplete="email" required aria-describedby="fg-email-error" :aria-invalid="errors.email ? 'true' : undefined" placeholder="jane@example.com">
      <p class="fg-error" id="fg-email-error">{{ errors.email }}</p>
    </div>
    <div class="fg-field">
      <label for="fg-message">Message *</label>
      <textarea id="fg-message" name="message" required aria-describedby="fg-message-error" :aria-invalid="errors.message ? 'true' : undefined" placeholder="How can we help?" rows="4"></textarea>
      <p class="fg-error" id="fg-message-error">{{ errors.message }}</p>
    </div>
    <div class="fg-trap" aria-hidden="true"><label>Leave this empty <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label></div>
    <button type="submit" :disabled="busy">Send message</button>
    <p class="fg-status" role="status">{{ status }}</p>
  </form>
</template>

<style>
#fg-form{position:relative;box-sizing:border-box;display:grid;gap:16px;width:100%;max-width:520px;padding:28px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#0f172a;font:16px/1.5 system-ui,sans-serif}
#fg-form *{box-sizing:border-box}
#fg-form h2{margin:0;font-size:24px;line-height:1.3}
#fg-form .fg-field{display:grid;gap:6px;min-width:0;margin:0;padding:0;border:0}
#fg-form label,#fg-form legend{font-weight:500}
#fg-form legend{padding:0;margin-bottom:2px}
#fg-form input,#fg-form select,#fg-form textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid #94a3b8;border-radius:8px;background:#fff;color:inherit;font:inherit}
#fg-form textarea{min-height:120px;resize:vertical}
#fg-form .fg-choice{display:flex;align-items:center;gap:10px;font-weight:400}
#fg-form .fg-choice input{width:20px;min-height:20px;margin:0;flex-shrink:0}
#fg-form [aria-invalid=true]{border-color:#b91c1c}
#fg-form .fg-error{margin:0;color:#b91c1c;font-size:14px}
#fg-form .fg-status{margin:0}
#fg-form .fg-error:empty,#fg-form .fg-status:empty{display:none}
#fg-form button{min-height:48px;padding:12px 20px;border:0;border-radius:8px;background:#4338ca;color:#fff;font:inherit;font-weight:600;cursor:pointer}
#fg-form button:disabled{opacity:.7;cursor:wait}
#fg-form :focus-visible{outline:3px solid #4338ca;outline-offset:3px}
#fg-form .fg-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
</style>

Fügen Sie das in Lovable, Bolt, v0, Claude oder Cursor ein. Es verlangt dieselben Felder, Namen und Prüfungen und sagt dem Baukasten, kein eigenes Backend zu erfinden.

KI-Baukasten-Prompt

Add a working form to my site. Match my site's existing design, but keep the field names, order and behaviour below exactly.

Heading: "Contact us". Submit button: "Send message".

Fields, in this order (the name attribute comes first):
1. name: label "Name", short text, required; placeholder "Jane Smith"; autocomplete="name"
2. email: label "Email", email address (type=email), required; placeholder "jane@example.com"; autocomplete="email"
3. message: label "Message", long text (textarea), required; placeholder "How can we help?"

Sending:
- On submit, send the form with fetch as FormData (not JSON) to POST https://formgong.com/submit with the header Accept: application/json.
- Include two hidden inputs: access_key = fk_your_access_key and _lang = en.
- Add a spam trap: a text input named botcheck, inside a wrapper with aria-hidden="true" that is moved off-screen, with tabindex="-1" and autocomplete="off". Real visitors never see or fill it.
- Show a success message only when the JSON answer has success === true, then reset the form. Otherwise show the answer's message field, or a short generic error. Disable the button while sending.

Accessibility:
- Every field has a visible label tied to it with for and id. Radio buttons and checkbox groups sit in a fieldset with a legend.
- Each field has its own error line linked with aria-describedby. Before sending, check validity in the browser and write each invalid field's validationMessage into its error line, set aria-invalid, and focus the first invalid field.

Do not create a backend, an API route, a database table, a server action or an account with another form service. Formgong stores the submission and emails it.

So benutzen Sie den Formular-Generator

Starten Sie mit einem Formular: Kontakt, Angebotsanfrage, Terminanfrage, Bewerbung, Feedback, Newsletter, Veranstaltungsanmeldung oder Support-Anfrage. Oder beschreiben Sie Ihres in einem Satz und lassen Sie die KI die Felder ausfüllen.
Bearbeiten Sie die Felder. Jede Zeile hat eine Beschriftung, einen Typ, einen Platzhalter, ein Pflichtfeld-Kästchen und, bei Listen, die Optionen. Die Pfeile verschieben eine Zeile; Entfernen löscht sie.
Schauen Sie auf die Vorschau. Sie ist der HTML-Tab, gerendert, und ändert sich beim Tippen.
Setzen Sie Ihren Zugriffsschlüssel ein. Jede Kopie übernimmt ihn, und der Button der Vorschau sendet dann eine echte Test-Einsendung.
Kopieren Sie eine von sechs Versionen: HTML, HTML mit Tailwind, Bootstrap 5, React, Vue oder einen Prompt für einen KI-Website-Baukasten.

Das Bearbeiten der Felder läuft in Ihrem Browser. Nur die KI-Beschreibung wird irgendwohin gesendet; die Limits weiter unten gelten für dieses Feld und sonst nichts.

Die acht Startformulare sind englisch beschriftet. Benennen Sie die Beschriftungen einfach um – der Code übernimmt Ihre Texte –, oder beschreiben Sie das Formular auf Deutsch und lassen Sie die KI die Felder vorschlagen.

Was ein generiertes Formular wirklich absenden lässt

Ein Formular auf einer statischen Seite braucht eine Adresse, an die es senden kann. Am 20. Oktober 2026 haben wir die fünf besten Google-Treffer für „html form generator“ in den USA geöffnet. Zwei lieferten Markup ohne Ziel: eins mit leerem action, eins ganz ohne <form>-Tag. Zwei richteten das Formular auf den eigenen Dienst, sobald man einen Endpunkt einträgt. Der fünfte hatte gar keinen Generator auf der Seite, nur einen Anmelde-Button.

Fünf Dinge machen den Unterschied, und jede Kopie hier hat sie:

Ein echtes Ziel. action ist Formgongs /submit-Adresse mit method="POST".
Ihr Schlüssel. Das versteckte access_key sagt, welches Formular das ist. Der Platzhalter fk_your_access_key wird absichtlich abgelehnt: Ein vergessener Schlüssel scheitert laut, statt Nachrichten zu verlieren.
Feldnamen. Jedes Eingabefeld hat ein name-Attribut, abgeleitet aus seiner Beschriftung. Ohne Namen sendet der Browser den Wert nicht.
Eine ehrliche Erfolgsmeldung. Die Skripte melden „gesendet“ nur, wenn Formgong success: true antwortet. Ein falscher Schlüssel, ein volles Kontingent oder ein Netzwerkfehler zeigt eine Meldung statt eines falschen Dankeschöns.
Ein Honeypot. botcheck liegt außerhalb des Bildschirms und ist vor Screenreadern verborgen. Einfache Bots füllen es aus, und Formgong legt diese Einsendungen als Spam ab, statt sie Ihnen zu schicken.

HTML-Formular-Code, Kontaktformulare und die anderen Kopien

Der HTML-Tab ist ein klassisches Formular mit einem kurzen Style-Block. Der Browser sendet es per POST an /submit, es funktioniert also ohne JavaScript. Das Skript am Ende ist optional: Es hält Besucher auf der Seite und füllt die Fehlerzeile jedes Feldes. Der Tailwind-Tab ist dasselbe Formular mit Utility-Klassen, für eine Website, die Tailwind schon lädt. Der Bootstrap-5-Tab nutzt form-control, form-select und btn, für eine Website, die Bootstrap 5 schon lädt.

Die React- und Vue-Tabs sind Komponenten. Sie prüfen jedes Feld, senden FormData, lesen die JSON-Antwort und schreiben Erfolg oder Fehler in eine Statuszeile. Ein eigenes Backend erfinden sie nicht. Der KI-Baukasten-Prompt beschreibt dasselbe Formular in Worten für Lovable, Bolt, v0, Claude oder Cursor und sagt dem Baukasten, keinen eigenen Server zu bauen.

Jedes Feld hat ein label, das mit for und id verbunden ist. Radiobuttons und Checkbox-Gruppen sitzen in einem fieldset mit legend. Jedes Feld zeigt mit aria-describedby auf seine eigene Fehlerzeile, ein Screenreader liest das Problem also zusammen mit dem Feld vor. Ein Dateifeld ergänzt enctype="multipart/form-data"; Dateien brauchen eingeschaltete Uploads für Ihr Formular.

Kostenlose Limits, E-Mail und wo die Daten liegen

Zum Kopieren des Codes brauchen Sie kein Konto. KI-Generierungen sind auf 5 pro Stunde und 10 pro Tag je Netzwerk begrenzt, plus 100 pro Tag für die ganze Website. Ist ein Limit erreicht, sagt die Seite es; mit einem Formular starten und die Felder bearbeiten geht weiter.

Im kostenlosen Tarif sind Telegram-Benachrichtigungen sofort da, und für jede Einsendung geht eine E-Mail raus. Der kostenlose Tarif umfasst 1.000 Einsendungen im Monat. Die automatische Antwort gehört nicht zum kostenlosen Tarif. Einsendungen werden in der EU gespeichert.

Ihre Beschreibung wird an das KI-Modell gesendet, damit es Felder wählen kann. Sie wird nicht als Einsendung gespeichert. Fügen Sie keine Passwörter, Kartennummern oder andere Geheimnisse ein. Der Formular-Checker kann die veröffentlichte Seite später lesen und Probleme auflisten, etwa ein fehlendes action oder den noch eingesetzten Platzhalter-Schlüssel.

Was dieser Generator nicht macht

Diese Seite hostet das Formular nicht, nimmt keine Zahlungen an und verzweigt keine Fragen. Dafür passt ein gehosteter Formular-Baukasten besser. Sie speichert auch Ihre Arbeit nicht: Nach einem Neuladen beginnt der Editor von vorn, kopieren Sie den Code also, wenn Sie fertig sind.

Der Code stellt keine E-Mail zu, bis der Platzhalter-Schlüssel ein echter Formgong-Schlüssel ist. Support: Formgong unter support@formgong.com.

Sagen Sie uns, was fehlt

Sie haben hier ein Formular gebaut, das nicht das konnte, was Sie brauchten? Schreiben Sie an support@formgong.com, welches Formular Sie bauen wollten: ein Feldtyp, der uns fehlt, ein Framework-Tab, den Sie sich wünschen, oder eine Stelle, an der der Code brach. Wir lesen jede Nachricht und antworten darauf.

Fragen und Antworten

Was ist ein KI-Formulargenerator?

Er baut ein Formular aus einer kurzen Beschreibung. Diese Seite liefert HTML, Tailwind, Bootstrap 5, React, Vue und einen Prompt für KI-Website-Baukästen. Das Formular liegt erst dann bei Formgong, wenn Sie einen kostenlosen Schlüssel anlegen.

Gibt es einen kostenlosen HTML-Formular-Generator?

Ja. Der HTML-Tab ist kostenlos und braucht kein Konto. Es ist ein normales Formular mit Beschriftungen, Pflichtfeldern, Fehlerzeilen und einem Honeypot. Ein Konto brauchen Sie erst, wenn die Einsendungen zugestellt werden sollen.

Warum sendet ein generiertes Formular nichts ab?

Meist weil sein action leer ist oder auf einen Platzhalter-Endpunkt zeigt. Ein Formular braucht eine echte Adresse zum Senden und, bei einem Formular-Backend, einen Schlüssel. Hier zeigt das action schon auf Formgong; setzen Sie Ihren Schlüssel ein, dann sendet die Vorschau einen echten Test.

Wie bekomme ich HTML-Code für ein Kontaktformular?

Wählen Sie oben Kontakt, oder beschreiben Sie die gewünschten Felder. Kopieren Sie den HTML-Tab. Setzen Sie Ihren Zugriffsschlüssel in Schritt 4 ein, oder in das versteckte Feld access_key.

Funktioniert es mit Lovable, Bolt oder v0?

Ja. Kopieren Sie den KI-Baukasten-Prompt-Tab und fügen Sie ihn in den Baukasten ein. Er nennt die Felder, Namen und Prüfungen, die Adresse zum Senden, und sagt dem Baukasten, kein eigenes Backend zu bauen.

Versendet das Formular E-Mails?

Sobald Sie den Platzhalter-Schlüssel ersetzt haben, ja. Im kostenlosen Tarif ist Telegram sofort da, und für jede Einsendung geht eine E-Mail raus. Die Daten werden in der EU gespeichert. Der kostenlose Tarif umfasst 1.000 Einsendungen im Monat.

Kann ich das Formular ohne KI bauen?

Ja. Starten Sie mit einem der acht Formulare oder mit dem Beispiel und bearbeiten Sie die Zeilen. Das läuft in Ihrem Browser und ruft das Modell nie auf, es gibt dafür also kein Limit.

Quellen

Geprüft am 23.10.2026 anhand offizieller Hilfeseiten und öffentlicher Seiten: MDN: <form>, Formgong HTML guide, splitforms AI form generator, Grigora AI form builder, FormSubmit form generator, gizza HTML form generator.

← Formgong