WPForms – das bessere Formular Plugin

Kontaktformulare findet man auf so gut wie jeder modernen Business-Website. Sie sind nützliche Helfer, um den ersten Kontakt mit dem Seitenbetreiber aufzunehmen. Nur gibt es hier große Unterschiede, wenn es um die Bedienung geht.  Ich selber nutze Premium-Themes für meine Websites, da sind dann schon ausgereifte Lösungen implementiert.

Wenn man sich von mir eine Website erstellen lassen lässt, dann braucht man sich darum nicht bemühen. Ich muss nur wissen, was abgefragt werden soll bzw. wofür das Formular verwendet wird. Möchte man sich sein Kontaktformular selber einrichten, wird man auf sehr vielen Websites unter Beiträgen wie „meine 10 beliebtesten Plugins 2017“ oder „die besten Plugins 2017 …“ usw.  als Empfehlung für Formulare, fast immer das Plugin Contact Form 7 finden.

Contact Form ist zwar gut, aber wohl keine Empfehlung für unerfahrene Homepage-Gestalter und darauf zielen die meisten Beiträge in diesem Kontext ja ab. Man hat mit Contact Form 7 im Prinzip so gut wie alle Möglichkeiten, allerdings ist es doch schon eher für Entwickler als für den unbedarften Nutzer geeignet, da hier mit Code gearbeitet wird.

Einfacher als Contact Form 7 – WPForms

Deswegen habe ich hier ein Formular Plugin, welches ganz einfach per Drag and Drop bedient werden kann und dazu auf Deutsch und vor allem kostenlos ist.

Das Plugin WPForms findet Ihr hier oder im WordPress-Backend unter Plugins.

Dieses Plugin deckt im Prinzip die meisten Wünsche an ein normales Kontaktformular ab. Ich stelle hier die kostenlose Lite Version des Plugins vor. Es gibt auch eine Pro Version davon, die dann wesentlich mehr Möglichkeiten bietet, wie z. B. integrierte Zahlungsfelder, HTML Felder etc. Wenn man allerdings das Formular nur für die Kontaktaufnahme benötigt, reicht die kostenlose Version vollkommen aus.

Nicht nur die Bedienung ist sehr einfach, dazu kommt noch, dass es schon drei integrierte Vorlagen gibt. Im Prinzip muss man nur seine Vorlage auswählen und fertig ist das Kontaktformular. So sieht die Vorlage „Einfaches Kontaktformular“ auf der Webseite aus:

So fügen wir das Kontaktformular auf der Website ein

Um das Formular in die eigene Webseite einzubinden benötigen wir nur einen Shortcode, diesen finden wir bei WPForms oben links neben dem Speichern-Button. Wenn man dort auf „Einbetten“ klickt, öffnet sich ein Popup mit dem Shortcode und praktischerweise darunter gleich ein Video, was das Einbetten erklärt.

Den Shortcode kopieren und an der Stelle eurer Webseite einfügen, wo das Kontaktformular später erscheinen soll. Ich mache das jetzt einfach mal und füge den Shortcode (für mein leicht verändertes Kontaktformular) hier unter diesen Text ein:

Es wurde ein wenig gegenüber der Originalvorlage verändert, ich habe noch eine kleine Umfrage integriert (einfach die Mehrfachauswahl benutzen) und ein paar Hinweise eingetragen. Wie man die einzelnen Felder editiert findet man ganz schnell selber heraus, ich möchte die Pluginvorstellung hier nicht elendig lang machen. Nur was mir nicht gefiel, war der „Senden“ Button am Ende des Formulars, diesen habe ich farblich etwas angepasst.

Den folgenden CSS Code für die Änderung des Senden Buttons habe ich unter DESIGN-> CUSTOMIZER-> ZUSÄTZLICHES CSS eingetragen.

div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
 background-color: #f96520; /* Button Hintergrundfarbe */
 border: 1px solid #ddd; /* Button Rahmenfarbe */
 color: #ffffff; /* Text Farbe */
 font-size: 1em; /* Textgröße */
 padding: 10px 30px; /* Grösse des Buttons Höhe und Breite */
}

/* Button Hover Style */
div.wpforms-container-full .wpforms-form input[type=submit]:hover, 
div.wpforms-container-full .wpforms-form input[type=submit]:active, 
div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
div.wpforms-container-full .wpforms-form button[type=submit]:active, 
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, 
div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
 background-color: #ffffff; /* Hintergrundfarbe Hover */
 border: 1px solid #f96520; /* Rahmenfarbe Hover */
 color: #f96520; /* Hover Text Farbe */
}

Über dem „Senden“ Button findet man noch eine Checkbox (Kenntnisnahme) mit einem Hinweis zur Speicherung und zum Datenschutz. Diesen Hinweis habe ich nicht zum Spaß dort eingebaut, er sollte (wohl) bei jedem Kontaktformular eingefügt werden, um Ärger zu vermeiden.

Den Text dazu können Sie gerne für sich übernehmen. Ob das ausreichend ist und den Datenschutzanforderungen entspricht kann ich nicht garantieren, da ich kein Rechtsanwalt bin. Um den Hinweis zu erstellen habe ich ein Feld „Checkboxen“ per Drag and Drop aufgezogen und die Einstellungen, wie auf der linken Seite im Bild zu sehen, angepasst.

Fazit:

Mit WPForms bekommt man selbst in der kostenlosen Lite Version ein voll funktionsfähiges Kontaktformular, was sich einfach erstellen und gestalten lässt. Dazu ist es auch noch responsive, sodass auch Mobile Nutzer mit Ihnen bequem Kontakt aufnehmen können.