Contact Forms

Grundfunktionen in der Übersicht

• beliebig viele frei definierbare Formulare im Shop
• Konfiguration passender Mailtemplates
• AJAX-Funktionalität
• einfacher Klick-Generator oder Erstellung von Hand für Fortgeschrittene
• Einbindung über PHP-Query oder als Smarty Templatevariable

Einsatzmöglichkeiten

• Retouren
• Feedback
• Produktfragen
• Kontakt

Installation

Contact Forms ist wie jedes Plugin für den JTL Shop schnell und einfach zu installieren, lies hierzu bitte unseren Post zur Installation von JTL Shop Plugins.

Der Tab Einstellungen

• CSS Selektor und PHP Query Funktion - Wie bei vielen unserer Plugins können auch die Inhalte der Contact-Forms mit CSS Selektoren und PHP-Query leicht positioniert werden. Wie das genau geht erfährst Du hier.
• In den Plugineinstellungen kannst Du angeben, ob PHP-Query und/oder Smarty-Variablen verwendet werden sollen.
• Sind Smarty-Variablen aktiv, kannst Du das entsprechende Formular im Template über die Smarty-Variable, die in der Formularliste angegeben ist, nutzen.
• In der Pluginverwaltung kannst Du über den Button in der Spalte "Sprachvariablen" die Ausgabe im Frontend anpassen, falls Du mehrere Sprachen verwenden solltest.

Formularerstellung

Im Reiter "Formular" kannst Du neue Formulare erstellen.

Dazu kannst Du beliebigen HTML-Code in das Feld "HTML Content" eingeben und zur Erstellung der Formularfelder die Plugin-Syntax verwenden, die im Folgenden und auch im Hilfe-Tab des Plugins näher erläutert wird.

Alternativ kannst Du oben den Generator für Formularfelder nutzen. Wähle dazu einfach aus, welche Art von Eingabefeld erstellt werden soll, fülle die nötigen Felder aus und klick auf den Button "generieren". Der Code wird dann automatisch für Dich in die "HTML Code"-Box geschrieben.

Unter "Empfänger" lassen sich beliebig viele Empfänger-Adressen, an die das Formular geschickt werden soll, mit Komma getrennt angeben. Der "Titel" ist der Betreff der Email.

Die Felder "Absender-Email" und "Absender-Name" können genutzt werden, um einen fest definierten Absender zu konfigurieren. Werden sie freigelassen, nutzt das Plugin automatisch die erste Adresse des "Empfänger"-Felds.

Wird der Haken bei "Adresse in Email-Input als Reply-To verwenden?" gesetzt, so wird der Inhalt eines eventuell definierten Pflicht-Emailfeldes im Formular als ReplyTo-Adresse gesetzt.

Beim Klick auf den "Anworten"-Buttons deines Mailprogrammes sollte also direkt die dort angegebenen Email-Adresse genutzt werden.

Möchtest Du PHP-Query verwenden um das Formular per Platzhalter in die HTML Struktur Deines Shops zu schreiben, dann gib einen Selektor ein. Mit der Auswahl unter "PHP-Query Funktion" stehen Dir 5 Methoden zur Verfügung, um den Inhalt des Formulars in Dein Template einzubringen. Der Selektor zeigt an, auf welchem Element diese Funktionen ausgeführt werden soll. Ein Beispiel: Gegeben sei folgendes HTML Element:

<div id="kk_contact_forms_placeholder"></div>

Hier würdst Du als Selektor #kk_contact_forms_placeholder angeben. Durch die Option "replaceWith()" ersetzt Du obiges Element mit dem Formular, "append()" hängt es als letztes Kindelement an. Mehr zu PHP Query Manipulatoren findest Du hier.

Solltst Du ein versierter Nutzer mit Programmierkenntnissen sein, möchtest Du evtl. auf PHP-Query verzichten und die Formulare selbst integrieren. Dir stehen dann jeweils Smarty-Variablen zur Verfügung, die eine entsprechende Einbindung ermöglichen.

Element-Referenz für fortgeschrittene Anwender

Erlaubte Feld-Typen:

[text], [email], [textarea], [challenge], [var], [submit], [checkbox], [captcha], [upload], [select], [radio], [date], [ssl]

Ein Stern nach dem Typen bedeutet, dass dieses Feld eine Plichtangabe ist.

