Dieses Plugin wird in Zusammenarbeit von und mit Felix Moche entwickelt und vertrieben.
Weitere Infos auch hier: Plugins von >>Felix Moche
INHALTSVERZEICHNIS
Features
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
- etc.
Dokumentation
Inhalt
- Formularerstellung
- Element-Referenz für fortgeschrittene Anwender
- Email-Template
- Eigene Callbacks
- Einstellungen
Formularerstellung
Im Reiter "Formulare" 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 klicke auf den Button "Code generieren". Der Code wird dann automatisch für Dich in die "HTML Content"-Box geschrieben.
- Das Feld "Name" muss den Namen des Formulars enthalten. Dieser wird im Shop nicht angezeigt ist aber wichtig um das Formular später bei Bedarf im Quelltext ansprechen zu können.
- Danach kannst du unter "Beschriftung" die tatsächliche Beschriftung des Eingabefeldes, welche dann im Shop zu sehen sein wird, festlegen.
- "ID" und "Klasse" haben ähnliche Funktionen zu Name, diese kannst du auch hier nachlesen.
- Ins Feld "Text" kannst du eintragen was ins Eingabefeld voreingetragen sein soll, falls benötigt.
Es ist wichtig, dass sich alle von dir erstellten Eingabefelder im selben Formular befinden! Die Reihenfolge der Felder kannst du im Nachhinein jederzeit im HTML-Content-Block ändern.
Das Ende eines Eingabefeldes ist hier immer an der Zeichenfolge "<br />" zu erkennen. Um die Reihenfolge zu ändern kannst du einfach den entsprechenden Abschnitt aus dem Code ausschneiden (inklusive "<br />") und an der gewünschten stelle wieder einfügen. (Tipp: Anhand von name="..." kannst du die Eingabefelder im Code unterscheiden.)
In das Feld "PHP-Query-Selektor" muss ein Selektor eingetragen werden, welcher ein Element bestimmt, in dessen Abhängigkeit das Formular im Shop auftauchen wird.
Ein in diesem Fall oft nützlicher Selektor ist [data-page="..."] #content. "data-page" ist ein Attribut des "body" Objekts, dessen Wert von der jeweiligen Seite abhängig ist. Zu beachten ist hierbei, dass der Wert "31" für alle selbst erstellten Seiten zutrifft.
Im Feld "PHP-Query Funktion" kann nun ausgewählt werden, wie das Formular im Bezug auf das zuvor per Selektor ausgewählte Element platziert werden soll. Da für gibt es mehrere Möglichkeiten:
- append: Das Formular wird als letztes Kindelement des Elements plaziert
- prepend: Das Formular wird als erstes Kindelement des Elements plaziert
- after: Das Formular wird nach dem Element plaziert
- before: Das Formular wird vor dem Element plaziert
- replaceWith: Das Formular ersetzt das Element und wird an dessen stelle plaziert
Solltest 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.
Unter "Empfänger" lassen sich beliebig viele Empfänger-Adressen, an die das Formular geschickt werden soll, mit Komma getrennt angeben.
Danach kann der Betreff der Mail vordefiniert werden.
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.
Detaillierte Informationen zum Punkt "Eigenes Mailtemplate verwenden" findest du hier.
Anzeigen eines Formulars im Shop
Die einfachste Möglichkeit um ein Formular auf eigenen Seiten im Shop anzuzeigen, ist der Weg über PHP-Query.
Hierzu die gewünschte Seite im Backend bearbeiten (Adminbereich - Inhalte - Eigene Seiten) und im Quellcode-Modus ein DIV-Element einfügen. Beispielsweise:
<div id="mein-formular">Platzhalter</div>
In den Formular-Einstellungen kann anschließend der PHP-Query-Selektor "#mein-formular" und die Funktion "replace" ausgewählt werden. Dadurch wird auf dieser eigenen Seite dann das Element durch den Inhalt des Formulars ersetzt.
Die performantere Variante ist die Verwendung von Smarty-Variablen. Hierzu ist allerdings eine Modifikation des Templates nötig.
In der Formularübersicht stehen in der Spalte "Smarty-Variable" jeweils die Namen der Variablen, die die einzelnen Formulare beinhalten.
Im Template selbst können diese an beliebiger Stelle wie jede andere Smarty-Variable ausgegeben werden. Soll beispielsweise ein Formular auf jeder Seite im Footer angezeigt werden, so kann in der layout/footer.tpl des Templates an geeigneter Stelle die Zeile
{$fm_contact_form1}eingefügt werden.
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 Pflichtangabe 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(ContactForms) !== 'undefined') {
ContactForms.success (function (res, request) {
if (request && request['fm-contact-form'] && request['fm-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...');
}
}
});
}Einstellungen
- 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.
Hinweise
- Achte darauf, dass das Attribut "name" in Formularfeldern keine Leerzeichen, Umlaute oder sonstige Sonderzeichen enthält - das ist in HTML nicht zulässig und erzeugt anschließend Probleme. Dieses Feld wird aber auch nur intern verwendet und wird nicht im Frontend angezeigt.
- Office 365 erlaubt i.A. keine abweichende Absenderadressen. Wenn du Office 365 nutzt und in deinen globalen Email-Einstellungen als "SMTP-Benutzername" z.B. "ich@example.com" konfiguriert hast, kannst du leider nicht in einem Formular "jemandanders@example.com" als Absender-Email konfigurieren.
- Pass auf, dass du dein Formular nicht innerhalb eines bestehenden Formulars einfügst. Verschachtelte Formulare sind in HTML nicht zulässig, daher entstehen unvorhersebare Nebeneffekte.
Tags: