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-7-in-der-Bearbeitungsansicht

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:

WPForms Vorlage-einfaches-Kontaktformular

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.

Auswählen des installierten Plugins wpforms
wpforms-Kontaktformular-Einbetten

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:

Kontaktformular zum Test mit WPForms erstellt

Unter jedem Feld kann man auch eine Beschreibung angeben. Hier könnte stehen: Wir benötigen Ihre E-Mail Adresse, damit wir Ihnen auch antworten können.


Hier mal 4 Checkboxen, die man einzeln oder auch mehrfach auswählen kann.
Ich bin damit einverstanden, das meine Daten zum Zweck der Kontaktaufnahme gespeichert werden. Weitere Informationen finden Sie in der Datenschutzerklärung.

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.

Hinweis

Nur für erfahrene Anwender, ich übernehme keine Garantie für Fehler

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 */
}

Datenschutz & Kontaktformular

Ü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.

wpforms-kenntnisnahme-zum-datenschutz

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.

Wie hat Ihnen dieser Beitrag gefallen?

1 Stern2 Sterne3 Sterne4 Sterne5 Sterne (1 Bewertungen: 4,00 von 5)
Loading...
4 Kommentare
  1. Ruhrpott Shopping Guide sagte:

    Hallo Lars,
    ist es möglich mit dem Plug -In Mehrfachauswahl für den Anwender zu erstellen, damit er zum Beispiel aus 5 Möglichkeiten mehr als 1 Antwort aussuchen kann ?
    Beste Grüße Andreas

  2. Lars sagte:

    Hallo Andreas,

    das kann man machen, ich habe für Dich mal im obigen Formular 4 Checkboxen eingefügt, hier kann der Besucher entweder nur eine Antwortmöglichkeiten auswählen oder eben mehrere.
    Das könnte man dann mit noch mehr Checkboxen erweitern und hat so gleich einen Fragekatalog zur Hand.

    So nach dem Motto, welchen Wein mögen Sie, Rot – Weiß – Rose.
    Welchen Geschmack bevorzugen Sie? Lieblich – Trocken – Halbtrocken usw.

    Die Checkboxen können dabei untereinander und nebeneinander angeordnet werden.

    Gruß
    Lars

  3. Lars sagte:

    Hallo Diko,

    ich weiß nicht ob ich die Frage richtig verstehe, wo sollte man sich damit anmelden?
    Wenn es um eine Terminbuchung (Seminaranmeldung) geht ist das kein Problem, da ich bei den Auswahlfeldern ja statt Option 1 z.B. den Termin hinterlegen kann, also z.B. Seminar am 15.07.2018.
    Diese Daten werden Dir dann per Mail zugesendet.

    Gruß
    Lars

Dein Kommentar


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Dieses Formular speichert Ihren Namen, Ihre Email Adresse (wird nicht veröffentlicht) sowie den Inhalt.

Ich stimme zu das meine hier eingegebenen Daten bis auf Widerruf gespeichert werden.