Kontaktformular erstellen: HTML, CSS und sonst nichts?

Drei Felder, ein Button und eine Menge stiller Umsatz. Ein Kontaktformular entscheidet darüber, ob aus einem anonymen Websitebesuch ein echtes Gespräch wird. Trotzdem behandeln viele Unternehmen dieses Element wie einen Pflichtbaustein ohne strategischen Wert. Das ist ein teurer Fehler: Laut aktuellen Benchmarkdaten schließen nur 38 % der Nutzer, die mit einem Kontaktformular interagieren, den Absendeprozess auch ab. Die restlichen 62 % brechen ab, weil das Formular zu lang, zu kompliziert oder zu wenig vertrauenswürdig wirkt.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Das Wichtigste in Kürze

• Kontaktformulare sind der wichtigste Leadkanal für KMU, weil sie rund um die Uhr Anfragen entgegennehmen und strukturiert weiterleiten.
• Die ideale Feldanzahl liegt bei 3 bis 5 Feldern. Jedes zusätzliche Pflichtfeld senkt die Abschlussrate messbar.
• Die DSGVO verlangt Datensparsamkeit, SSL Verschlüsselung und einen Verweis auf die Datenschutzerklärung direkt am Formular.
• Ein professionelles Kontaktformular lässt sich mit reinem HTML und CSS bauen, ganz ohne JavaScript Framework oder Plugin.

Warum verdient Ihr Kontaktformular mehr Aufmerksamkeit?

Die stille Vertriebsmaschine

Stellen Sie sich Ihre Website als Ladengeschäft vor. Der Inhalt ist die Auslage, die Navigation der Grundriss, das Kontaktformular die Verkaufstheke. Ohne diese Theke schauen Besucher sich um und gehen wieder. Mit einem schlecht platzierten oder schlecht gestalteten Formular stehen Besucher vor einer Theke ohne Personal.

Die durchschnittliche Conversion Rate über alle Branchen hinweg liegt bei rund 2,9 %. Kontaktformulare schneiden dabei besonders schlecht ab: Nur 9 % der Besucher, die ein Formular sehen, senden es auch ab. Die Lücke zwischen „gesehen“ und „abgeschickt“ ist enorm, und genau in dieser Lücke liegt Ihr Hebel.

Rund um die Uhr erreichbar

Ein Kontaktformular nimmt Anfragen entgegen, während Sie schlafen, im Meeting sitzen oder im Urlaub sind. Anders als eine Telefonnummer funktioniert das Formular auch um 23 Uhr, an Feiertagen und am Wochenende. Für kleine und mittlere Unternehmen ohne 24 Stunden Servicehotline ist das Formular oft der einzige Kanal, über den Interessenten außerhalb der Geschäftszeiten Kontakt aufnehmen.

Struktur statt Chaos

Jede Anfrage über ein Kontaktformular kommt strukturiert an: Name, Anliegen, Kontaktdaten. Vergleichen Sie das mit einer einfachen „Schreiben Sie uns eine E Mail“ Lösung. Dort landen Anfragen in verschiedenen Postfächern, ohne einheitliches Format, oft ohne Betreffzeile, manchmal im Spamfilter. Ein Formular dagegen sortiert vor, filtert Spam und dokumentiert jede Anfrage nachvollziehbar.

Welche Felder braucht ein gutes Kontaktformular wirklich?

Weniger Felder, mehr Absendungen

Die Faustregel ist simpel: Drei bis fünf Felder reichen für die meisten Kontaktformulare. Name, E Mail Adresse und Nachricht sind das Minimum. Optional kommen Betreff und Telefonnummer dazu.

Jedes zusätzliche Pflichtfeld erhöht die Abbruchwahrscheinlichkeit. 81 % aller Internetnutzer haben mindestens ein Online Formular abgebrochen, und mehr als die Hälfte davon innerhalb des letzten Monats. Der häufigste Grund für den Abbruch: Sicherheitsbedenken (29 %), gefolgt von zu vielen Feldern und zu komplizierter Struktur.

Pflichtfelder richtig kennzeichnen

Markieren Sie Pflichtfelder mit einem Sternchen (*) und erklären Sie die Markierung über dem Formular: „Pflichtfelder sind mit * gekennzeichnet.“ Optionale Felder wie die Telefonnummer dürfen existieren, Sie sollten sie aber klar als freiwillig deklarieren. Sonst riskieren Sie nicht nur Abbrüche, sondern auch DSGVO Probleme.

Das Nachrichtenfeld: Unterschätzt und oft zu klein

