Einfach gemacht: Kontaktformulare in WordPress bauen
Ninja Forms lässt sich, wie die meisten WordPress Plugins, bequem über das Backend eurer Webseite installieren. Hierfür loggt ihr euch ein, wählt Plugins und anschließend Installieren. Über die Suchmaske gebt ihr Ninja Forms ein und installiert es. Und los geht's!
Ein Formular erstellen
Um ein Formular zu erstellen, öffnet über die Seitenleiste des Backends den Menüpunkt Ninja Forms. Hier klickt ihr auf den Button Hinzufügen. Nun könnt ihr auswählen, ob ihr mit einem leeren Formular (Blank Form) beginnt, oder aber mit einer Vorlage. Für diesen Artikel werden wir mit einer Blank Form arbeiten.
Zu Beginn macht es Sinn zu definieren, wofür das Formular genutzt werden soll. Soll es ein herkömmliches Kontaktformular werden? Ist das Formular zur Bewertung eines E-Books oder eines anderen Produkts gedacht? Handelt es sich vielleicht um eine Art Umfrage, bei der die Herkunftsorte der Besucher abgefragt werden? Für diesen Artikel werden wir ein herkömmliches Kontaktformular nachbauen.
Ist das Ziel des Formulars geklärt, geht es an die eigentliche Erstellung. In der Blank Form lassen sich verschiedene Felder einbauen, woraus letztendlich das individuelle Formular entsteht. Hierfür richtet ihr euch nach eurer Vorlage und zieht eines der Felder von der rechten in die linke Seite.
Wichtig: In diesem Schritt geht es noch nicht darum einen Begrüßungstext oder ähnliches zu definieren. Das erfolgt nachträglich im Editor.
Das Formular könnte dann wie folgt aussehen:
Um das Formular vorerst so zu veröffentlichen, klickt ihr auf Fertig und dann auf Veröffentlichen. Anschließend legt ihr den Formulartitel fest und beendet die Konfiguration. Mit einem Klick auf das X wird der Bearbeitungsmodus verlassen.
Das Kontaktformular testen
Das Kontaktformular ist soweit erstellt. Jetzt geht es ans Einbauen, an Feinanpassungen und ans Testen.
Hierfür kopiert ihr unter Ninja Forms neben dem neuen Formular den dazugehörigen Shortcode. In dem Fall ist es [ninja_form id=2]. Diesen könnt ihr im Editor einer Seite oder eines Artikels einbauen. WordPress erkennt Shortcodes automatisch und reagiert entsprechend auf sie. Ihr braucht sie auch nicht in der Code-Ansicht einfügen, sondern wie gewohnt über die visuelle Ansicht. Mit einen Klick auf Vorschau seht ihr die neue Seite mit dem Formular.
Um die Namen der Felder zu ändern, wird das Formular erneut im Bearbeitungsmodus aufgerufen. Hier klickt ihr das Feld an und ändert den Eintrag in Beschreibung. Nach den Anpassungen sieht das Formular wie folgt aus:
Um die Funktion des Formulars zu testen, fügt ihr Testdaten ein und sendet das Formular ab. Ihr stellt Folgendes fest:
- Der Verfasser erhält eine Bestätigung über das Absenden der Nachricht.
- Ninja Forms schickt eine Bestätigungsmail an die angegebene Adresse des Autors.
- Ninja Forms schickt außerdem eine E-Mail an die in den Einstellungen hinterlegte Adresse des Administrators.
Um diese Punkte anzupassen (der Text könnte Englisch sein oder aber wichtige Daten fehlen), geht ihr wieder in den Bearbeitungsmodus des Formulars und wählt dort in der oberen Navigation E-Mails und Aktionen. Über diese könnt ihr die oberen drei Punkte steuern sowie festlegen, ob die Nachricht in der Datenbank gesichert werden soll.
Den passenden Rahmen schaffen
Ein Formular allein auf eine Seite einzubauen ist möglich. Sympathischer und verständlicher wird es aber mit einem Erklärungstext.
Um diesen einzufügen, baut ihr im Editor vor dem Shortcode einen entsprechenden Text ein. WordPress wird diesen dann vor dem Formular einblenden. Falls es Sinn macht, kann auch nach dem Formular noch Text hinzugefügt werden.
Für Profis: Ninja Forms kann noch mehr
Ninja Forms bietet einige Anpassungsmöglichkeiten, hält daneben auch erweiterte Funktionen in einer Premium-Version. Zu den Extras zählen Template-Pakete, komplexere Logiken bei Konfiguration der Formulare, Verbindungen zu PayPal, Trello, Mailchimp und mehr.
Wer bereits mit einfachen Formularen ohne mächtige Einstellungsmöglichkeiten in seiner Installation zufrieden ist, findet passende Module in unseren WordPress Vorlagen.
Wir wünschen viel Erfolg!
Kommentare
Also beispielsweise die Meldung, die nach dem erfolgreichen senden angezeigt wird?
du kannst im Backend nach Installation des Plugins den Menüpunkt "Ninja Forms" anklicken. Dort wählst du das Kontaktformular, das du bearbeiten willst, aus. In dem neuen Fenster kannst du den Reiter "E-Mails & Aktionen" öffnen. Dort findest du mehrere Einträge, unter anderem auch die von dir beschriebene Erfolgsmeldung bzw. Success Message. Über das Einstellungen-Icon kannst du Änderungen vornehmen und z.B. den Text von Englisch zu Deutsch übersetzen.
Ich denke über den gleichen Weg solltest du auch die anderen Elemente des Formulars anpassen können.
Viele Grüße,
Viktor
vielen Dank für deine detaillierte Antwort!
Hat mir geholfen!
Dir noch einen schönen Tag
lässt sich mit wpforms eine Bestätigungs-Email einrichten? Finde bisher nur den Bestätigungstext auf der Formularseite.
Danke und Grüße
Michael
schau doch mal hier: https://wpforms.com/docs/setup-form-notification-wpforms/
Hier wird dir das genauestens erklärt.
Gigahertzliche Grüße
Kristina
Beste Grüße
Claas
leider kann ich dir bei dem Thema nicht weiterhelfen. Vielleicht wendest du dich mit der Frage direkt an den Ninja-Forms-Support (https://ninjaforms.com/contact/)?
Viele Grüße,
Viktor
Vielen Dank für die informativen und umfangreichen Infos! Bei unserem umfangreichen Formular benötige ich mehrere Seiten, um die Email mit den ausgefüllten Daten auszudrucken. Lässt sich dieser Umfang bereits in den Einstellungen des Formulars ändern/Skalieren?
ich hoffe die Frage richtig verstanden zu haben: Die vom Formular per E-Mail übermittelten Informationen sind so gegliedert, dass sie beim Ausdrucken mehrere Seiten in Anspruch nehmen?
Ich bin mir nicht sicher welches Plugin / Tool Sie für das Formular nutzen. Es könnte in den Einstellungen möglich sein, nicht benötigte Felder zu deaktivieren und damit die per E-Mail übermittelten Informationen zu verringern.
Vielleicht bietet können Sie bei den Einstellungen zum Formular auch die Formatierung der übertragenen Daten anpassen? Dadurch wäre es die gleiche Menge an Informationen, aber kleiner und damit eventuell auf ein Blatt Papier passend.
Sollte das Plugin / Tool das nicht ermöglichen, kann ein Blick auf andere Lösungen lohnen. Vielleicht können diese Ihre Anforderungen besser abdecken.
Ich hoffe die Antwort hilft Ihnen weiter.
Gruß,
Viktor Peters
Hallo Viktor, danke für den interessanten Post. Kannst Du mir bei der Frage, ob sich mit der kostenlosen Version von Ninja Forms auch Opt-In Formulare aufsetzen lassen, weiterhelfen?
Hallo Paul-Gerhardt, soweit ich sehen kann dürfte das funktionieren. Bei besonderen Anforderungen wäre es möglich, dass die Elemente der kostenfreien Version nicht ausreichen und kostenpflichtige Erweiterungen her müssen. Viel Erfolg!
eine verständliche Anleitung zum Kontaktformularebauen hast du hier erstellt. Ich setze in meinen Wordpress-Blogs weiterhin auf WpForms, welches gut bestückt daher kommt. Mit WPForms habe ich auch die Möglichkeit, Checkboxen einzubauen. Weil laut irgendwelchen Regelungen kann ein Kontaktformular erst dann versendet werden, wenn der Blog-Datenschutz akzeptiert wurde. Das habe ich bei mir zumindest beim WP-CMS eingebaut als Pflichtfeld. So weiss ich, dass sich jeder zumindest den Datenschutz angesehen hat. Mir gab diesen Tipp mal ein Blogger.
Ich habe eben diesen Artikel in mein Twitter-Universum verfrachtet, sodass es auch meine Follower mitbekommen. Vermutlich hast du hier bald neue Kommentare :-)
Vielen Dank.