So wird ein Formular mit HTML & CSS responsive!

Tutorial: Ein Formular in einem Responsive Design erstellen!

Erstellt am Sonntag, 16. April 2017 08:00 Uhr



Ein Formular mit HTML und CSS responsive gestalten!

Wenn Sie ein modernes Formular in einem Responsive Design nutzen möchten, sollten Sie sich einmal mein Kontaktformular (kontaktformular.com) anschauen. Derzeit werden fünf responsive Formular Templates (HTML/CSS) angeboten, sodass sicherlich auch für Ihre Website etwas passendes dabei ist.

Der E-Mail Versand wird über die PHP Funktion mail(), welche in der Regel auf dem Webserver installiert ist, realisiert. Sofern Ihr Hosting-Anbieter diese Funktion nicht unterstützt, können Sie auch die integrierte SMTP Funktion aktivieren. Um das Kontaktformular via SMTP nutzen zu können, benötigen Sie lediglich die entsprechenden Informationen des SMTP Server. Die Informationen erhalten Sie bei Ihrem Hosting-Anbieter.

Das responsive Formular kann über ein externes Stylesheet (CSS) und über einen übersichtlichen HTML Code an Ihr Layout angepasst werden. Somit kann das Responsive Design unkompliziert durch Ihre Vorgaben geändert werden. Auf der FAQ Seite werden die wichtigsten Layout- und Technikfragen beantwortet.

Kontaktformular mit DSGVO: Seit dem 25.05.2018 besteht die Möglichkeit, das Kontaktformular mit einer Checkbox für die DSGVO (EU Datenschutzgrundverordnung) zu nutzen. Die entsprechende Checkbox kann wahlweise aktiviert und deaktiviert werden.

Auf kontaktformular.com finden Sie auch ein Kontaktformular Tutorial, mit dessen Hilfe zusätzliche Felder hinzugefügt werden können. So ist es möglich, ein weiteres Input-Feld, eine Checkbox oder eine Select Box einzufügen. Durch das Tutorial können Sie also auch ein individuelles Kontaktformular erstellen.


So integrieren Sie das responsive Formular!

Es gibt verschiedene Möglichkeiten, um das responsive Formular nahtlos in Ihre Website zu integrieren. Am einfachsten ist die (responsive) iFrame Methode, denn diese erlaubt es, das Formular sowohl in dynamische- als auch in statische Webseiten komfortabel einzubinden. Die Einbindung des Formulars kann ganz einfach mit unserem responsiven iFrame erfolgen.

Eine ausführliche Installationsanleitung finden Sie hier.

Das responsive Formular eignet sich für WordPress, Bootstrap, Joomla!, TYPO3, Contao, Drupal, Contrexx, CMSimple und (natürlich) für statische Webseiten. Auf kontaktformular.com finden Sie eine Schritt-für-Schritt Anleitung für WordPress und Bootstrap!


So sehen die responsiven Formulare aus!


Die Templates stehen in jeweils zwei Versionen zur Verfügung! Die Versionen unterscheiden sich lediglich in der Anzahl der Formular Felder.

Vergleichen Sie die Versionen auf kontaktformular.com!

Responsives Formular Template 1
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 1 - erweitert
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 2
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 2 - erweitert
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 3
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 3 - erweitert
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 4
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 4 - erweitert
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 5
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Responsives Formular Template 5 - erweitert
(In neuem Fenster öffnen, um responsives Layout zu testen!)


Wo kann ich das responsive Formular herunterladen?

Der Download des Formulars ist über die Website kontaktformular.com möglich! Auf dieser Seite finden Sie alle notwendigen Informationen und Hinweise. Bitte beachten Sie auch die Lizenzbestimmungen.


Das könnte Sie auch interessieren!

Tutorial: So wird ein iFrame responsive!


Anregungen, Fragen & Kritik


Knothe Media News

01.07.2018
Erste Buchveröffentlichung
16.01.2018
SEO Stammtisch Bremen
07.01.2018
SEO im Jahr 2018
04.08.2017
Gastartikel veröffentlichen
19.06.2017
SEO Tool: Wise SEO Suite
16.04.2017
Responsive Formulare
05.04.2017
Wichtige SEO Maßnahmen
11.10.2016
Privates Blog Netzwerk aufbauen
06.10.2016
Mobile Webseite erstellen
23.08.2016
Presse aktualisiert
14.07.2016
Wird SEO überbewertet?
15.03.2016
Referenzen aktualisiert
24.10.2015
Knothe Media goes mobile!

Google Updates

23.09.2016
Penguin Update 4.0 (Real-time)
12.05.2016
Mobile-friendly 2 Update
08.01.2016
Google Core Update
26.10.2015
RankBrain Update 1.0
17.07.2015
Panda Update 4.2
13.05.2015
Google Phantom Update
17.10.2014
Penguin Update 3.0
25.09.2014
Panda Update 4.1
20.05.2014
Panda Update 4.0