Das Textfeld für die eigentliche Nachricht ist das Herzstück des Formulars. Trotzdem schrumpfen viele Designer das Feld auf drei Zeilen zusammen. Geben Sie dem Feld mindestens sechs bis acht Zeilen Höhe. Besucher, die sich die Mühe machen, ein Formular auszufüllen, haben etwas zu sagen. Geben Sie ihnen den Platz dafür.

Wie sieht das perfekte Kontaktformular im Code aus?

Die HTML Struktur

Gutes HTML ist semantisches HTML. Jedes Eingabefeld bekommt ein <label>, das über das for Attribut mit der id des Eingabefelds verknüpft ist. Screenreader lesen diese Zuordnung vor, und Nutzer können auf das Label klicken, um das Feld zu fokussieren. Ohne <label> ist ein Formular für Screenreader Nutzer praktisch unbenutzbar.

Drei Details, die den Unterschied machen

type="email" sorgt dafür, dass mobile Geräte automatisch eine Tastatur mit @ Zeichen anzeigen. type="tel" zeigt die Zifferntastatur. Diese kleinen Angaben beschleunigen das Ausfüllen enorm und senken die Fehlerquote.

autocomplete Attribute helfen dem Browser, gespeicherte Daten korrekt zuzuordnen. Nutzer mit aktiviertem Autofill füllen Formulare laut Benchmarkdaten rund 35 % schneller aus und brechen 75 % seltener ab. Die Werte name, email und tel sind standardisiert und funktionieren browserübergreifend.

required macht ein Feld zum Pflichtfeld, ohne dass Sie dafür JavaScript brauchen. Der Browser prüft beim Absenden, ob alle Pflichtfelder ausgefüllt sind, und zeigt eine native Fehlermeldung an.

Das CSS: Klar, modern, responsiv

Das folgende CSS setzt auf eine einspaltige Struktur. Einspaltige Layouts übertreffen mehrspaltige Formulare bei der Abschlussrate deutlich, weil sie den Blick des Nutzers linear führen und auf Mobilgeräten ohne Anpassung funktionieren. Mehr zu responsiven CSS Layouts mit Flexbox und Grid finden Sie in unserem Grundlagenartikel.

CSS only Validierung: Farben ohne JavaScript

Das CSS oben nutzt die Pseudoklassen :valid, :invalid und :placeholder-shown, um Eingabefelder visuell zu bewerten. Ein korrekt ausgefülltes E Mail Feld bekommt einen grünen Rand, ein fehlerhaftes einen roten. Das funktioniert komplett ohne JavaScript und gibt dem Nutzer sofortiges Feedback.

Der Trick mit :not(:placeholder-shown) verhindert, dass leere Felder sofort rot markiert werden. Erst nach der ersten Eingabe greift die Validierung. So vermeiden Sie den Effekt, dass ein jungfräuliches Formular den Besucher mit roten Rahmen begrüßt.

Was verlangt die DSGVO von Ihrem Kontaktformular?

Datensparsamkeit als Pflicht

Die DSGVO schreibt in Art. 5 das Prinzip der Datenminimierung vor. Sie dürfen nur die Daten erheben, die für die Bearbeitung der Anfrage tatsächlich erforderlich sind. Bei einem allgemeinen Kontaktformular bedeutet das: Name (oder Pseudonym), E Mail Adresse und das Anliegen selbst. Die Telefonnummer darf abgefragt werden, sollte aber nie ein Pflichtfeld sein, außer Sie können den Zweck nachweisen.

Verschlüsselung ist Pflicht

Art. 32 DSGVO verlangt „geeignete technische und organisatorische Maßnahmen“ zum Schutz personenbezogener Daten. In der Praxis heißt das: Ihr Kontaktformular muss über eine HTTPS Verbindung (SSL/TLS) übertragen werden. Ohne Verschlüsselung lassen sich die übermittelten Daten theoretisch im Klartext abfangen. Seit 2018 wurden bereits Bußgelder für unverschlüsselte Kontaktformulare verhängt.

Datenschutzhinweis direkt am Formular

Direkt unter oder neben dem Formular muss ein Verweis auf Ihre Datenschutzerklärung stehen. Eine Checkbox mit „Ich habe die Datenschutzerklärung gelesen“ ist rechtlich nicht zwingend erforderlich, erhöht aber das Vertrauen. Wichtig: Die Datenschutzerklärung muss erklären, welche Daten das Formular erhebt, zu welchem Zweck und auf welcher Rechtsgrundlage (meist Art. 6 Abs. 1 lit. f DSGVO, berechtigtes Interesse).

