ZR Contact Forms Dokumentation

JTL Shop Backend – JTL E-Mail Template aktivieren

Bevor Sie beginnen, ein Formular zu erstellen, können Sie das von uns registrierte E-Mail Template aktivieren, um den internen Versandmechanismus des JTL Shops für E-Mails zu verwenden und die E-Mails gleich aussehen zu lassen, wie alle weiteren E-Mails, die über den Shop versendet werden. Selbstverständlich können Sie die E-Mail Vorlage auch weiter anpassen.

Sie finden die E-Mail unter Administration -> E-Mail -> Vorlagen. Wenn Sie nun ganz nach unten scrollen, finden Sie im Abschnitt „Plugin-Vorlagen “ unsere Vorlage „Kontaktformular-Anfrage-Email„. Bearbeiten Sie diese und stellen Sie das Feld „E-Mail versenden“ auf ja.

Contact Forms Übersicht | erstes Formular erstellen

Sobald Sie im JTL Shop Backend unser Plugin öffnen, finden Sie die Übersicht der bereits erstellten Formulare. Wenn Sie das Plugin gerade erst installiert haben und noch kein Kontaktformular erstellt haben, können Sie hier nun ihr erstes erstellen. Klicken Sie hierfür auf den Button „Neues Formular erstellen“, vergeben Sie noch einen sinnvollen Namen, wie bspw. „Umfrage zur Kundenzufriedenheit“.
Bereits erstellte Formulare können Sie mit dem Button „bearbeiten“ editieren.

Formular bearbeiten – Felder und Formular-Schritte hinzufügen

In der Bearbeitungsansicht des Formulars können Sie nun beliebig viele Felder zu dem Formular bzw. zu einem Schritt innerhalb des Formulars hinzufügen. Wenn Sie planen, ein mehrstufiges Formular zu erstellen, können Sie jedem Schritt einen Titel und eine Beschreibung hinzufügen, die angezeigt werden, sobald mehr als ein Schritt im Formular angelegt ist.
Mehrstufige Formulare werden hier genauer erklärt.

Eingabefelder zum Formular hinzufügen

Mit Klick auf die Schaltfläche „Neues Feld hinzufügen“ fügen Sie ein neues Formularfeld hinzu.

Feldbezeichnung:
Im Feld „Feldbezeichnung“ können Sie eine Beschreibung für das Feld eingeben, das dem Kunden im Frontend angezeigt wird.

Feldname (technisch)
Das Feld „Feldname (technisch)“ dient dazu, Felder zu identifizieren und spielt für die Ausgabe im Frontend keine Rolle.

Feldtyp
Hier stehen Ihnen verschiedene Eingabetypen zur Verfügung:

• Text: Einfaches Texteingabefeld, für kürzere Texte, bspw. Name
• E-Mail: Für E-Mail-Adressen vordefiniertes Eingabefeld
• Telefon: Für Telefonnummern vordefiniertes Eingabefeld
• Zahl: Eingabefeld für Zahlen, bspw. Postleitzahl
• URL: Für URLs vordefiniertes Eingabefeld
• Textbereich: Großes Texteingabefeld für länge Texte, bspw. Nachrichten
• Dropdown: Feld zur Auswahl aus vorgegebenen Werten
• Checkbox: Kästchen zur Auswahl mehrerer vorgegebener Werte
• Radio Buttons: Kästchen zur Auswahl eines Wertes aus mehreren Vorgaben
• Datei Upload: Feld zum Anhängen von Dateien
• Sterne Bewertung: Auswahl einer Anzahl von Sternen (Maximalanzahl definierbar)
• Zustimmung / Bestätigung: Checkbox zur Bestätigung vor dem Absenden des Formulars, ermöglicht auch HTML Eingabe, bspw. für Datenschutzakzeptanz

Je nach ausgewähltem Feldtyp haben Sie noch verschiedene zusätzliche Optionen, die Sie angeben können, wie die verfügbaren Optionen bei Dropdown / Checkbox / Radio Buttons oder die maximale Dateigröße bei Uploads.

