Einfach gemacht: Kontaktformulare in WordPress bauen

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.

  1. Ein Formular erstellen
  2. Das Kontaktformular testen
  3. Den passenden Rahmen schaffen
  4. Für Profis: Ninja Forms kann noch mehr

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

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

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

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!

Kommentar hinzufügen