Einfach gemacht: Kontaktformulare in WordPress bauen

|
Menschen legen Puzzle, welches das WordPress Logo zeigt, zusammen

Mit WordPress lassen sich schon lange viel mehr als nur Blogs betreiben. Was bei Online-Shops, Portfolios oder Unternehmensseiten nicht fehlen sollte, ist ein Kontaktformular. Wir zeigen euch, wie ihr Formulare mit dem Plugin Ninja Forms in wenigen Schritten bauen könnt.

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.

formular
Auswahlmöglichkeit verschiedener Formular-Vorlagen: Leere Vorlage, Kontaktformular, Angebotsanfrage oder Event-Registrierung

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:

formular2
Auswahl verschiedener Bestandteile für das Kontaktformular

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.

formular3
Kontaktformular mit Feldern zum Eingeben des Namens, der E-Mail und der Nachricht

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:

Kontaktformular in WordPress mit verschiedenen Textfeldern: Vorname, E-Mail-Adresse und Nachricht
Kontaktformular in WordPress mit verschiedenen Textfeldern: Vorname, E-Mail-Adresse und Nachricht

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!

Ähnliche Artikel:

Webentwicklung

WordPress 6.3 – Die neuen Features

WordPress 6.3 geht an den Start! Was es kann und wo es euch Arbeit abnimmt, hat Lukas sich angeschaut. Seine Favourites stellt er hier vor.

DSGVO-konforme Webfonts in WordPress
Webentwicklung

DSGVO-konforme Web Fonts in WordPress

Schriften auf Websites müssen DSGVO-konform eingebunden sein, sonst drohen Abmahnungen. Wie das mit Webfonts in WordPress geht, erklärt Lukas.

Kommentare

Lena am
Wie mache ich es denn, dass ich die Texte in Deutsch hinterlege?
Also beispielsweise die Meldung, die nach dem erfolgreichen senden angezeigt wird?
Antworten
Viktor Peters am
Hallo Lena,

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
Antworten
Lena am
Lieber Viktor,
vielen Dank für deine detaillierte Antwort!
Hat mir geholfen!
Dir noch einen schönen Tag
Antworten
Michael Bünker am
Hallo Viktor,
lässt sich mit wpforms eine Bestätigungs-Email einrichten? Finde bisher nur den Bestätigungstext auf der Formularseite.
Danke und Grüße
Michael
Antworten
Kristina El-Issa am
Hey Michael,

schau doch mal hier: https://wpforms.com/docs/setup-form-notification-wpforms/

Hier wird dir das genauestens erklärt.

Gigahertzliche Grüße
Kristina
Antworten
Claas am
Hallo Viktor! Vielen Dank für den informativen Post. Kannst du mir sagen, wie ich mit Ninja Userprofile erstellen kann, die in einem geschützten Mitgliederbereich eingesehen und geändert werden können?
Beste Grüße
Claas
Antworten
Viktor Peters am
Hallo 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
Antworten
Michael Bünker am

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?

Antworten
Viktor Peters am
Hallo Herr Bünker,

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
Antworten
Paul-Gerhardt am

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?

Antworten
Viktor Peters am

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!

Antworten
Alexander Liebrecht am
Hallo Viktor,
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 :-)
Antworten
Hermann am
Ich habe alle "Einsendungen" gelöscht und würde gerne wieder bei #1 beginnen. Wo kann ich diese Einstellung resetten?

Vielen Dank.
Antworten

Kommentar hinzufügen