Ninja Forms Anleitung & Features

Ninja Forms ist ein sehr beliebtes Formular Plugin, mit dem auch Anfänger schnell und einfach ein Kontaktformular anlegen können. Was das Plugin alles zu bieten hat, sowie Tipps und eine Anleitung findest du in diesem Beitrag.

Über Ninja Forms

Ninja Forms free Screenshot wordpress.org

Mit über 1 Million aktiven Installationen gehört Ninja Forms zu den Top WordPress Formular Plugins. Es ist sehr einfach zu bedienen und bietet alle nötigen Features für einfache Formulare. Wenn du erweiterte Funktionen benötigst, findest du diese in der Premium Version Ninja Forms Pro.

Aus dem gleichen Haus stammt übrigens auch Caldera Forms, das extrem viele Features bietet. Vor kurzem wurde leider bekannt gegeben, dass Caldera Forms nur noch bis Ende 2021 aktiv weitergeführt wird. Danach können Nutzer aber problemlos auf Ninja Forms umsteigen. Und erhalten auch einen großzügigen Rabatt bei der Pro-Version.

Aus diesem Grund habe ich mir das Formular Plugin mal näher angeschaut.

Die Ninja Forms Features (Free)

  • Formbuilder
  • Drag & Drop
  • Responsive
  • Formularvorlagen
  • 27 Feld-Typen
  • Berechnungsfunktion
  • Anti-Spam (Quizz, Recaptcha)
  • Bild-Auswahlfeld
  • Sterne-Rating
  • Speichern der Einträge
  • Export als CSV
  • Automailer

Pro Features

Weitere Features gibt es in der Pro Version, die ab $49,- pro Jahr erhältlich ist. Auch einzelne AddOns kannst du ab $29,- beziehen.

Ninja Forms Preise für Bundle und AddOns
  • Layout & Styles
  • Conditional Logic
  • File Uploads
  • Multi Step Forms
  • Marketing-Integration (Mailchimp, Constant Contact, ConvertKit)
  • Export als Excel
  • Anbindung PayPal Express
  • PDF

Ninja Forms Pro Features

WP Ninja Forms Anleitung

Wenn du Ninja Forms ausprobieren möchtest, nutzt du dazu einfach die Plugin Installation über das WP Dashboard. Also Plugin installieren, aktivieren und schon kann es losgehen.

In meinem Tutorial zeige ich dir jetzt, wie du ein einfaches Kontaktformular mit Ninja Forms anlegen kannst.

Kontaktformular einrichten

Ninja Forms Dashbaord
Im Dashboard hast du alle Formulare im Blick.

Im Ninja Forms Dashboard findest du schon ein Demo-Formular, das du direkt über den Shortcode auf jede Seite einfügen kannst. Über das Zahnradsymbol kommst du in die Formular-Einstellungen.

Wenn du ein neues Formular anlegen möchtest, klickst du auf „Neu hinzufügen“. Danach bekommst du schon einige fertige Formular Vorlagen angeboten, die dir einen schnellen Start ermöglichen.

Ninja Forms Formular Vorlagen
Zum schnellen Einstieg kannst du auch Vorlagen nutzen.

Für dieses Ninja Forms Tutorial erstelle ich ein neues Blanko Formular.

Formularfelder einfügen

Felder per drag & drop hinzufügen
Per drag & drop lassen sich Felder einfügen und verschieben.

Dank Formbuilder klappt das Einfügen von Feldern ganz einfach und intuitiv. Entweder per Klick oder drag & drop. So kannst du dann auch die Position der Felder verschieben.

Für mein Demo-Formular füge ich jetzt folgende Felder ein:

  • Vorname
  • Nachname
  • E-Mail
  • Textabsatz (Nachrichtenfeld)
  • Checkbox (DSGVO-Check)

Feldeinstellungen

Feldeigenschaften bearbeiten

Über das kleine Zahnrad gelangst du bei jedem Feld in die zugehörigen Feldoptionen. Hier stehen dir die erweiterten Optionen zur Verfügung:

  • Feldbeschriftung
  • Markierung als Pflichtfeld
  • Platzhalter
  • Beschreibung

DSGVO-Checkbox

Falls du eine DSGVO-Checkbox einfügen möchtest, nutzt du dafür einfach den Feldtyp Checkbox. In der Beschriftung kannst du auch einen Link zu deiner Datenschutzseite eintragen.

DSGVO Checkbox

Wenn du alle benötigen Felder eingefügt hast, kannst du dir eine Vorschau des Formulars anzeigen lassen.

Dazu klickst du einfach auf “Preview Form” und schon öffnet sich die Vorschau in einem neuen Fenster.

Vorschau des Formulars anzeigen lassen

Jetzt sollte dein Kontaktformular etwa so aussehen:

Fertiges Kontaktformular

Ninja Forms Styling: Design anpassen

Das Formular sieht eigentlich ganz gut und erfüllt auch seinen Zweck. Aber natürlich möchte ich auch das Layout und Design ein wenig aufhübschen.

