Das Contact Forms Drop ermglicht es dir, beliebig viele und beliebig komplexe Formulare in deinen Shop einzufgen und via Email zu versenden. Steuere den Versand von Emails direkt aus deinen Formularen und erstelle eigene Email-Templates. Auch das Validieren von bestimmten Inputfeldern nimmt dir das Contact Forms Drop ab.
Gemacht fr DropperUm das Contact Form Drop nutzen zu knnen, bentigst du Dropper
Dropper ist das Herz eines jeden Drops und wird bentigt, um diese zentral zu verwalten und auszufhren. Anders als bei normalen Plugins, bietet Dropper dir viele weitere Vorteile und revolutioniert die Art und Weise, wie du Inhalte in deinen Shop einpflegst.
Das Contact Form Drop ermglicht es dir, beliebig viele und beliebig komplexe Formulare in deinen Shop einzufgen, deren Nutzereingaben via Mail zu versenden oder sogar ber Hooks programmatisch zu verarbeiten. Wie das funktioniert erfhrst du hier.
Formular
Das zentrale Element eines Contact Form Drops ist das Formular selbst. Es setzt sich aus beliebig vielen Formularfeldern zusammen, die du in einem Grid bequem anordnen und konfigurieren kannst.
Experten Modus?
ber der Grid Konfiguration findest du eine Option zum
Experten-Modus
. In diesem Modus verzichtest du auf das Grid und kannst dein Formular via (HTML-) Code erstellen.
Dieser Modus ist in neuen Contact Forms Drops standardmig deaktiviert, bei einem Update deiner lterer Contact Form Drops jedoch aktiviert. Lies darber mehr im Appendix weiter unten!
Formularfelder - Konfiguration im Grid
Deine
Formularfelder
erstellst du in einem
Grid Control
, das du vielleicht schon aus dem Flex Layout Drop kennst. Damit kannst du deine Inhalte (in diesem Fall die Elemente deines Formulars) bequem anordnen und spezielle Layouts fr Endgerte erstellen.
Auf die vielen Mglichkeiten des Grids selbst gehen wir an dieser Stelle nicht ein, sondern verweisen auf die Dokumentation in unserem Wiki.
Typen von Formularfeldern
Das Contact Form Drop untersttzt alle blichen Input Elemente eines HTML Formulars. Zustzlich kannst du in deinen Formularen freie HTML Inhalte, andere Drops, Bereiche fr Statusmeldungen und shopeigene Captchas einfgen! Alle mglichen Feldtypen findest du hinter der Option
Typ des Feldes
.
In den folgenden Abschnitten gehen wir etwas nher auf die allgemeinen und speziellen Optionen der einzelnen Formularelemente ein.
Allgemeine Feldkonfiguration
Fr jedes Eingabeelement kannst du ein
Label
, eine
Beschreibung
, einen
Platzhalter
und einen
Standardwert
hinterlegen.
Mit der Option
Variable
bestimmst du den internen Parameternamen fr deines Formularfeldes. Diesen Namen bentigst du fr konditionelle Anzeigebedingungen (Reiter Darstellung), die manuelle Mailkonfiguration oder bei der Verwendung von Hooks. Mehr dazu findest du in den entsprechenden Abschnitten weiter unten.
Autocomplete und Standardwerte aus Kundendaten
Wo es mglich ist (bspw. bei Textbox oder Mailadressen) kannst du
Standardwerte
deiner Felder noch cleverer festlegen, nmlich
aus den Daten des angemeldeten Kunden
.
Auch die
Autocomplete Funktion des Browsers
kannst du untersttzen und Semantiken deinem Eingabefeld zuordnen.
Spezielle Feldkonfiguration
Einige Formularfelder bringen Besonderheiten mit sich, auf die wir nachfolgend etwas genauer eingehen wollen.
Textbox
Die Option
Name der Antwortadresse
kann bei einer Textbox verwendet werden, die den Namen des Anfragenden enthlt.
Bei deiner Antwort auf die durch das Formular erzeugte Mail wird dann in E-Mail Clients wie Outlook dieser Name angezeigt.
Mailadresse
Ein Feld vom Typ Mailadresse enthlt meist die Mailadresse des Anfragenden. Du kannst diese als
Antwortadresse
festlegen, um direkt auf die durch das Formular erzeugte Mail antworten zu knnen.
Zustzlich kannst du mit einer Option festlegen, ob eine
Mail an diese Adresse
gesendet werden soll und - wenn ja - wie genau (als Empfnger, Kopie oder Blindkopie).
Wie du diese Mails genau konfigurierst, erfhrst du im Abschnitt Mails weiter unten.
Absenden-Button
Mit dem Absenden Button wird das Formular abgeschickt. Hier kannst du
Stil, Gre und Position
des Buttons festlegen.
Dropdown, Checkbox und Radio
Bei Formularfeldern, die eine Auswahl ermglichen, erscheint der Reiter
Optionen
. Hier kannst du die deine Auswahlmglichkeiten hinterlegen und auch festlegen, ob diese
vorausgewhlt
sein soll.
Eigener Inhalt - HTML und Drops!
Mit Elementen des Typs
Eigener Inhalt
kannst du dein Formular optisch anpassen und eigene HTML-Inhalte (auch mit Smarty) und andere Drops in dein Formular einfgen.
Mehr Informationen zum Verlinken
von Drops findest du im Wiki
!
Weitere Besonderheiten
Bei
Upload
Feldern kannst du die
Erlaubte Dateiendungen
und die
maximale Dateigre
einschrnken.
Das Feld
Benachrichtigungen
gibt Statusnachrichten zum Mailversand aus, zum Beispiel beim erfolgreichen Versand einer Mail oder im Fehlerfall.
Nimmst du kein solches Feld in dein Formular auf, werden die Meldungen unter deinem Formular ausgegeben.
Mit
versteckten
(und auch Mail Header-) Feldern kannst du Name-Wert-Kombinationen mit deinem Formular bermittelt. Dabei bleiben diese Daten fr den Nutzer unsichtbar.
In den
Werten
kannst du Smarty verwenden, um bspw. eine Artikelnummer innerhalb eines Produktanfrageformulars zu bermitteln. Wert wre in diesem Fall
{$Artikel->cArtNr}
.
Im Reiter Darstellung kannst du fr die meisten Formularfelder festlegen, ob das
Label angezeigt
werden soll.
Auerdemm kannst du zustzliche
CSS Klassen
definieren, die im Elternelement deines Formularfeldes gesetzt werden sollen. Fr eine Klasse
meine-css-klasse
wrde der erzeugte Code dann in etwa wie folgt aussehen:
Mit
Konditionelle Anzeigebedingungen
kannst du dein Formularfeld auf Basis von Nutzereingaben ausblenden bzw. deaktivieren. Mit
form.variable
greifst du dabei auf Eingaben deiner Formularfelder zu.
form.email !=== ''
blendet ein Feld oder deaktiviert es, wenn die Variable
email
einen Wert hat. ber die Option
Bedingungsmodus
bestimmst du, ob das Feld komplett ausgeblendet oder deaktiviert werden soll.
Mails
Nach der Eingabe von Formulardaten mssen diese auch irgendwie zu euch gelangen. Im Contact Form Drop wird das in erster Linie via E-Mail erledigt. Am Rande: du kannst Daten auch programmatisch verarbeiten, mehr dazu im Abschnitt "Hooks".
Ab Version 2.0.0 ist es mglich, fr einen Vorgang beliebig viele Mails (mit unterschiedlichen Inhalten und Empfngern!) zu versenden. Beispiel: eine Mail mit allen Daten einer Anfrage an den Supportmitarbeiter und eine kurze (aber aufgehbschte) Besttigungsmail an den anfragenden Kunden.
Versand
Im Reiter Versand konfigurierst du die essenziellen Parameter fr den Versand deiner Mail.
Bitte vergiss nicht
, auch die entsprechenden
JTL-Shop Einstellungen
zum Mailversand vorzunehmen!
Neben dem
Titel der Mail
(bzw. Betreff) legst du hier
Name und Mail-Adresse des Absenders
und die
Empfnger der Mail
(TO, CC und BCC) fest.
Du kannst auch festlegen, dass bestimmte Eingaben des Formulars (Name und Mailadresse des Anfragenden) bernommen werden sollen.
Aktiviere dazu die Option
An Mail-Adressen aus dem Formular senden?
bzw.
Reply-To aus dem Formular nutzen?
und die entsprechenden Optionen in den Formularfeldern (siehe oben).
Mit der
Versandart
legst du fest, ob deine Mail als HTML- oder Textmail versendet werden soll. Auch beides gleichzeitig ist mglich und im Standard gesetzt.
Beachte, dass
HTML-Mails automatisch in Textmails
umgewandelt werden! Du kannst also problemlos HTML fr den Inhalt deiner Mails nutzen (siehe nchste Abschnitte zu Inhalt und Styling).
Inhalt
Hier konfigurierst du den Inhalt deiner Mail. Letzteres nur, wenn du mchtest.
Denn: die Option
Mail-Inhalt automatisch generieren
ist standardmig aktiv, wodurch dir eine einfache Mail mit Name-Wert-Paaren deiner Formularfelder generiert wird.
Manuelle Erstellung von Mailtemplates
Verzichtest du auf die automatische Generierung, musst du den
Mail-Inhalt
manuell erstellen. Im entsprechenden Control kannst du Smarty verwenden.
Nutzt du im Formular die Variablen
name
(Textbox),
email
(Mail-Adresse) und
message
(Textarea), knntest du so im Mail-Inhalt darauf zugreifen:
Name des Anfragenden: {$form.name}
Mail: {$form.email}
Nachricht: {$form.message}
Eine einfache Besttigungsmail an den Kunden knnten wie folgt aussehen.
Header & Footer
Wenn du mchtest, kannst du auch separate
Mail-Header
und
Mail-Footer
fr deine Mails definieren. Das kann dir dabei helfen, einen E-Mails einen einheitlichen Look zu verleihen. Denn: du kannst deine Mails duplizieren und so in neuen Mails deine Header- und Footerinhalte bernehmen.
Im Header und Footer kannst du HTML verwenden und hast Zugriff auf die Formularfelder.
Bitte beachte jedoch
, dass du in den HTML-Controls
nicht
- wie sonst blich -
jedes beliebige andere Drop verlinken
kannst.
Mchtest du Header und Footer auch fr anderen Mails verwenden, nutze
separate Plain Drops
und
verlinke
diese in den Mail-Eingabefeldern.
Anhnge
Im Reiter Anhnge kannst du beliebig viele Anhnge fr deine Mail hinzufgen.
Mit
Dateiname
bestimmst du den Namen der Datei, wie er im Mailanhang erscheinen soll. Mit dem Upload Control bestimmst du die
Datei
selbst.
CSS Styling deiner Mails
Du kannst die Elemente deiner Mails auch via CSS Stylen. Im Control
Mail-Styling (CSS)
kannst du normale CSS Syntax nutzen.
Das Besondere:
das Drop wandelt diese Regeln
automatisch in Inline-Styles um
, da diese von (Web-) Mailclients besser untersttzt werden. Mit obigen Beispiel wrde es in der resultierenden HMTL Mail in etwa wie folgt aussehen:
<div class="mail-title" style="font-weight: bold; font-size: 30px;">
Vielen Dank fr die Anfrage!
</div>
Tipp:
wie beim Header und Footer kannst du auch fr deine CSS-Styles ein separates Plain Drop nutzen und verlinken, um die Regeln auch in anderen Mails zu verwenden.
Testen im Entwicklermodus!
Oft ist es sehr mhsam, Formulare und die daraus erzeugten Mails zu testen und zu debuggen. Deshalb haben wir ab Contact Forms Version 2.0.0 einen umfangreichen Entwicklermodus integriert, der via Option
Entwickler-Modus?
aktiviert wird (Standard: aktiv).
Im Entwicklermodus erhltst du nach dem Absenden des Formulars eine Vorschau deiner Mails in einem Popup. Diese Vorschauen kannst du auch an echte Mailadressen senden, um bspw. den Look deiner Mails in bestimmten Mailclients zu testen.
Hooks
Manchmal reichen einfache Mails nicht aus, um (Massen-) Daten aus Formularen auszuwerten.
Oder man mchte bestimmte Formulardaten vor dem Versand genauer validieren.
In solchen Fllen knnen dir
Hooks
weiterhelfen.
Hooks knnen
client- (JavaScript) und serverseitig (PHP)
bei bestimmten
Events
ausgefhrt werden, bspw. vor der Formularvalidierung oder nach dem (erfolgreichen oder missglckten) Absenden von Formularmails.
JavaScript Hook Beispiel
Mit nachfolgendem Code kannst du bspw. weitere Infos ber einen missglckten Mailversand in die Console des Browsers loggen.
function(params, next) {
console.log('SEND MAIL FAILED, form params:', params);
return next(params);
}
PHP Hook Beispiel
Mit PHP Hooks kannst du Daten serverseitig verarbeiten. Ein Beispiel wre, die Ergebnisse einer Umfrage in einer eigens dafr angelegten Datenbanktabelle der JTL-Shop Datenbank abzulegen.
Je nach gewhltem Hook hat
$params
unterschiedliche Inhalte. Um dir im Debug-Modus des Formulars den Inhalt und Aufbau von
$params
anzusehen, nimm einfach folgende Funktion und sende das Formular anschliessend ab:
Das Contact Form Drop verfgt ber einige
Sprachvariablen
. Mit diesen kannst du bspw. die Fehlerausgaben und Statusmeldungen beim Mailversand anpassen.
Beachte
, dass Formularfelder teilweise auch durch den Browser validiert werden und dadurch Statusmeldungen erzeugt werden, auf die du keinen Einfluss hast.
Ein Beispiel ist die Emailadresse, der Chrome Browser moniert hier bspw. ein fehlendes
@
im Feld noch bevor das Formular vom Drop bearbeitet wird:
Konfiguration
In der erweiterten Konfiguration des Drops kannst du eine (fr diese Contact Form Drop Instanz) individuelle
Erfolgsnachricht
festlegen.
Mit der
ID
kannst du dem Formular das Attribut
id
zuweisen. In Versionen kleiner als 2.0.0 war dies dringend erforderlich, um via JavaScript mit dem Formular zu interagieren (siehe Appendix).
Die von anderen Drops bekannten
CSS Klasse(n)
findest du auch im Contact Form Drop. Nutze sie, um dem ersten
<div>
Element deines Formulars zustzlich Klassen im
class
Attribut zuzuweisen.
Appendix
Infos zum Update auf 2.0.0
Das Update auf Version 2.0.0 bringt zahlreiche neue Funktionen und damit auch Vereinfachungen.
Wo in lteren Versionen viel manuelle (Code-) Arbeit notwendig war, sorgen nun besseren Controls und Automatismen fr mehr Nutzerfreundlichkeit.
Leider lassen sich dadurch aber bspw.
ltere (HTML-)Formulare nicht automatisch in das neue Grid System
berfhren, sondern schalten sich nach einem Update in den Experten-Modus.
Auch die automatisch erzeugten Mail-Inhalte (siehe Abschnitt "Mails") sind nur fr neu erstellte Mails Standard. Bei einem Update lterer Drops werden natrlich die vorher erstellten Mailtemplates bernommen.
Prft bitte in jedem Fall
nach einem Update auf die Version 2.0.0 alle Formulare und meldet euch bei uns, falls es hier Probleme geben sollte.
Formular Implementation im Expertenmodus
Im Expertenmodus erstellst du Formulare mit HTML Elementen. Vor Version 2.0.0 war dies die einzige Mglichkeit, Formulare zu erstellen.
Bei einem Update von Version <= 2.0.0 werden deine bestehenden Formulare in diesem Expertenmodus gesetzt. Ab Version 2.0.0 solltest du diese Variante bei neuen Formularen nur noch nutzen, wenn du genau weit, was du tust.
Mehr zu den Mglichkeiten von HTML Formularen
erfhrst du hier
.
Input-Attribute
Du kannst deine Inputs mit bestimmten Attributen versehen:
submit: Markiere ein Element mit diesem Attribut, wenn du mchtest, dass bei einem Klick auf das Element das Formular versendet wird.
email: Definiert, dass dieses Feld eine Mail-Adresse enthlt, an die das Formular gesendet wird.
copy: Funktioniert nur in Verbindung mit email und sendet diese Nachricht dann an den Empfnger via CC.
blind-copy: Funktioniert nur in Verbindung mit email und sendet diese Nachricht dann an den Empfnger via BCC.
reply-to: Gibt an, dass diese Mail-Adresse als Reply-To Adresse gesetzt wird.
reply-to-name: Gibt an, dass dieser Wert als Reply-To Namen gesetzt wird.
required: Prft vor dem Versand, ob das Feld ausgefllt wurde.
validate="email|url|number": Validiert das Feld vorab auf einen bestimmten Eingabetypen. Nicht ntig bei Feldern die bereits das email Attribut haben.
no-reset: Unterdrckt den automatischen Reset auf dem angegebenen Feld.
no-mail-display: Stellt die Ausgabe dieses Feldes nicht in der automatischen Mail dar.
header: Weist den Wert des Feldes einem Header-Flag zu. Das Flag selbst ergibt sich aus dem name Attribut.
messages: Weist das angegebene Element als Container fr Nachrichten aus. Falls kein Element angegeben wird, werden Nachrichten automatisch unter dem Formular angezeigt.
class: Die hier angegebenen Klassen stylen den Upload-Button
size-limit: Maximal erlaube Dateigre in KB. Bei fehlender Angabe sind 2MB voreingestellt. Wert 0 setzen um alle Gren zu erlauben.
extensions: Liste von Dateitypen, welche beim Upload erlaubt sind. Falls nicht angegeben sind alle Dateitypen erlaubt.
multiple: Ist dieses Attribut gesetzt, knnen mehrere Dateien hochgeladen werden
Ebenfalls werden die Attribute
required
und
no-reset
auch hier untersttzt.
JavaScript Events
Beachte
, dass dieser Teil der Dokumentation noch aus Version < 2.0.0 stammt. Es ist zwar auch in neueren Versionen noch valide, aber mittlerweile kannst du mit Hook Elementen eleganter client- und serverseitige Funktionen mit deinem Formular verknpfen.
Du hast die Mglichkeit via JavaScript auf verschiedene Events deines Formulars zuzugreifen:
beforeValidate: Formulardaten vor der Validierung
validate: Formulardaten whrend der Validierung - Du kannst hier eigene Fehler hinzufgen
beforeSend: Formulardaten kurz vor dem Absenden des Formulars - Praktisch um die Daten zu erweitern.
success: Formular nach erfolgreichem Mail-Versand
error: Formular nach fehlerhaftem Versand oder sonstigen Fehlern. Betrifft keine Validierungsfehler!
Um auf bestimmte Events deines Formulars zu reagieren, gib ihm zunchst eine ID. Mit Hilfe dieser ID kannst du jetzt Folgendes tun:
$(function() {
if (!window.KK_ContactFormDrop) return;
KK_ContactFormDrop.on('meine_id', 'validate', function(params, next) {
// mache etwas mit params
console.log(params.test.value); // gibt den Wert des Parameters aus
params.test.errors.push('Haha, hier ist immer ein Fehler!');
// Der Call von next(params) muss zur Fortfhrung der Kette sein.
next(params);
});
}
Solltest du einem Parameter einen Fehler hinzufgen wird das Formular nicht mehr gesendet, sondern der Fehler ausgegeben.
Beispiel in der Dropper-Zone
Ein nachvollziehbares Beispiel-Formular mit diversen Eingabeelementen und Mailtemplate findest du brigens
in der Dropper-Zone
.
Changelog
2.0.1 - 07.10.2020
Bugfix: Verbesserte Mailausgabe bei Text-Mails mit verlinkten Drops.
2.0.0 - 14.09.2020
Komplette berarbeitung des Drops mit zahlreichen neuen Features und Bugfixes, u.a.:
Feature: Grid Control zur primren Gestaltung der Formularelemente & somit bessere responsive Steuerung
Feature: Mail Inhalte werden auf Wunsch automatisch erstellt
Feature: Autocomplete Semantiken & Standard Kundenfelder knnen fr jedes Formularelement definiert werden
Feature: mehrere Mails knnen konfiguriert und an verschiedene Empfnger versendet werden
Feature: Standard Anhnge fr Formular-Mails
Feature: umfassender Entwicklermodus zum Testen von Formularen und Mails
Feature: einfache Konfiguration von Javascript & PHP Hooks
1.0.9 - 02.07.2018
Tech: Nutzt die IO-Schnittstelle von Dropper, um Formulare zuverlssiger zu versenden
1.0.8 - 26.06.2018
Bugfix: JTL-Shop Einstellung zur SMTP Security (SSL, TLS) wird nun korrekt verwendet
1.0.7 - 16.05.2018
Bugfix: Behebt einen Schreibfehler im Quellcode der Version 1.0.6, welcher deren Bugfix nutzlos machte
1.0.6 - 09.05.2018
Bugfix: TLS Prfung obwohl diese in den Shopeinstellungen deaktiviert war. Konnte zu Verbindungsproblemen mit falsch konfigurierten Mail-Servern fhren.
1.0.5 - 05.12.2016
Nicht angehakte Checkboxen wurde als Parameter ignoriert
1.0.4 - 03.03.2016
Nutzt DropperFramework Ajax um potentiellen Fehler im Shop 4 zu vermeiden
1.0.3 - 13.02.2016
Unterstzung von Dateianhngen
Kleinere Bugfixes
1.0.2 - 12.11.2015
Verbesserte Shop 4 Kompatibilitt
1.0.1 - 11.11.2015
Fehler im Zusammenhang mit JTL-Shop 4 behoben
SupportHilfe zum Contact Form Drop
Handbuch
Lese die Contact Form Dokumentation, um eine Einfhrung zu bekommen.
Q&A Forum
Du hast technische Fragen zu dem Plugin? Stelle Sie hier der ffentlichkeit.
Support Ticket
Du hast Fragen, die das Q&A Forum nicht klren konnte? Nutze unser Ticket-Sytem.
Contact Form SupportticketDu hast Fragen oder Anregungen zu diesem Drop? Trete via Ticketsystem mit uns in Kontakt!
4 BewertungenDas sagen unsere Kunden zum Contact Form Drop