Darum geht es

Dies ist kein Template (Homepagevorlage). Vielmehr soll es hier um Responsive Design-Formulare gehen, welche Sie bei Bedarf kostenlos in unsere Homepagevorlagen einbauen können. Unsere Templates finden sie hier auf https://www.on-mouseover.de/templates/

Die Formulare

Klicken Sie im Menü die Links 'Formular-01', 'Formular-02' usw. und Sie sehen verschiedene Formulare, welche Sie natürlich durch Hizufügen oder Löschen von Feldern individuell gestalten können. Es sollte klar sein, das z.B. im 'Formular-04' die Beispiele bei den Checkboxen/Radio-Buttons, nämlich Haustiere und Lieblingsfarbe, beispielhaft für viele andere Anwendungsmöglichkeiten stehen.

Das Besondere

Bevor wir auf das Besondere (Punkt 3.) zu sprechen kommen, ist zunächst ein Blick auf das Grundsätzliche nötig. Denn es gibt unzählige Arten ein Formular zu gestalten, jedoch nur 2 wesentliche Basis-Möglichkeiten, wie:

1.] Meist steht voran die Beschriftung (Label) des jeweiligen Feldes (z.b. Name) und darunter befindet eine Zeile tiefer das 'input-Feld' zum eigentlichen Eintragen des Namens, um im Beispiel zu bleiben. Oder alternativ steht das Label links oder rechts vom 'input-Feld'.

2.] Um es moderner und vor allem platzsparender zu gestalten, kann man auch die Beschriftung direkt in das 'input-Feld' schreiben, per sog. Platzhalter-Text, welcher verschwindet, sobald man den ersten Buchstaben einträgt. Der Nachteil dieser ansich schönen Lösung ist jedoch: Wenn der Platzhalter-Text einmal verschwunden ist, so kommmt er nicht mehr wieder zurück und der Kunde hat keine Orientierungsmöglichkeit mehr, weiss also nicht mehr um was für ein Feld es handelt (Email, Text, Nummer usw.)

3.] Nachstehend unsere Lösung um den Nachteil (von Punkt 2.) auszugleichen:
Die Beschritung (Label) fliegt nach Klick animiert und verkleinert nach oben und bleibt dort permanent stehen. Darunter ist dann wie gewohnt Platz für den Feld-Eintrag. Das ist nicht nur praktisch und nett anzusehen sondern macht auch einen seriösen, vertrauenserweckenden Eindruck.

Bedienkomfort: Grobe Prüfung der Felder ohne Javascript

Drückt man den Absenden-Button ohne die Felder auszufüllen, erscheint eine Meldung des Browsers (Bitte Felder ausfüllen). Was früher ohne Javascript nicht möglich war, geht hier mit HTML5 required direkt im Browser.

Auch pattern ist ein neues HTML5-Element und wird ebenso wie required direkt im HTML-Bereich beim jeweiligen Formular-Feldes eingetragen. Das Email-Feld (input-type="email") im Beispiel erwartet somit eine Eingabe in der Art wie x@x.de um als valide Email durchzugehen.

Diese browsereigene Validierung ersetzt keine serverseitige Überprüfung, kann aber falsche Angaben schon direkt im Browser anzeigen und erhöht so den Bedienkomfort.

Checkboxen und Radio-Buttons

Bei den recheckigen Checkboxen ist eine Mehrfachauswahl möglich, bei den runden Radio-Buttons kann nur ein Element ausgewahlt werden. Das ist soweit klar, aber als Besonderheit möchte ich noch erwähnen: Durch die Label-Beschriftung genügt eben auch ein Klick auf den Text (nämlich das Label) um die Checkbox/Radio-Button zu aktivieren, man muss also nicht zielgenau mit der Maus ins Rechteck/Kreis treffen.

Nicht ganz unwichtig ist auch, das wir die jeweilige Checkbox/Radio-Button mit dem Label sozusagen verschweißt haben, d.h. 'CSS white-space:nowrap' verhindert bei einem Zeilenumbruch das Checkbox/Radio-Button und der dazugehörige Text getrennt werden und in unterschiedlichen Zeilen stehen. Sie können das gut sehen, wenn Sie das Browserfenster von klein nach groß in der Breite immmer weiter aufziehen.