Zweckbindung und Löschpflicht

Die über das Formular erhobenen Daten dürfen ausschließlich für die Beantwortung der Anfrage genutzt werden. Die E Mail Adresse eines Anfragenden einfach in den Newsletterverteiler aufzunehmen, ist ohne gesonderte Einwilligung rechtswidrig. Nach Abschluss des Vorgangs müssen die Daten gelöscht werden, sofern keine gesetzliche Aufbewahrungspflicht besteht.

„Ein Kontaktformular, das mehr Daten verlangt als nötig, verliert zweimal: Besucher brechen ab, und die DSGVO klopft an.“

Markus Seyfferth, Chefredakteur Dr. Web

Wie machen Sie Ihr Formular barrierefrei?

Labels, nicht Placeholder

Sichtbare <label> Elemente sind die Grundlage barrierefreier Formulare. Placeholder Text verschwindet beim Tippen und wird von vielen Screenreadern nicht vorgelesen. Nutzen Sie Placeholder nur als zusätzlichen Hinweis, niemals als einzige Beschriftung.

Tastaturnavigation testen

Öffnen Sie Ihr Formular und navigieren Sie ausschließlich mit der Tab Taste durch alle Felder. Die Reihenfolge sollte logisch von oben nach unten verlaufen. Der Fokuszustand (der blaue Rahmen im CSS oben) muss deutlich sichtbar sein, damit Tastaturnutzer jederzeit wissen, wo sie sich befinden.

Fehlermeldungen verständlich formulieren

„Ungültige Eingabe“ sagt niemandem etwas. Bessere Fehlermeldungen lauten: „Bitte geben Sie eine gültige E Mail Adresse ein, zum Beispiel [email protected].“ Platzieren Sie die Meldung direkt neben dem betroffenen Feld, nicht gebündelt oben im Formular. So finden auch Nutzer mit eingeschränktem Sichtfeld die Korrekturstelle sofort.

ARIA Attribute für komplexere Formulare

Für einfache Kontaktformulare reichen semantisches HTML und sichtbare Labels. Sollten Sie bedingte Felder oder dynamische Fehlermeldungen einbauen, helfen ARIA Attribute wie aria-describedby und aria-live. Diese Attribute informieren Screenreader über Änderungen im Formular, ohne dass der Nutzer die Seite neu laden muss.

Was bringt ein guter Buttontext?

„Absenden“ ist der langweiligste Text im Internet

Der Text auf dem Absendebutton ist das letzte Element, das der Nutzer vor dem Klick sieht. „Absenden“ oder „Submit“ sind funktional korrekt, motivieren aber nicht. Testen Sie stattdessen Texte, die das Ergebnis beschreiben: „Nachricht senden“, „Anfrage starten“, „Rückruf anfordern“.

Farbe und Größe des Buttons

Der Button muss sich farblich vom restlichen Formular abheben. Ein blauer Button auf weißem Hintergrund mit ausreichend Innenabstand (Padding) fällt ins Auge. Auf Mobilgeräten sollte der Button die volle Breite des Formulars einnehmen, damit er als Tippziel groß genug ist. Die WCAG empfehlen eine Mindestgröße von 44 × 44 Pixeln für interaktive Elemente.

Desktop versus Mobil: Wo liegen die Unterschiede?

Die Abschlussraten auf dem Desktop liegen bei rund 55 %, auf Mobilgeräten nur bei 47 %. Der Grund ist nicht mangelndes Interesse, sondern Reibung: Kleine Eingabefelder, fummelige Dropdown Menüs und fehlende Anpassung an die Touchbedienung.

Setzen Sie auf Mobilgeräten inputmode="email" und type="tel", damit das Betriebssystem die passende Bildschirmtastatur anzeigt. Dieser kleine Eingriff spart dem Nutzer pro Feld mehrere Sekunden.

Brauchen Sie überhaupt ein eigenes Formular?

Fertige Services: Schnell, aber nicht kostenlos

Für Unternehmen ohne Entwicklungsressourcen bieten Dienste wie Typeform, JotForm, Google Forms oder WordPress Plugins wie Contact Form 7 und WPForms eine schnelle Lösung. Diese Tools übernehmen Frontend, Validierung, Spamschutz und Mailversand. Die Kosten liegen je nach Anbieter zwischen 0 und 50 € pro Monat, und die Datenverarbeitung findet oft auf Servern in den USA statt. Das erzeugt DSGVO Fragen, die Sie klären müssen.

