Kontaktformular mit HTML und CSS erstellen

Ein paar benannte Textfelder und ein deutlicher Call-to-Action am Ende – genau so sieht ein gewöhnliches Kontaktformular aus. Na ja, das kann ja kein Problem sein. Macht man mit links. Freu dich nicht zu früh, es gibt einige Stolperfallen. Soll dein Feedback-Formular responsiv, angetrieben durch Bootstrap oder komplett benutzerdefiniert sein? Du wirst auf jeden Fall mit CSS-Styles, JavaScript-Bibliotheken und modernen HTML-Funktionen rumspielen, um das perfekte Formular zu erstellen.

Glücklicherweise gibt es eine Reihe von guten und verlässlichen vordefinierten Lösungen im Internet, die dir einen Teil der Arbeit abnehmen oder zumindest einen perfekten Start bereiten können. So sparst du viel Zeit. Heute haben wir 20 Codepens versammelt, die klare, elegante und problemlose Kontaktformulare enthalten. Einige von ihnen können und müssen schnell oder auch umfangreich angepasst werden, während andere mit ihren speziellen Layouts oder begleitenden Effekten ihren Platz in deinen Projekten auch ohne größere Änderungen finden können.

Responsive Kontaktformulare Dank Flexbox-CSS

Viele Entwickler kennen noch CSS-Floats, um mehrspaltige Layouts zu erstellen. Diese Tricks werden auch heute noch verwendet, denn sie funktionieren und werden von einer Vielzahl von Browsern unterstützt. Seit 2015 können wir jedoch Flexbox einsetzen, der in allen modernen Browsern unterstützt wird.

Mit Flexbox können Entwickler flexible Container, kurz „Flexbox“, erstellen. Das ist ideal für mobile Bildschirme und responsive Inhalte. Die Gestaltung mit flexiblen Containern ist eine Möglichkeit, die CSS-Anzeigeeigenschaft auf eine ganz neue Art und Weise zu nutzen. Blockelemente werden vertikal gestapelt, während Inline-Elemente horizontal aneinandergereiht werden bis sie in eine neue Zeile umbrechen.

Mit FlexBox können Elemente je nach Konfiguration vertikal oder horizontal angeordnet werden. So haben Entwickler deutlich mehr Kontrolle über das Layout.

Jedes Element, das als Flexbox referenziert wird, ist ein Containerelement. Dieser Container enthält Elemente, die als Flexbox-Elemente bezeichnet werden.

Drei Beispiele für Kontaktformulare, die mit Flexbox gebaut wurden

E-Formular aus deutscher Herstellung

Schön dezentes, DSGVO-konformes, kostenloses Formular
Erstellt von: Michael Knothe, kontaktformular.com

Fullscreen Form Interface

Responsives Kontaktformular mit Karte

Responsives Kontaktformular im Material Design

Simples Kontaktformular

Elegantes Kontaktformular

Responsives Kontaktformular mit Bootstrap 3 und Google Maps API

Sass Flip Kontaktformular

Klassisch inspiriertes Kontaktformular

Einfaches Flat-Kontaktformular

Kontaktformular

Drop-Down Kontaktformular

Kontaktformular HTML + CSS

Feedback-Formular

Minimalistisches Formular

Responsives Formular im Flat Style

Persönliche Website

Kontaktformular im Tafel-Look

CSS only, Responsives Modalformular

Maritimes Kontaktformular

---

HTML-Formulare verbessern mit „autocomplete“

Um Formulare schneller ausfüllen zu können, bieten Browser die Möglichkeit der Autovervollständigung an. Einmal gemachte Eingaben werden gespeichert und bei erneutem Ausfüllen desselben Formulars oder eines anderen Formulars mit identischem Namen werden bisher gemachte Eingaben zur Vorauswahl angeboten. Das Problem dabei ist, dass abweichende Bezeichnungen für bestimmte Eingaben – zum Beispiel ein Name oder auch eine Kreditkartennummer – dazu führen, dass die Autovervollständigung nicht mehr funktioniert. Das neue Attribut „autocomplete“ vereinheitlicht die Bezeichnungen für eine Reihe vorgegebener Formulareingaben.