Leider bietet Ninja Forms dieses Feature nur im Pro Add-On Styling komfortabel an. Aber es gibt eine kostenfreie Lösung. Dazu muss man allerdings etwas CSS einfügen.

Dazu musst du zunächst unter >Ninja Forms > Einstellungen den „Dev Mode“ aktivieren.

Aktivierung des Dev-Mode
Mehr Optionen im Entwicklermodus.

Denn dadurch erhält man erweiterte Optionen im Formbuilder. Beispielsweise kannst du dann bei den Feldern eine eigene CSS-Klasse eintragen.

Mehrspaltiges Layout

Jetzt kannst du auch ein mehrspaltiges Formular Layout einrichten. Also so, dass die Felder nicht untereinander, sondern nebeneinander stehen.

Dazu gehst du wieder in dein Formular und klappst bei den Feldoptionen für den Vornamen den Tab Anzeige auf.
Hier trägst du bei Container die CSS-Klasse one-half first ein. Dadurch wird die Feldgröße halbiert und links angeordnet.

mehrspaltiges layout über css klasse

Beim Feld Nachname trägst du im Feld Container dann die Klasse one-half ein.

felder nebeneinander anordnen

Jetzt sind die beiden Felder Vorname / Nachname nebeneinander.

Bei mobilen Endgeräten werden die Felder natürlich wieder untereinander angezeigt.

Farben anpassen

Auch in der Free-Version lässt sich mit etwas CSS das Design anpassen. Am besten vergibst du dazu dem Formular eine eigene CSS-Klasse.

CSS-Klasse für Formular anlegen
Lege eine eigene CSS-Klasse für dein Formular fest.

Das findest du in den erweiterten Einstellungen im Bereich Darstellung. Hier trägst du bei Wrapper deine CSS-Klasse (kontaktformular) ein.

Anschließend kannst du die CSS-Anweisungen im Customizer oder im Child Theme eintragen.

In meinem Beispiel ändere ich die Hintergrundfarbe des Formulars und runde die Ecke ein wenig ab. Damit es etwas luftiger wird, füge ich noch einen seitlichen Abstand ein.

.kontaktformular {
background: #e1e9ef;
padding: 20px;
border-radius: 8px;
}

Auch der Button gefällt mir nicht so recht. Also ändere ich die Farbe und runde die Ecken ab.

.kontaktformular input[type="button"] {
background: #7ac112!important;
border-radius: 50px;
padding: 10px 50px;
}

Fertiges Kontakt Formular

Beispielformular mit angepassten Styles

Wenn du mit dem Ergebnis zufrieden bist, kannst du das Formular veröffentlichen! Allerdings solltest du vor dem Einbau noch die Einstellungen für die Mail-Benachrichtigungen checken.

Mitteilungen (E-Mail & Aktionen)

Was soll nach dem Absenden des Formular passieren? Auch dafür bietet dir Ninja Forms viele Möglichkeiten.

Aktionen nach Absenden des Formulars

Unter > E-Mails & Aktionen stellst du ein, welche Aktionen nach dem Abschicken des Formulars erfolgen.

  • Erfolgsmeldung
    Hier trägst du den Text ein, der direkt nach dem Absenden auf der Webseite zu sehen ist.
  • E-Mail-Adresse des Administrators
    Enthält die Einstellungen für den Formularversand an deine E-Mail Adresse.
  • Einsendungen speichern
    Möchtest du die Formular-Einträge speichern? Das kannst du hier aktivieren oder auch komplett deaktivieren.

Mail an Administrator

Damit du das Formular auch zugestellt bekommst, trägst du bei der Mitteilung unter Empfänger deine Mail-Adresse ein.

Hinterlegt ist normalerweise die Admin-Mail, die auch in den WordPress Einstellungen eingetragen ist. Aber du kannst auch eine andere Adresse eintragen.

Mail an Empfänger einrichten

Bei „Antwort an“ solltest du die Adresse des Formular-Absenders eintragen. Diese kannst du über sogenannte Merge Tags einfügen.

Im Feld Nachricht lassen sich alle Formularfelder übergeben oder auch nur einzelne. Auch das wird über die Tag-Funktion geregelt.

Direkt darunter findest du die erweiterten Einstellungen.

erweiterte Einstellungen für Mailversand

Hier kannst du Details für die Absender-Angaben hinterlegen und auch CC-Adressen eintragen. Auch das Mail-Format lässt sich festlegen oder ein Anhang mitschicken.

Bestätigungsmail

Soll der Absender eine Bestätigungsmail bekommen? Dann kannst du eine neue Mail-Aktion erstellen.

Am schnellsten geht das über die Kopierfunktion.

Aktion duplizieren

Kopiere einfach die Mitteilung an den Admin und passe dann die Inhalte an.

Bestätigungsmail an Absender einrichten.

Diesmal trägst du hier beim Empfänger die Absender-Mail ein und bei „Antwort an“ deine eigene Mail-Adresse.
Die Nachricht kannst du natürlich auch personalisieren. Denn über die Tags lassen sich sämtliche Formularfelder auch einzeln einfügen.

Weiterleitung