Eigenbau: Kontrolle, Performance, Datenschutz

Mit einem selbst gebauten Formular aus HTML und CSS behalten Sie die volle Kontrolle über das Markup, das Design und die Datenverarbeitung. Kein externes Script, kein Tracking, keine zusätzlichen HTTP Requests. Das Formular wiegt wenige Kilobyte, lädt blitzschnell und sendet die Daten direkt an Ihren eigenen Server. Für die serverseitige Verarbeitung genügen wenige Zeilen PHP, ein Node.js Endpoint oder ein schlankes Backendscript in der Sprache Ihrer Wahl. Wie sich die Kosten für Webdesign generell zusammensetzen, haben wir in einem separaten Artikel aufgeschlüsselt.

Welche Fehler machen die meisten Formulare?

Captcha als Besucherabschreckung

Google reCAPTCHA ist der populärste Spamschutz, aber auch der nervigste. Nutzer klicken sich durch Ampelbilder, Fahrräder und Zebrastreifen. Jeder zusätzliche Klick erhöht die Abbruchrate. Alternativen: Honeypot Felder (ein verstecktes Feld, das nur Bots ausfüllen), Zeitprüfungen (ein Formular, das in unter 3 Sekunden abgesendet wird, stammt selten von einem Menschen) oder serverseitige Spamfilter. Google reCAPTCHA steht zudem datenschutzrechtlich in der Kritik, weil Nutzerdaten an Google übermittelt werden.

Fehlende Bestätigungsseite

Nach dem Absenden sollte der Nutzer eine klare Rückmeldung bekommen: „Vielen Dank, Ihre Nachricht ist angekommen. Wir melden uns innerhalb von 24 Stunden.“ Ohne diese Bestätigung bleibt der Nutzer im Unklaren. Hat der Klick funktioniert? Kam die Nachricht an? Soll ich nochmal senden? Eine Bestätigungsseite oder zumindest eine Erfolgsmeldung im Formular selbst beantwortet diese Fragen sofort.

Formular im Footer verstecken

Viele Websites vergraben ihr Kontaktformular hinter zwei Klicks: Erst „Kontakt“ im Menü, dann scrollen. Besser: Platzieren Sie einen Call to Action auf jeder wichtigen Seite, der direkt zum Formular führt. Manche Unternehmen betten ein kompaktes Formular direkt in die Seitenleiste oder am Ende jeder Leistungsseite ein. Je kürzer der Weg zum Formular, desto höher die Conversion. Wer seine Website komplett selbst baut, findet in unserer Übersicht zu HTML Templates passende Ausgangspunkte.

Checkliste: Das perfekte Kontaktformular auf einen Blick

Glossar: 12 wichtige Fachbegriffe zu Kontaktformularen

Autocomplete

Autocomplete bezeichnet die Fähigkeit des Browsers, Formularfelder automatisch mit gespeicherten Nutzerdaten zu befüllen. Standardisierte Werte wie name, email und tel sorgen dafür, dass Browser die richtige Information dem richtigen Feld zuordnen. Für Kontaktformulare senkt Autofill die Ausfülldauer um rund 35 %.

Conversion Rate

Die Conversion Rate gibt an, welcher Prozentsatz der Websitebesucher eine gewünschte Aktion ausführt. Bei Kontaktformularen liegt die View to Completion Rate im Schnitt bei 9 %. Die Verbesserung dieser Kennzahl ist ein zentrales Ziel der Formularoptimierung.

DSGVO

Die Datenschutz Grundverordnung (DSGVO) ist eine EU Verordnung zum Schutz personenbezogener Daten. Kontaktformulare müssen dem Grundsatz der Datensparsamkeit, der Zweckbindung und der Verschlüsselungspflicht entsprechen. Verstöße können Bußgelder bis zu 20 Millionen Euro nach sich ziehen.

Honeypot Feld

Ein Honeypot Feld ist ein verstecktes Formularfeld, das nur von automatisierten Bots ausgefüllt wird. Menschliche Nutzer sehen das Feld nicht. Enthält das Feld nach dem Absenden einen Wert, wird die Anfrage als Spam verworfen. Diese Methode funktioniert ohne externen Dienst und ohne Nutzerdaten an Dritte zu übermitteln.

HTTPS / SSL / TLS

HTTPS (Hypertext Transfer Protocol Secure) verschlüsselt die Kommunikation zwischen Browser und Server. SSL (Secure Sockets Layer) und sein Nachfolger TLS (Transport Layer Security) sind die zugrunde liegenden Verschlüsselungsprotokolle. Für Kontaktformulare ist eine HTTPS Verbindung nach Art. 32 DSGVO de facto Pflicht.