Platzhaltertext
Hier können Sie für Felder, wie  Text, Textbereich, E-Mail usw., Platzhalter eintragen, die Kunden als Orientierung nutzen können.

Breite
Hier können Sie die Breite des Feldes innerhalb des Formulars einstellen. Die hier verfügbaren Breiten gelten für Laptop- und Desktopauflösungen. Für mobile Auflösungen werden die Felder entsprechend auf 100% Breite dargestellt.

Bestätigen Sie alle Änderungen, die Sie Während der Bearbeitung des FAQ machen mit dem Button „Alle Änderungen speichern“. 

Mehrstufiges Formular erstellen

Zur Erstellung eines mehrstufigen Formulars für Ihren JTL Shop gehen Sie vor, wie im vorherigen Abschnitt beschrieben und erstellen beliebig viele Schritte mit der Schaltfläche „Schritt hinzufügen“. Klicken Sie auf den jeweiligen erstellten Schritt und vergeben Sie, wenn Sie möchten, einen Titel und eine Beschreibung, sodass Ihre Kunden wissen, was Sie in diesem Schritt von Ihnen erfahren möchten. Anschließend fügen Sie die in dem jeweiligen Schritt benötigten Eingabefelder hinzu, bis Sie alle geplanten Schritte befüllt haben.

Optionen zur Navigation durch das mehrstufige Formular

Im Reiter „Styling“ der Bearbeitungsansicht des Formulars finden Sie Optionen, um die Navigation des mehrstufigen Formulars anzupassen. Wir haben dafür vier vordefinierte Stile bereitgestellt, aus denen Sie wählen können. Das Farbschema des gewählten Navigationsstils können Sie ebenfalls an Ihre im Shop verwendeten Farben anpassen. Außerdem finden Sie hier die Beschriftungen für die Navigationsbuttons, „weiter“ und „zurück“, die Sie nach Belieben ändern können.

Anzeigelogik für Formularfelder einstellen

Unter dem Reiter „Anzeigelogik“ können Sie komplexe Logiken zur Anzeige von Formularfeldern erzeugen.
Aktivieren Sie hierfür zunächst die Checkbox „Bedingte Logik aktivieren“. Klicken Sie nun auf die Schaltfläche „Neue Gruppe“, um eine Anzeigegruppe hinzuzufügen und deren Anzeigebedingungen einzustellen. Zur besseren Übersicht für Sie, können Sie die Gruppe benennen. Wählen Sie anschließend die Eingabefelder des Formulars aus, zu deren Anzeige Sie eine Bedingung einstellen wollen. Anschließend wählen Sie aus, ob die ausgewählten Felder angezeigt oder ausgeblendet werden sollen und stellen dann die Bedingungen ein. Wählen Sie hierzu als erstes das gewünschte Feld aus und bestimmen Sie einen passenden Operator:

• ist gleich: prüft auf genaue Eingaben, z.B. für Checkboxen
• ist ungleich: prüft auf genaue Eingaben, z.B. für Checkboxen
• enthält: prüft, ob ein Text enthalten ist
• enthält nicht: prüft, ob ein Text nicht enthalten ist
• ist leer: prüft, ob ein Feld nicht gefüllt ist
• ist nicht leer: prüft, ob ein Feld gefüllt ist
• ist größer als: prüft, ob numerisch größer
• ist kleiner als: prüft, ob numerisch kleiner

Nach Wählen eines geeigneten Operators geben Sie den Referenzwert ein. Beispielsweise den Text einer Checkbox in dem gewählten Formularfeld oder ein numerischer Wert bei Zahlenfeldern. Wenn es mehr als eine Bedingung für die Anzeigegruppe geben soll, fügen Sie mit der Schaltfläche „Bedingung hinzufügen“ weitere Bedingungen hinzu und bestimmen Sie bei „Verknüpfung“, ob eine dieser Bedingungen erfüllt sein muss oder alle Bedingungen.

Bestätigen Sie die Änderungen anschließend mit „Alle Einstellungen speichern“