Möchtest du nach dem Abschicken des Formulars den User auf eine andere Seite leiten? Auch das geht problemlos.

Dazu legst du über das große Plus-Symbol unten rechts einfach eine neue Aktion für die Weiterleitung an.

Weiterleitung auf Danke-Seite
Einrichtung einer Weiterleitung auf eine Danke-Seite.

Anschließend trägst du die URL zur gewünschten Seite an. Sobald der Nutzer das Formular abschickt, wird er dann auf deine Danke-Seite geleitet.

Formular einbauen

Wie bei fast jedem Formular Plugin kannst du auch Ninja Forms ganz einfach über einen Shortcode einbinden.

Ninja Forms Gutenberg Block

Wenn du Gutenberg nutzt, bindest du das Formular direkt über einen Gutenberg Block ein.

In Elementor kannst du sowohl den Shortcode als auch das WordPress Ninja Forms Widget verwenden.

Formular Einträge exportieren

Du möchtest deine Formulareinträge gerne als Liste weiterbearbeiten? Kein Problem! Unter >Ninja Forms > Einsendungen findest du alle abgeschickten Formular.

Nachdem du dein Formular ausgewählt hast, kannst du mit einem Klick alle Einträge downloaden.

Formulareinträge exportieren

Die Datei wird als CSV Datei exportiert und auf deinem Rechner gespeichert. Anschließend importierst du die Datei in Excel und hast eine übersichtliche und sortierbare Liste deiner Einsendungen.

CSV Import in Excel

Formular Tipps

Mit meiner Ninja Forms Anleitung konntest du jetzt hoffentlich schnell und einfach ein Kontaktformular erstellen! Aber natürlich bietet das Plugin noch viele weitere nützliche Features. Hier also noch ein paar Tipps von mir.

Berechnungsfunktion

Ähnlich wie bei Caldera kannst du auch in Ninja Forms berechnende Felder nutzen. Dazu muss allerdings der Dev-Mode aktiviert sein.

Hier ein kleines Beispiel für die Buchung von Coaching-Stunden.

Zuerst legst du ein Select-Feld an und trägst als „berechneter Wert“ die verschiedenen Preise ein.

Werte zur Formular Berechnung eintragen

Anschließend kannst du die Berechnung dafür festlegen. Die Optionen hierfür findest du in den erweiterten Einstellungen > Berechnungen.

Berechnungsformel einfügen
Über die Merge Tags fügst du Formularfelder zur Berechnung ein.

Als erstes trägst du hier einen Variablennamen einen wie z.B. Kosten oder price. Ins Feld daneben kommt die Formel. Auch hier kannst du wieder über die Merge Tags jedes beliebige Feld auswählen und einfügen.

In meinem Beispiel wird ja nicht wirklich viel berechnet, daher reicht die Eingabe des Coaching-Feldes. Aber wenn du beispielsweise einen Rabatt von 15€ abziehen möchtest, kannst du die Formel einfach ergänzen:

{field:deinFeldName}-15

Damit das Ganze auch im Formular angezeigt wird, fügst du zum Abschluss noch ein HTML Feld ein.

Formel im Formular anzeigen lassen

In dieses Feld fügst du jetzt wieder über die Merge Tags die angelegte Berechnungsformel ein.

Und so sieht es dann für den User aus. Je nach Auswahl verändert sich der angezeigte Wert.

Beispiel für formular berechnung

Select Field

Häufig vergessen Nutzer bei einem Dropdown Feld, eine Auswahl zu treffen. Ich nutze zwar immer als erste Option einen Platzhalter „bitte wählen“, aber dann wird eben oft nur der Platzhalter übergeben.

Genau dieses Problem kannst du mit Ninja Forms ganz einfach lösen.

Auswahl beim Select Field erzwingen

Dazu legst du das Auswahlfeld zunächst als Pflichtfeld fest. Anschließend gibst du als erste Option einen Platzhaltertext ein und setzt ganz rechts ein Häkchen. Im Feld „Wert“ darfst du nichts eintragen.

Wenn nun ein User vergisst, seine Auswahl zu treffen, erhält er eine Fehlermeldung. Er ist also gezwungen, eine Auswahl zu treffen.

Fazit:

WP Ninja Forms ist ein wirklich gutes Formular Plugin, das sehr viele nützliche Funktionen bietet!

Aber ist es auch ein gleichwertiger Nachfolger von Caldera Forms? Nicht wirklich. Denn bei Ninja Forms Free fehlen leider die tollen Features wie z.B. File Upload, Multi Step Form und Conditional Logic. Dazu muss man dann auf die Pro-Version upgraden. Aber als kleine Wiedergutmachung erhalten die bisherigen Nutzer (auch der Free-Version) einen Rabatt von bis zu 75%.

Eine sehr gute Ninja Forms Alternative ist meiner Meinung nach WP Fluent Forms. Ich nutze schon seit einiger Zeit die Pro-Version und kann das Tool sehr empfehlen. Und auch von diesem Anbieter gibt es für Caldera-User ein Umsteiger-Angebot mit einem Rabatt von 90%.

Schreibe einen Kommentar