Formulare auf einer HTML-Website. Verbinde ein fertiges Formular mit einem Dienst für den Nachrichtenversand und empfange Anfragen über deine Website.
Eine HTML-Vorlage liefert ein Frontend. Für Anfragen, Buchungen oder Konten wählst und verbindest du den nötigen Dienst. Teste danach den vollständigen Ablauf, nicht nur die Buttonreaktion.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
AI ChatBeispielablauf
Tatsächliches Formularverhalten prüfen
Du
Sendet dieses Formular eine Anfrage oder zeigt es nur lokal eine Meldung? Prüfe den Submit-Code vor der Anbindung.
KI · Beispielantwort
Ich prüfe Handler und echten Empfangs-Endpunkt oder Anbieter. Das geprüfte Clearstead-Beispiel validiert E-Mail und leert lokal das Feld; das ist keine Zustellung.
Du
Verbinde als Nächstes meinen Formulardienst. Behalte das Design und nenne nötige Kontoeinstellungen.
Nächste Schritte
Empfang festlegen
Nutze eigene E-Mail und Formulardienst oder eingerichteten Server-Endpunkt.
KI mit Verbindung beauftragen
Gib die Dienstdokumentation an und bestätige Kontoeinstellungen.
Empfang prüfen
Sende einen Test von der veröffentlichten Seite und prüfe das Ziel.
Ziel: Eine Anfrage kommt an deinem gewählten Ziel an.
Beispielablauf. Keine Live-Verbindung zu einer KI.
01 / Aktion verfolgen
Sendet, speichert oder meldet das Formular nur Feedback?
Ein Template-Formular kann eine lokale Demo sein. In dieser Clearstead-Quelle prüft das Absenden nur die E-Mail und leert das Feld; es wird nichts gesendet. Lass einen echten Formulardienst oder Server-Endpunkt anbinden und prüfe den Empfang von der veröffentlichten Seite.
Sichtbare Oberfläche
Das Layout kann zeigen, wie eine Anfrage aussehen könnte.
Betriebliches Ergebnis
Empfang oder gespeicherte Daten brauchen ein konfiguriertes Ziel und Prüfung.
Quelldateien und technische Details ansehen
Die tatsächlichen Projektdateien
14-clearstead · Aktuell geprüftes ZIP
Aktueller Produktdownload geprüft am 2. Oktober 2026. Dateien und externe Ressourcen gehören zu diesem Projekt; andere Templates unterscheiden sich.
Die Anleitung beschreibt die ursprüngliche fiktive Seite. Trenne ihre Aufgabe von den Änderungen für dein eigenes Unternehmen.
Produce one `index.html`, containing all page markup, an inline stylesheet and one inline vanilla-JavaScript IIFE placed after the dialog. Use English. No framework, package manager, build step, bundler, external JavaScript, backend or persisted state. The runtime is **network**: four external SVG images and the Google Fonts stylesheet/font files are required. Opening the HTML directly or serving it over a local HTTP server must support the same local interactions. Target current desktop and mobile Chromium with native `<dialog>`, `<details>`, CSS Grid, `min()`, `100svh` and `matchMedia().addEventListener()` support. Preserve every text, image URL, selector, dimension and behavior below. Keep the literal curly punctuation, en dashes and arrow glyphs.
Was der Submit-Handler tatsächlich macht
14-clearstead/index.html · L147
Er verhindert das normale Absenden, prüft die E-Mail, zeigt einen lokalen Status und setzt das Formular zurück. Dieser Handler enthält keine Zustellungsanfrage. Echter Eingang braucht einen Dienst und eine passende Prüfung.
const form=document.getElementById('demo-form'),email=document.getElementById('demo-email'),status=document.getElementById('email-status');
form.addEventListener('submit',event=>{event.preventDefault();if(!email.validity.valid){status.textContent='Enter a valid email address to test this form.';email.setAttribute('aria-invalid','true');email.focus();return}email.removeAttribute('aria-invalid');status.textContent='Demo complete. Your address was not sent or saved.';form.reset()});email.addEventListener('input',()=>{email.removeAttribute('aria-invalid');status.textContent=''})
02 / Anforderungen zuordnen
Welche Funktionen brauchen einen separaten Dienst?
Ein Kontaktformular braucht einen Empfangsdienst, Buchungen einen Kalender oder Buchungsanbieter, Zahlungen einen Zahlungsdienst und Konten samt Daten ein Backend. Für die erste Firmenwebsite kann ein Link zur bestehenden Buchungs- oder Zahlungsseite einfacher sein.
Kontakt und Buchung
Wähle echten Empfänger, Kalender oder Buchungsziel sowie Fehlerbehandlung.
Zahlungen und Konten
Organisiere Anwendung, Daten und Zahlungsdienst; das Marketing-Frontend liefert sie nicht.
Redaktionelle Pflege
Wähle CMS für strukturierte Bearbeitung oder Rollen bei laufenden Inhalten.
AI ChatBeispielablauf
Kontaktformular verbinden
Du
Lass dieses Formular Anfragen an mich zustellen. Nutze meinen Formulardienst, ergänze die nötigen Felder und halte Zugangsdaten aus öffentlichem HTML heraus.
KI · Beispielantwort
Ich prüfe, ob das aktuelle Formular eine Anfrage sendet oder nur lokal eine Meldung zeigt. Danach setze ich den dokumentierten Ablauf des gewählten Dienstes um.
Du
Sende nach Veröffentlichung eine klar markierte Testanfrage. Ich bestätige, ob sie angekommen ist.
KI · Beispielantwort
Ich teste Versand und Fehlerzustände an der öffentlichen URL. Die Zustellung gilt erst nach Prüfung des Postfachs oder Dienstes als bestätigt.
Nächste Schritte
Empfang festlegen
Nutze eigene E-Mail und Formulardienst oder eingerichteten Server-Endpunkt.
KI mit Verbindung beauftragen
Gib die Dienstdokumentation an und bestätige Kontoeinstellungen.
Empfang prüfen
Sende einen Test von der veröffentlichten Seite und prüfe das Ziel.
Ziel: Eine Anfrage kommt an deinem gewählten Ziel an.
Beispielablauf. Keine Live-Verbindung zu einer KI.
03 / Ziel wählen
Wohin soll die Anfrage gehen?
Wähle das Ziel: Postfach über einen Formulardienst, CRM oder eingerichteter eigener Server. Gib dem Agent die Dokumentation und benötigten Felder. Bestätige Kontoeinstellungen; private API-Zugangsdaten gehören in die sichere Konfiguration, nie in öffentliches HTML.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
Quelldateien und technische Details ansehen
Wenn du Netlify Forms wählst
https://docs.netlify.com/manage/forms/setup/
Die aktuelle Anleitung verlangt aktivierte Formularerkennung, passende Formulare und ein Deployment. Der Clearstead-Handler stoppt das normale Absenden; ersetze dieses lokale Verhalten gezielt. Prüfe danach Eingang und Fehlerbehandlung.
Zeige beim Request den Sendestatus. Erfolg erst nach Annahme durch den Dienst anzeigen; behalte Texte bei einem Versandfehler.
KI · Beispielantwort
Ich verknüpfe Zustände mit der Dienstantwort, prüfe Pflichtfelder und verhindere versehentliches doppeltes Absenden. Bei Ablehnung zeige ich Wiederholung oder anderen Kontakt.
Du
Teste leere Pflichtfelder und fehlgeschlagene Requests sowie erfolgreichen Versand.
Nächste Schritte
Felder prüfen
Erkläre fehlende oder falsche Angaben ohne Löschen der Nachricht.
Dienstantwort auswerten
Verknüpfe Senden, Annahme und Fehler mit dem echten Request.
Alternativen testen
Teste Erfolg, falsche Eingaben und Dienstfehler.
Ziel: Das Formular zeigt, was tatsächlich passiert ist.
Beispielablauf. Keine Live-Verbindung zu einer KI.
04 / Sendeverhalten
Was muss sich im Besucherablauf ändern?
Das Formular braucht echte Anfrage, Validierung und ehrliche Lade-, Erfolgs- und Fehlerzustände. Zeige Erfolg erst nach bestätigtem relevantem Dienstergebnis.
01
Eingabe prüfen
Erkläre fehlende oder ungültige Felder ohne Verlust eingegebener Texte.
02
Fehler behandeln
Zeige den Fehler und erneuten Versuch oder anderen Kontaktweg.
Isoliertes lokales Formular testen
Originales englisches Formular mit Handler in einer Lernansicht. Nichts wird gesendet oder gespeichert; kein eingerichteter Anfragedienst.Ganze Vorschau öffnen ↗
AI ChatBeispielablauf
Empfangene Anfrage prüfen
Du
Sende eine klar markierte Testanfrage von der veröffentlichten Website. Ich prüfe Postfach oder Formulardienst.
KI · Beispielantwort
Ich nutze das öffentliche Formular und prüfe die Antwort. Zustellung bestätigen wir separat am Empfangsziel, nicht nur anhand der Erfolgsmeldung.
Du
Prüfe bei fehlendem Eingang Request, Benachrichtigungen und Spam, bevor es als fertig gilt.
Nächste Schritte
Von öffentlicher Seite senden
Nutze das echte Besucherformular mit markierten Testinhalten.
Empfangsziel prüfen
Prüfe die Nachricht im Postfach oder Dienstkonto.
Fehler beheben
Lass die Verbindung korrigieren und wiederhole denselben Test.
Ziel: Eine Anfrage kommt an deinem gewählten Ziel an.
Beispielablauf. Keine Live-Verbindung zu einer KI.
05 / Empfang bestätigen
Was gilt als funktionierendes Anfrageformular?
Sende eine markierte Testanfrage von der öffentlichen Website und bestätige den Empfang im Zielpostfach oder Dienst. Teste ungültige E-Mail und Versandfehler. Bei Erfolgsmeldung ohne Empfang lass Anfrage und Empfangsdienst prüfen.
Lokal auf diesem Gerät markiert; nichts wird übermittelt.
06 / Frontend wählen
Wann bleibt eine Vorlage ein passender Ausgangspunkt?
Wenn Präsentation passt und du Live-Dienste organisieren kannst. Vergleiche Frontend-Strukturen; fiktive Formulare, Buchung und App-Geschichten liefern keine Dienste.
Clearstead
Frontend eines fiktiven Cashflow-Workspaces mit lokalem E-Mail-Formular; kein Finanzkonto oder Anfragedienst ist verbunden.
Aktueller Download geprüft am 2. Oktober 2026. Prüfe die ausgewählten Dateien auf der Produktseite.
index.html
RECREATE.md
assets/index.webp
assets/terra.webp
assets/vesper.webp
Einige Ressourcen können von externen URLs geladen werden. Prüfe dein gewähltes Projekt vor der Veröffentlichung.
Beispieldesigns · ersetze die fiktiven Inhalte durch deine eigenen.
07 / Gesamte Website planen
Was entscheide ich als Nächstes?
Wähle das System für die Besucheraktion vor der finalen Designwahl. Nutze technische Hilfe, wenn Integration und Prüfung deine Möglichkeiten überschreiten.
Teste ein echtes Template, bevor du dich entscheidest.
Lade das originale Formwell-Projekt herunter. Gib die Dateien und RECREATE.md an ein geeignetes KI-Tool, probiere eine kleine Änderung und prüfe das Ergebnis.
Das kostenlose Beispiel ist Formwell. Originaldesign und Anleitung sind auf Englisch. Die Produktpreise bleiben unverändert.
OneDollarStock setzt ein Projekt zur Vorbereitung der Plattform auf den Eintritt in den deutschen Markt im Rahmen des Akzelerationspfads „Go Global“ des Programms „Unicorn Hub Startup Booster“ um (Projektnr. FENG.02.28-IP.02-0013/23). Das Projekt wird aus Mitteln des Programms European Funds for Smart Economy 2021–2027 im Rahmen der Priorität „Innovation-friendly environment“, Maßnahme FENG.2.28 Startup Booster Poland, kofinanziert.
Mehr über das Projekt erfahren →
Novaform
Template ansehen
Kroma-Adaptation
Template ansehen
Arcilla Archive
Template ansehen
DESIGN
Template ansehen
Virelia
Template ansehen
Nearfield
Template ansehen
Vorami
Template ansehen
Iris Halden
Template ansehen
Forma
Template ansehen
Editorial Portfolio
Template ansehen
Mora
Template ansehen
Atelier North
Template ansehen
Novaform
Template ansehen
Kroma-Adaptation
Template ansehen
Arcilla Archive
Template ansehen
DESIGN
Template ansehen
Virelia
Template ansehen
Nearfield
Template ansehen
Vorami
Template ansehen
Iris Halden
Template ansehen
Forma
Template ansehen
Editorial Portfolio
Template ansehen
Mora
Template ansehen
Atelier North
Template ansehen
