Was ist Formular-Generator?

Der Formular-Editor ermöglicht es Ihnen, individuelle Formulare mit einem visuellen Editor zu erstellen. Fügen Sie Textfelder, Dropdown-Menüs, Checkboxen und mehr hinzu und exportieren Sie das Formular als HTML-Code oder JSON-Schema.

Wähle aus vierzehn Feldtypen: Text, E-Mail, Telefon, URL, Zahl, Datum, Datei-Upload, Bewertungsskala, Dropdown, Kontrollkästchen, Einzelauswahl, Textbereich, Beschreibungsblöcke für Einleitungstext und Seitenumbrüche, die ein langes Formular in Schritte teilen. Jedes Eingabefeld hat eine Beschriftung, optionalen Hilfetext, Platzhalter, Pflichtkennzeichen und eine Optionsliste für Dropdowns und Einzelauswahl. Starte mit einer fertigen Vorlage (Kontakt, Feedback, Umfrage, Anmeldung, Bestellung, Buchung), ordne Felder mit den Pfeilen nach oben/unten neu an, sieh das Formular live mit einer Fortschrittsleiste über die Seiten und exportiere dann eine sauber gestaltete HTML-Seite zum Einfügen auf jeder Website oder ein JSON-Schema für die serverseitige Prüfung.

Anleitung

1. Schritt 1 — Klicke auf „Feld hinzufügen“, um ein neues Feld einzufügen und seinen Typ zu wählen (Text, E-Mail, Telefon, URL, Zahl, Datum, Datei, Bewertungsskala, Dropdown, Kontrollkästchen, Einzelauswahl oder Textbereich), füge einen Seitenumbruch ein, um ein langes Formular in Schritte zu teilen, oder lade eine fertige Vorlage für einen schnellen Start.
2. Schritt 2 — Klicken Sie auf ein Feld, um Bezeichnung, Platzhalter und Pflichtfeld-Status festzulegen.
3. Schritt 3 — Zeigen Sie eine Live-Vorschau des Formulars an und exportieren Sie es als HTML-Code oder JSON-Schema zur Integration in Ihr Projekt.

Wann verwenden

• Schnell ein Anmelde- oder RSVP-Formular für eine statische Website bauen.
• Ein Formular prototypen, bevor das Schema an Entwickler zur Anbindung übergeben wird.
• Die Grundlagen von HTML-Formularen vermitteln, ohne dass Lernende jedes Input-Element selbst tippen.

Ergebnis

Eine Lehrerin erstellt ein Kursanmeldeformular mit Feldern für Schülername (Pflicht-Text), Klassenstufe (Dropdown: 9-12), E-Mail (mit E-Mail-Validierung) und einem Kommentar-Textbereich — dann exportiert sie den HTML-Code zum Einbetten auf der Schulwebsite.

Häufige Fragen

Wohin gehen die Daten, wenn jemand das Formular absendet?

Standardmäßig nirgendwohin. Das exportierte HTML hat keine Action-URL, der Versand geht also ins Leere und die Daten verlassen das Gerät nie. Um Antworten zu erfassen, lenken Sie die Action auf einen eigenen Endpunkt, Formspree, Google Forms oder eine Serverless-Function um.

Kann ich ein bestehendes Formular wieder in den Editor laden?

Derzeit nicht. Der Export läuft in eine Richtung: vom Editor zu HTML oder JSON. Wer später ändern will, speichert das JSON-Schema und baut von Hand nach oder hält die Editor-Sitzung bis zum Abschluss offen.

Warum erscheinen meine Dropdown-Optionen nicht?

Dropdowns und Radios brauchen mindestens einen Eintrag in der Optionsliste. Klicken Sie das Feld an, öffnen Sie den Abschnitt Optionen und tragen Sie jede Auswahl getrennt mit Komma oder Zeilenumbruch ein. Eine leere Liste ergibt ein leeres Select-Element.

Bringt das exportierte HTML Stylings mit?

Ja — jeder HTML-Export enthält jetzt ein kleines eingebettetes Stylesheet, sodass das Formular schon beim Öffnen der Datei sauber und gut lesbar aussieht: ordentliche Abstände, Feldrahmen, Fokusring und ein gestalteter Senden-Button. Das CSS ist minimal und in sich geschlossen – behalten Sie es so oder löschen Sie den Style-Block und setzen Sie eigene Tailwind-, Bootstrap- oder Framework-Klassen ein.

Wo liegt der Unterschied zwischen HTML- und JSON-Export?

Das HTML ist zum Einfügen und Anzeigen fertig. Das JSON ist ein strukturiertes Schema mit Feldtypen, Beschriftungen und Validierungsregeln, gut geeignet für das Rendering mit React, Vue oder Bibliotheken wie react-hook-form oder Formik.

Ähnliche Tools