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
Mit über 700.000 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 inzwischen leider eingestellt wurde.
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 $99,- pro Jahr erhältlich ist. In allen Tarifen sind die Features Conditional Logic, File Upload, Layout & Styles sowie Multi Step enthalten.
Auch einzelne AddOns kannst du ab $29,- beziehen.
- Layout & Styles
- Conditional Logic
- File Uploads
- Multi Step Forms
- Marketing-Integration (Mailchimp, Constant Contact, ConvertKit)
- Export als Excel
- Anbindung PayPal Express
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
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.
Für dieses Ninja Forms Tutorial erstelle ich ein neues Blanko Formular.
Formularfelder einfügen
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
- Textabsatz (Nachrichtenfeld)
- Checkbox (DSGVO-Check)
Feldeinstellungen
Ü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.
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.
Jetzt sollte dein Kontaktformular etwa so aussehen:
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.
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.
Beim Feld Nachname trägst du im Feld Container dann die Klasse one-half ein.
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.
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
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.
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.
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.
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.
Kopiere einfach die Mitteilung an den Admin und passe dann die Inhalte an.
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.
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.
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.
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.
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.
Anschließend kannst du die Berechnung dafür festlegen. Die Optionen hierfür findest du in den erweiterten Einstellungen > Berechnungen.
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.
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.
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.
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. Hier findest du meinen Artikel dazu: Fluent Forms – Features & Anleitung.