Der Code und der Einbau der Formulare

Um es für Sie möglichst übersichtlich zu gestalten und den passenden HTML/CSS-Code leicht zu finden, haben wir für jedes Formular eine HTML-Datei sowie eine entsprechende CSS-Datei angelegt. Zum Beispiel:

Für Formular-01 ist das die HTML-Datei 'formular-01.html' sowie die CSS-Datei 'formular-01.css'
oder
für Formular-02 ist das die HTML-Datei 'formular-02.html' sowie die CSS-Datei 'formular-02.css'
usw.

Sie benötigen also diese zwei Komponenten:

1.) HTML:
Für den HTML-Bereich gilt ganz einfach der Code, welcher für das jeweilige Formular zwischen diesen Kommentarzeilen steht. Also für Formular01 finden Sie den Code in der Datei 'formular-01.html' :

<!-- formular -->
 ...
<!-- formular ende -->

Fügen Sie den HTML-Code durch Kopieren in die HTML-Datei des neuen Templates an gewünschter Position ein.

2.) CSS:
Und für den CSS-Bereich benötigen Sie die entsprechende CSS-Datei. Also für Formular01 die Datei 'formular-01.css
Kopieren Sie die diese in das neue Template und zwar in den Ordner namens 'css'
und setzen Sie in der HTML-Datei im Kopfbereich, also zwischen </head> und </head> einen Link zu den CSS-Datei, wie hier nachstehend am Beispiel zur CSS-Datei von Formular-01 sowie zur CSS-Schrift-Datei.

<link rel="stylesheet" href="css/formular-01.css" type="text/css">
<link rel="stylesheet" href="css/font-open-sans-condensed.css" type="text/css">

Hinweis: Für die Schrift gehört noch die Datei 'font-open-sans-condensed.css in den Order 'css' sowie der Unter-Ordner 'open-sans-condensed' in den Ordner namens 'fonts'. Nur für das grafisch angelegte Formular-05 muss das entsprechende Hintergrundfoto, also gfls. auch Ihres, sich im Ordner 'images' befinden.

Nachstehend zum besseren Verständnis hier eine allgemeine Übersicht, aus der Sie die Verzeichnis-und Dateistruktur ersehen können:

Wie wird das Formular versendet?

Zum Versenden der Daten im Formular benötigt man ein Mail-Versand-Script (In der Regel ein PHP-Script) oder einen Anbieter, der Script und Hosting zur Verfügung stellt.

Einige Anbieter:
https://www.formular-chef.de/
https://www.dw-formmailer.de/
https://www.webmart.de/
https://www.onlex.de/

Am einfachsten ist es natürlich, wenn Sie auch das Formular des jeweiligen Anbieters verwenden, das ist klar. Aber darum geht es ja nicht, sondern wie Sie ein eigenes Formular bzw. unser Formular benutzen, welches dann über einen Formular-Provider versendet wird und dieser Anbieter auch die Fehlerprüfung der Eingabefelder des Formulars übernimmt.

Ich habe es damals bezgl. des Anbieters https://www.dw-formmailer.de/ wie folgt gemacht:
Man erhält ein Formular von DW-Formmailer, nach Registrierung dort, welches alle relevanten Versand-Daten enthält und dieses dann zunächst in das eigene Template einbaut. Dann testet man das Formular von DW-Formmailer und schaut ob der Mailversand klappt. Wenn der Mailversand klappt ist man ein großes Stück weiter und kann die zum Versand wichtigen Daten dann vom DW-Formmailer-Formular in unser Formular einbauen/hineinkopieren. Man kann auch Felder aus dem DW-Formmailer oder eine Sicherheitsabfrage (Captcha-Abfrage: Sind Sie Roboter) aus dem DW-Formmailer-Formular übernehmen und in unser Formular einbauen. Eventuell können Sie auch beim Anbieter nachfragen, wie Sie bei einem eigenen Formular vorgehen sollten.