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.

WordPress-Plugin: Flexible Formulare mit dem Form Maker

Form Maker lautet der schlichte Name eines weniger schlichten Plugins aus der WordPress-Schmiede WebDorado. Mit dem Form Maker baust du per Drag-and-Drop flexible Formulare, die auch auf mobilen Geräten funktionieren.

Form Maker: ausgereift und (in der Grundversion) kostenlos

Form Maker ist ein, in der Grundversion, kostenloses Plugin in aktiver Entwicklung. Aktuell ist die Version 1.10.7 am Markt. Die Kompatibilität des Plugins mit der aktuellsten WordPress-Fassung wird bestätigt. Minimal benötigt Form Maker ein WordPress ab Version 3, ein PHP ab Version 5 und MySQL ebenfalls ab Version 5.

Form Makers besondere Stärke liegt darin, dass du mit seiner Hilfe beliebige Formulare mittels eines einfachen Drag-and-Drop-Interfaces bauen kannst. Trotz der einfachen Erstellung kann die dahinterliegende Funktionalität umfassend sein. So kannst du mit Form Maker etwa Daten nicht nur versenden, sondern direkt in eine Datenbank schreiben lassen. Alle Formulareinstellungen, die du ansonsten bereits aus PHP kennst, stehen als Dialogoptionen zur simplen Konfiguration bereit.

Das Erstellen eines neuen Formulars ist, selbst wenn es platt klingt, ein Kinderspiel. Nach der Installation des Plugins, die du entweder per FTP oder über Plugins installieren im Backend deines WordPress erledigen kannst, indem du nach WebDorado Forms suchst, findest du einen weiteren Menüpunkt in deiner Backend-Navigation.

Der Form Maker im WordPress-Backend

Unter dem Menüpunkt Form Maker findest du eine Liste deiner Formulare mit ihren entsprechenden WordPress-Shortcodes, sowie alternativ ihrer PHP-Funktionen, solltest du sie irgendwo einbauen wollen, wo Shortcodes nicht greifen. Mit Hilfe des gelben Stiftsymbols rufst du ein Formular zur Bearbeitung auf.

Der blaue Plus-Button oben links erlaubt dir das Erstellen eines komplett neuen Formulars. Natürlich lassen sich Formulare aus dieser Liste heraus löschen. Verfügst du dereinst über eine massive Vielzahl verschiedenster Formulare, wirst du dich eventuell darüber freuen, dass du deine Formulare sogar per Suchbegriff finden kannst. Otto Normaluser wird den Überblick mutmaßlich auch ohne diese Funktion nicht verlieren. WebDorado nennt diese Übersicht den Manager.

Unter dem Menüpunkt Submissions nimmst du Zugriff auf die Datenbank und lässt dir die bisherigen Eintragungen in der Datenbank gefiltert nach Ursprungsformular anzeigen. Hierzu musst du die Datenbankspeicherung für das jeweilige Formular konfiguriert haben, ansonsten versendet Form Maker ganz klassisch und ausschließlich an die entsprechend konfigurierte E-Mail-Adresse.

Der Punkt Blocked IPs erlaubt dir die Eingabe von IP-Adressen, die du für ein Ausfüllen deiner Formulare sperren willst. Du wirst ziemlich schnell merken, dass es für diesen Punkt tatsächlich reale Anwendungsfälle gibt.

Unter Themes findest du eine ganze Reihe vordefinierter Designs, die sich bei näherem Hinsehen als angepasste CSS-Dateien erweisen, die den Look deiner Formulare beeinflussen. Bist du des CSS mächtig, kannst du nicht nur bestehende Themes ändern, sondern auch neue erstellen. Das Erstellen neuer Themes ist in keiner Weise visuell unterstützt. Du schreibst pures CSS in ein pures Editorfenster.

Klickst du in der Themes-Übersicht auf eines der grauen Sternchen, so wird dieses vormals graue Sternchen gelb und zeigt an, dass dieses Theme künftig als Standardeinstellung für neue Formulare genutzt wird. Natürlich kannst du dennoch im individuellen Formular ein anderes Theme wählen, musst dich aber nicht unbedingt darum kümmern, wenn du eine passende Default-Einstellung gesetzt hast.

Zu guter Letzt findest du unter dem Unterpunkt Global Options noch die Eingabemöglichkeit für deine Recaptcha-Keys, wenn du mit dieser Antispam-Methode arbeitest. Außerdem hinterlegst du hier den Feldbegrenzer für den CSV-Export deiner Formulardaten.

Das Erstellen eines Formulars mit Form Maker