Unterschiedliche Bezeichnungen für Eingabefelder

Wer ein HTML-Formular erstellt, kann die „name“-Attribute, die zur Weiterverarbeitung der Inhalte wichtig sind, frei vergeben. Wird bei einer Kaufabwicklung die Kreditkartennummer abgefragt, gibt es unzählige Varianten, wie das Eingabefelder benannt werden kann: „kreditkarte“, „credit-card“ und „ccard“ sind nur drei Beispiele. Die unterschiedlichen möglichen Bezeichnungen machen es dem Browser unmöglich, immer zu erkennen, wann eine Kreditkartennummer eingegeben werden muss. Daher können Browser immer nur solche Eingaben zur Autovervollständigung anbieten, deren „name“-Attribut identisch ist.

Um diese Problematik zu beseitigen, gibt es das neue Attribut „autocomplete“. Anders als das „name“-Attribut, welches frei definiert werden kann, gibt es für „autocomplete“ vordefinierte Werte, die immer für eine bestimmte Eingabe stehen. So steht der Wert „cc-number“ für eine Kreditkartennummer.

<input type="text" name="kreditkarte" autocomplete="cc-number" />

Wird das Eingabefeld im Beispiel ausgefüllt, wird der Browser die Eingabe unter der Bezeichnung „cc-number“ für die Autovervollständigung speichern. Der Browser wird die Eingabe bei jedem Eingabefeld vorschlagen, welches dieselbe Bezeichnung für „autocomplete“ besitzt – unabhängig vom Wert des „name“-Attributes.

Feste Werte für Kreditkarten, Namen und Kontaktdaten

Da gerade die Bezahlung per Kreditkarte beim E-Commerce beliebt ist, gibt es für alle wichtigen Angaben für Kreditkartenzahlung entsprechende „autocomplete“-Werte. Neben der Kreditkartennummer („cc-number“) gibt es auch feste Begriffe für den Inhabernamen („cc-name“), die Kartenprüfnummer („cc-csc“), den Kartentyp („cc-type“) sowie das Ablaufdatum („cc-exp-year“ für das Ablaufjahr, „cc-exp-month“ für den Ablaufmonat und „cc-exp“ für das komplette Ablaufdatum).

Für die Angabe eines Namens gibt es ebenfalls mehrere vordefinierte Werte, die den vollständigen Namen („name“), den Vornamen („given-name“), den mittleren beziehungsweise zweiten Vornamen („additional-name“) und den Nachnamen („family-name“) darstellen.

Auch für Adressangaben gibt es unterschiedliche „autocomplete“-Werte. So wird zwischen Adresseingaben unterschieden, die sich auf ein Eingabefeld beschränken („street-address“) und die zwei Eingabefelder vorsehen („address-line1“ und „address-line2“). Der Wert „address-level1“ steht für die Eingabe eines Landes beziehungsweise einer Provinz und „address-level2“ für die Stadt. Die Postleitzahl wird mit „postal-code“ und der Staat per „country“ angegeben.

Außerdem kann bei Adresseingaben zwischen Liefer- und Rechnungsadresse unterschieden werden. Dazu können optional die beiden Schlüsselwörter „shipping“ und „billing“ mit übergeben werden.

<input type="text" name="lieferung_strasse" autocomplete="shipping street-address" />
<input type="text" name="lieferung_plz" autocomplete="shipping postal-code" />
<input type="text" name="lieferung_ort" autocomplete="shipping address-level1" />

Im Beispiel werden Straße, Postleitzahl und Ort für die Lieferadresse abgefragt.

Für die Angabe von E-Mail-Adressen und Telefonnummern gibt es mit „email“ und „tel“ jeweils nur einen Wert. Eine weitere Unterscheidung beispielsweise zwischen geschäftlicher und privater Telefonnummer gibt es nicht.