Inputmode

Das HTML Attribut inputmode steuert, welche Bildschirmtastatur auf Mobilgeräten angezeigt wird. inputmode="email" zeigt eine Tastatur mit @ Zeichen, inputmode="numeric" eine Zifferntastatur. Das Attribut verbessert die mobile Nutzererfahrung, ohne das Verhalten der Eingabe selbst zu verändern.

Label

Ein <label> Element in HTML ordnet eine Beschriftung einem bestimmten Eingabefeld zu. Screenreader lesen das Label vor, damit blinde oder sehbehinderte Nutzer wissen, welche Information erwartet wird. Ohne Label sind Formulare für assistive Technologien nicht nutzbar.

Placeholder

Ein Placeholder ist ein Beispieltext innerhalb eines Eingabefelds, der beim Tippen verschwindet. Placeholder eignen sich als ergänzender Hinweis, ersetzen aber niemals ein sichtbares Label. Nach WCAG Richtlinien gelten reine Placeholder Formulare als nicht barrierefrei.

Pseudoklasse :valid / :invalid

CSS Pseudoklassen wie :valid und :invalid reagieren auf den Validierungszustand eines Formularfelds. Damit lassen sich visuelle Rückmeldungen wie farbige Rahmen komplett ohne JavaScript umsetzen. In Kombination mit :placeholder-shown vermeiden Sie vorzeitige Fehlermeldungen bei leeren Feldern.

Required

Das HTML Attribut required markiert ein Eingabefeld als Pflichtfeld. Der Browser verhindert das Absenden des Formulars, solange Pflichtfelder leer sind, und zeigt eine native Fehlermeldung an. Für die Basisvalidierung brauchen Sie dafür weder JavaScript noch ein externes Plugin.

Screenreader

Ein Screenreader ist eine Hilfssoftware, die Bildschirminhalte vorliest. Für Formulare bedeutet das: Jedes Feld, jeder Button und jede Fehlermeldung muss im DOM korrekt ausgezeichnet sein, damit der Screenreader sie in der richtigen Reihenfolge und mit dem richtigen Kontext vorträgt.

WCAG

Die Web Content Accessibility Guidelines (WCAG) sind ein internationaler Standard für barrierefreie Webinhalte. Formulare müssen unter anderem per Tastatur bedienbar sein, ausreichend Kontrast bieten und verständliche Fehlermeldungen liefern. Die aktuell empfohlene Konformitätsstufe ist WCAG 2.1 AA.

FAQ

Quellen

Zuko Analytics | 25 Conversion Rate Statistics you need in 2025 | https://www.zuko.io/blog/25-conversion-rate-statistics-you-need | besucht am 25.03.2026

Fluent Forms | 101+ Online Form Statistics to Optimize Your Conversion Strategy in 2026 | https://fluentforms.com/online-form-statistics-facts/ | besucht am 25.03.2026

Ruler Analytics | Average Conversion Rate by Industry and Marketing Source 2025 | https://www.ruleranalytics.com/blog/insight/conversion-rate-by-industry/ | besucht am 25.03.2026

Venture Harbour | 5 Studies: Form Length & Conversion Rates (2026) | https://ventureharbour.com/how-form-length-impacts-conversion-rates/ | besucht am 25.03.2026

datenschutz.org | Kontaktformular Datenschutz 2026 | https://www.datenschutz.org/kontaktformular/ | besucht am 25.03.2026

eRecht24 | Datenschutzerklärung für Kontaktformular | https://www.e-recht24.de/dsg/12687-kontaktformular.html | besucht am 25.03.2026

Dr. DSGVO | Kontaktformulare und Datenschutz: Was ist zu beachten? | https://dr-dsgvo.de/kontaktformulare-und-datenschutz-was-ist-zu-beachten/ | besucht am 25.03.2026

Dr. Datenschutz / intersoft consulting | Kontaktformular datenschutzkonform erstellen | https://www.dr-datenschutz.de/kontaktformular-datenschutzkonform-erstellen/ | besucht am 25.03.2026

pdfFiller Blog | Online form statistics in 2026 | https://blog.pdffiller.com/online-form-statistics/ | besucht am 25.03.2026

WCAG.com | Essential UX Accessibility Tips for Designers | https://www.wcag.com/resource/ux-quick-tips-for-designers/ | besucht am 25.03.2026

]]>