Wie bereits beschrieben, lassen sich Formulare aus dem Manager heraus bearbeiten oder ganz neu erstellen. Wenn du so ähnlich tickst wie ich, könnte es gut sein, dass du dir die Arbeit, ein Formular ganz neu zu erstellen, nur machen willst, wenn es gar nicht anders geht.

Da ist es gut, dass wir bestehende Formulare zur Bearbeitung öffnen und dann mit dem rechts oben befindlichen Button Save as Copy als Kopie speichern können. Dabei bleibt das komplette Layout erhalten, etwa bereits eingetragene Inhalte aber nicht.

Hast du die Drag-and-Drop-Funktionalität abgeschaltet, schiebst du Formularfelder nicht mehr einfach per Maus durch die Gegend. Vielmehr findest du jetzt an jedem Formularfeld eine kleine Bearbeitungsleiste, mit deren Hilfe du die Position und andere Parameter verändern kannst.

Hier hat es besonders der kleine, unscheinbare gelbe Stift in sich. Klickst du dieses Symbol an, öffnet sich ein Bearbeitungsfenster, innerhalb dessen du vollen Zugriff auf alle Parameter des gewählten Formularfelds hast. In diesem, recht komplexen Beispiel geht es etwa darum, eine Bewertungsskala für eine Produktbewertung anzulegen.

Der Vorgang ist nicht vollständig selbsterklärend oder intuitiv, von daher ist es gut, dass WebDorado sich um die Dokumentation seines Plugins verdient gemacht und diese Schritt-für-Schritt-Anleitung erstellt hat.

Rechts oben im Editor findest du den Punkt Form Options. Hier hinterlegst du die Logik hinter dem Formular. Es steht etwa eine einfache Paypal-Integration zur Verfügung (nur kostenpflichtig). Spezielle Funktionen programmierst du mit JavaScript und sogar bedingungsabhängige Reaktionen erstellst du mit ein paar Mausklicks.

Darunter fiele etwa das Einblenden bestimmter Formularinhalte nur dann, wenn zuvor bestimmte andere Formularinhalte in einer bestimmten Weise beantwortet wurden. Etwa bräuchte man nach dem Feld männlich/weiblich das Feld Wie viele Paar Schuhe haben Sie? nicht mehr einzublenden, wenn das Feld zuvor mit weiblich beantwortet wurde.

Form Maker: die einzelnen Ausbaustufen

Form Maker gibt es in vier Geschmacksrichtungen. Die kostenlose Variante kommt ohne Support und einer Begrenzung auf sieben Felder pro Formular. Immerhin kannst du unbegrenzt viele Formulare einrichten. Ebenfalls verzichten musst du auf die Paypal-Integration, den File-Upload und verschiedene andere Features.

Ab dem Tarif Personal erhältst du das volle Featureset. Unterschiede bestehen in der Unterstützung für Domains, sowie der Support-Dauer. Personal sichert dir für eine Einmalzahlung von 30 Dollar einen 6-monatigen Support für eine Domain. Im Business-Tarif wird dir ein Jahr lang auf drei Domains für eine Einmalzahlung von 45 Dollar geholfen und der Developer-Plan sichert dir einen 12-monatigen Support auf unbegrenzt vielen Domains für 60 Dollar.

In Anbetracht der absolut doch recht überschaubaren Preise empfiehlt sich für den Webentwickler auf jeden Fall der Developer-Tarif, während sich ambitionierte Einzelverwender auch eher den Business-Plan gönnen sollten, schon wegen der doppelt so langen Supportphase im Vergleich zum Personal-Tarif.

Fazit: Flexibles Formular-Plugin lässt kaum Wünsche offen

Form Maker ist ein Premium-WordPress-Plugin, das sein Geld in jedem Fall wert ist. Selbst für den höchsten Preis von 60 Dollar einmalig kannst du dir nicht mal eine Stunde eines Klempners kaufen und wenn du mit drei Leuten zu Luigi’s ums Eck gehst, wirst du vermutlich auch nicht damit auskommen und bist nachher nur einmal satt.

Wenn ich etwas kritisieren müsste, würde ich am ehesten das nicht ganz ausgereifte Design des Plugins benennen. Das wirkt an vielen Stellen schon recht hemdsärmelig, nicht mehr ganz zeitgemäß, funktioniert aber.

Wichtig zu erwähnen ist, dass gute CSS-Kenntnisse die Optik der Formulare deutlich verbessern können. Die integrierten Themes sind da doch eher nur mittelgut. Alles in allem aber verdient sich Form Maker durchaus eine Empfehlung.