- Schwierigkeitsgrad: sehr leicht
- Umsetzungsdauer: 25 Minuten
In diesem Schritt erstellen wir ein kostenloses Kontaktformular. Welches man sehr einfach nach seinem Bedarf mit unzähligen Feldern ausfüllen kann.
Gehe dafür ins Dashboard deiner Homepage
http://ihre-domain.de/wp-admin
Als erstes benötigen wir dafür ein weiteres kostenloses Plugin (Erweiterung), welches wir jetzt installieren werden.
Dafür in der linken Menüleiste auf „Plugin“ klicken.
Danach oben auf „installieren“ klicken und rechts in der Suche „Ninja Form“ eingeben.
Jetzt werden eine Vielzahl an möglichen Plugins angezeigt die zu diesem Thema passen.
Wir wählen „Ninja Forms Contact Form – …“ oben rechts aus und klicken auf „Jetzt installieren“ und danach noch auf „aktivieren“
Damit ist das Plugin aktiv und kann sofort eingesetzt werden.
In der Menüleiste ist ein weiteres Feld mit „Ninja Forms“ dazu gekommen, sobald man dies angeklickt hat, kann man ein neues Kontaktformular nach eigenen Wünschen erstellen.
Klicke dafür auf „Neu hinzufügen“.
Hier siehst du eine Vorschau an verschiedene vorgefertigten Formularen, welche du nach belieben erweitern kannst.
Wir wählen für unseren Fall „Kontaktiere uns“.
Als erstes wollen wir noch ein weiteres Feld für die Führerschein-Klasse dazu fügen.
Dabei gehen wir unten rechts auf das „blaue Plus“.
Hier sehen wir die Vielfalt an Möglichkeiten, welche Felder man dazu fügen kann. Wir benötigen für unsere Formular ein „Auswählen“ – Feld.
Sowie muss Check Box für die Datenschutzbestimmungen. Deshalb klicken wir noch einmal auf das Feld „Checkbox“.
Danach klicken wir oben rechts auf „Fertig“.
Jetzt können die einzelnen Felder einfach angeklickt werden und an die entsprechende Stelle gezogen werden.
Feld anklicken -> Maustaste festhalten –> und an die richtige Stelle schieben.
In dem man auf die einzelnen Felder klickt, öffnet sich rechts ein Bearbeitungsfenster.
Wo man die einzelnen Beschriftungen ändern kann, sowie ob das Feld ein erforderliches Feld ist.
Text für die Checkbox der Datenbestimmung.
Wir haben folgenden Text eingeben:
Ich stimme zu, dass meine Angaben aus dem Kontaktformular<br>zur Bearbeitung meiner Anfrage erhoben und verarbeitet werden.<br> Ich gebe Ihre Daten nicht an Dritte weiter. <br>Hier geht es zu meinen <a href=“/datenschutz“>Datenschutzbestimmungen</a>.
Diesen Text haben wir entsprechend mit Html Codes wie Zeilenumbrüchen <br> und die Datenschutzbestimmung auf die Datenschutzseite verlinkt ( /datenschutz ). Wenn du diese so übernimmst, achte darauf das deine Datenschutzseite –> „Datenschutz“ benennst.
Als letztes bearbeiten wir noch den „Submit“ Button.
Wir haben diesen in „Formular absenden“ umbenannt.
Darunter bei der „Beschriftung für Bearbeitung“ haben wir „Formular wird verschickt …“ ausgefüllt. Dies wird kurz angezeigt wenn das Formular versendet wird.
Als nächstes bearbeiten wir noch die E-Mail die an den User als Bestätigung geschickt wird und was wir selbst als Eingangsbestätigung erhalten.
Dafür müssen wir oben auf „E-Mails & Aktionen“ klicken.
Bei „Store Submission“ können wir das Formular benennen, wie es abgespeichert werden soll.
Im zweiten Punkt bei „Email confirmation“ können wir die Bestätigungs E-Mail vorbereiten die der User erhalten soll.
Dafür haben wir oben bei „Name der Aktion“ das Feld in „Email Bestätigung an User“ benannt. Dies sieht der User nicht.
Das Feld „Empfänger“ muss so bleiben, damit der User die Email erhält.
Bei dem Feld „Antwort an“ muss Ihre E-Mail-Adresse rein. Damit der User direkt auf die E-Mail antworten kann.
Bei „Betreff“ können Sie den Titel ändern die die E-Mail erhalten soll.
Jetzt verfassen wir die personalisierte Nachricht die der User erhalten soll.
In unserem Fall soll es
Hallo „Mario“ sein. Dafür geben wir „Hallo“ in das Nachrichtenfeld ein.
Jetzt muss der Name des User automatisch ersetzt werden. Dafür gehen wir auf das „Listen-Symbol“ was sich in der Mitte befindet.
Hier findest du alle Felder die du im Formular abfragst.
Wähle jetzt oben „Ihr Name …“ (hellblau hinterlegt) aus.
Damit wird automatisch der {field:ihr_name_1596537408149} mit dem Namen vom User ersetzt. Bitte beachte, dass bei dir eine andere Nummer angezeigt wird. Diese wird für jedes neue Feld von Ninja Forms erzeugt.
Dies ermöglicht es dir sehr personalisierte Nachrichten zu erstellen, mit den Feldern die du abfragst. Achte dabei aber darauf nur Felder in der Nachricht zu nutzen die auch als „Erforderliches Feld“ ausgewiesen sind.
Der dritte Punkt „Email Notifaction“ haben wir in „Email Eingangsbestätigung“ umbenannt.
Hier kannst du die Nachricht einstellen, die du als Eingangsbestätigung erhälst.
Bei „Empfänger“ wird mit dieser Einstellung, direkt an deine System Email geschickt, die du bei WordPress hinterlegt hast. (Dashboard -> linke Menüleiste „Einstellung“ –> „Allgemein“) Du kannst hier aber auch eine beliebige andere Email hinterlegen.
Bei „Antwort An“ wird direkt die Emailadresse vom User eingefügt, somit kannst du direkt in deinem Emailprogramm an den User antworten.
Bei „Nachricht“ haben {all_fields_table} eingeben, damit werden alle Felder ausgeben, die der User ausgefüllt hat.
Im letzten Punkt kann man noch den Text einstellen, der direkt nach dem versenden des Formulars angezeigt werden soll.
Im letzten Reiter „Erweitere Einstellungen“ kann man folgendes ändern.
Bei Darstellung
- FORMULARTITEL
- FORMULARTITEL ANZEIGEN
- ERFOLGREICH KOMPLETTIERTES FORMULAR LEEREN?
- FERTIGGESTELLTE FORMULARE VERSTECKEN?
Bei Beschränkungen
sind sehr interessante Einstellungsmöglichkeiten machbar. Zum Beispiel kann man bei „Eindeutiges Feld“ ein Feld auswählen, z.B. E-Mail-Adresse und kann die damit auf ein einmaliges absenden einschränken.
Heißt der User kann mit der selben E-Mail-Adresse keine zweite Nachricht mehr versenden.
Ausserdem gibt es noch die Möglichkeit, dass das Formular nur angemeldeten User angezeigt werden darf. Ausserdem kann man die Einsendungen auf eine gewisse Anzahl beschränken. Dies wird anscheinend mit einer versteckten IP kontrolliert.
Jetzt brauchen wir nur noch oben rechts auf „Fertig“ und „Veröffentlichen“ und „X“ klicken und schon hast du dein erstes Formular erstellt.
Dies muss nur noch an deiner Wunschstelle eingefügt werden.
Dafür brauchen wir einen Shortcode, den findest du auf der Ninja Forms Seite unter dem Punkt Shortcode.
Wir brauchen in unserem Fall den zweiten Shortcode [ninja_form id=2], da wir dieses Formular soeben erstellt haben, welches jetzt auf eine eigene Seite eingefügt werden soll.
Gehe jetzt ins Dashboard und klicke links auf „Seiten“. (Du kannst das Formular auch zum Beispiel auf der Startseite anzeigen lassen. In unserem Beispiel wird das Formular auf einer eigens erstellten Seite „Kontakt“ eingebunden.)
Wir haben bereits eine weitere Seite dupliziert und in Kontakt umbenannt, sowie Veröffentlich. (per QuickEdit)
Klicke jetzt auf „Mit Elementor bearbeiten“
Um das Kontaktformular einzubinden, erstellen wir als erstes einen neuen Abschnitt.
Klicke dafür zwischen den beiden Stellen wo das Formular eingebunden werden soll, auf das untere Modul und auf die „sechse Punkte“ und wähle „rote plus“ und wähle den ersten Block.
Nun brauchen wir nur noch ein Element womit wir den Shortcode einfügen und somit das Formular einbinden können.
Klicke oben in dem Bearbeitungsfenster auf die „9 Punkte“ und gebe bei Suche „short“ ein und ziehe dir das Element „Shortcode“ in den eben erstellten Abschnittsbereich.
Füge nun noch links in den Abschnittsbereich deinen Shortcode von deinem Formular ein.
In unserem Fall haben wir rechts bei „Shortcode eingeben“ –> „[ninja_form id=2]“ eingeben, achte auf die eckigen Klammern, dass diese auch mit eingefügt werden.
Im Live Editor siehst du das Formular nicht. Dafür musst du in die Live Vorschau gehen.
Klicke unten auf „speichern“ und dann auf das „Augen“- Symbol um zur Vorschau zu gelangen.
Und fertig ist dein Formular. Dies kannst du natürlich ganz nach deinen Geschmack einbinden.
Das Design vom Formular kannst du wie folgt ändern:
Gehe dafür auf deine Kontaktseite -> klicke oben in der schwarzen Leiste auf „Mit Elementor bearbeiten“
Jetzt klicke auf die „3 Striche“ oben links im Bearbeitungsfenster.
Gehe dann auf „Theme-Stil“.
Und nun auf „Formularfelder“.
Hier kannst du jetzt alle Einstellungen ändern und direkt Live verfolgen wie sich das auf dein Kontaktformular auswirkt.
unter „Button“ kannst du die Einstellungen ändern.
Und fertig ist das Kontaktformular.
Vorher vs. Nachher
Wie du siehst, hast du mit diesem genialen Formular eine Menge Einstellmöglichkeiten.
Live Support
- Erreichbar: von 8:00 - 18:00 Uhr
- Durchschnittliche Antwortzeit: 13 Minuten