Eigenschaften mit Leerzeichen müssen in Anführungszeichen stehen (z.B. [text id="foo" placeholder="Ich bin ein Placeholder"], ohne Leerzeichen können die Anführungszeichen entfallen (z.B. [submit caption=Absenden]).

• Eigenschaften für date

  • name="Name für Element" (muss angegeben werden!)
  • class="meine zusaetzlichen klassen" (optionale zusätzliche Klassen für das Feld)
  • label="Mein Label" (Beschreibung des Eingabefeldes)

• Eigenschaften für textarea

  • name="Name für Element" (muss angegeben werden!)
  • class="meine zusaetzlichen klassen" (optionale zusätzliche Klassen für das Feld)
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • id="ID des Elements" placeholder="Placeholder Text"
  • placeholder="Placeholder Text"

• Eigenschaften für text

  • name="Name für Element" (muss angegeben werden!)
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • class="meine zusaetzlichen klassen" (optionale zusätzliche Klassen für das Feld)
  • id="ID des Elements"
  • placeholder="Placeholder Text"
  • value="Wert" (Vorgegebener Wert, auch als Smarty-Variable per @$variable@ möglich)

• Eigenschaften für email (Achtung: max. ein Email-Feld pro Formular!)

  • name="Name für Element" (muss angegeben werden!)
  • id="ID des Elements"
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • class="meine zusaetzlichen klassen" (optionale zusätzliche Klassen für das Feld)
  • placeholder="Placeholder Text"
  • copy=1 (Sendet eine Kopie der Anfrage an die eingegebene Email-Adresse)

• Eigenschaften für Submit-Buttons

  • caption="Absenden" (Beschriftung des Buttons)
  • class="meine zusaetzlichen klassen" (optionale zusätzliche Klassen für das Feld)
  • id="ID des Elements"

• Eigenschaften für Challenge

  • name="Name des Elements" (muss angegeben werden!)
  • id="ID des Elements" solution="Ergebnis"
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • solution="Ergebnis"

• Eigenschaften für Var

  • name="Name"
  • id="ID des Elements"
  • value="$wert" der Smarty Variablen" (muss angegeben werden!) Dies kannst Du z.B. nutzen, um auf der Artikelseite die URL des Artikels ins Formular zu übernehmen. Der entsprechende Wert wäre dann $Artikel->cURL.

Ersetze dabei ggf. bitte eckige durch runde Klammern - z.B. $Brotnavi(0)->name.

• Eigenschaften für Captcha

  • name="Name des Elements" (muss angegeben werden!)
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • id="ID des Elements"
  • type=1 (Wert 1-3, entspricht JTL-Sicherheitsstufe)
  • placeholder="Placeholder Text"

• Eigenschaften für Upload

  • name="Name des Elements" (muss angegeben werden!)
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • id="ID des Elements"
  • maxsize=200 (Größe in KB, 100 ist Standard)
  • multiple=false (um mehrere Dateien pro Upload-Feld zu verhindern)
  • extensions="pdf, xml, doc" (beliebige Dateiendungen mit Komma getrennt, ("jpg, jpeg, gif, bmp, png"" ist Default)

• Eigenschaften für Checkbox

  • name="Name des Elements" (muss angegeben werden!)
  • label="Mein Label" (Beschreibung des Eingabefeldes
  • class="meine zusaetzlichen klassen" (optionale zusätzliche Klassen für das Feld)
  • id="ID des Elements"
  • checked=1 (setzt standardmäßig den Haken)
  • multiple=1 (erlaubt Mehrfachmarkierung, standardmäßig deaktiviert)
  • options=Option1:wert1,Option2:wert2,Options3:wert3 (die einzelnen Buttons mit Schema [Beschriftung]:[Wert des Buttons], alternativ auch nur [Beschriftung1], [Beschriftung2]...)

• Eigenschaften für Select

  • name="Name des Elements" (muss angegeben werden!)
  • options=Option1,Option2,Options3 (die einzelnen Auswahloptionen) multiple=1 (erlaubt Mehrfachmarkierung) id="ID des Elements"

• Eigenschaften für Radio

  • name="Name des Elements" (muss angegeben werden!)
  • label="Mein Label" (Beschreibung des Eingabefeldes)
  • options="Name:value1,Name 2:value2:,Name 3:value3:checked (die einzelnen Buttons mit Schema [Beschriftung]:[Wert des Buttons]:ausgewählt (letzter Punkt optional))
  • break=true (fügt einen Umbruch nach jedem Button ein)

• Eigenschaften für SSL Füge den SSL-Tag an einer beliebigen Stelle in Dein Formular ein, um das Formular via https zu versenden.

Beachte bitte Folgendes: Das Formular muss sich dann auch auf einer SSL-geschützen Seite befinden. Du kannst nicht z.B. ein Formular von http://www.meine-seite.de/kontakt per SSL schützen, sondern musst es mit https://www.meine-seite.de/kontakt aufrufen.

Email-Template

Du kannst nach Aktivieren der Option "Eigenes Mailtemplate verwenden" in der darunterliegenden Eingabemaske ein eigenes Template für jedes Formular definieren. Dabei kannst Du beliebiges HTML verwenden.

Um auf Formularwerte zuzugreifen, füge Tags wie [namedeselements] ein.

Hast Du z.B. im Formular ein Feld [textarea* name="mein-textfeld" label="Irgendwas eingeben"] erstellt, so gib im Mailtemplate einfach [mein-textfeld] ein und der Inhalt wird in der Email automatisch eingefügt.

Zusätzlich hast Du die Möglichkeit, nicht ausgefüllte Variablen in der Mail auch nicht anzuzeigen. Füge hierzu Deinen Text zwischen {{feldname}} und {{/feldname}}.

Beispiel: Du hast in Deinem Formular-Template den folgenden Code:

[textarea name="meintext1"] [textarea name="meintext2"][submit]

Dann kannst Du in Dein Mail-Template scheiben:

{{meintext1}}Das Textfeld hat den Wert [meintext1]{{/meintext1}} und Textfeld2 hat den Wert [meintext2].

Wird das Textfeld Nr. 1 vor Absenden des Formulars dann nicht ausgefüllt, wird der betreffende Text auch nicht in der Email angezeigt. "und Textfeld2 hat den Wert" würde trotzdem angezeigt werden.

Eigene Callbacks

Mit etwas Erfahrung in Sachen jQuery/JavaScript kannst Du eigene Callbacks definieren, die nach dem Absenden eines Formulars ausgeführt werden. Dies kann z.B. nützlich für Analytics-Code sein.

Hier ein kleines Beispiel:

if (typeof(kkContactForms) !== 'undefined') {
    kkContactForms.success (function (res, request) {
        if (request && request['kk-contact-form'] && request['kk-contact-form'] == "2") {
            if (res.status && res.status.toLowerCase() == "ok") {
                foo();
                bar();
                //tell cf to _NOT_ handle success messages by it's own
                return true;
            } else {
               console.log('Hoppla.. Ein Fehler...');
            }
        }
    });
}