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.
Klicke auf das Video, um die Video-Einbettung durch Youtube zu starten.
Contact Form vorgestellt - Aufzeichnung vom Juli 2022
Klicke auf das Video, um die Video-Einbettung durch Youtube zu starten.
Contact Form 2.0 - Mails an verschiedene Empfnger senden
Live-Demo
Contact Form Live-Demo
Im Einsatz
Hole dir Inspiration zum Einsatz des Contact Form Drops aus unserem Blog und unserem Fiddle-Service „Dropper Zone”.
Geschichten
Playground
Lets Drop #048 - Muster bestellen @ berlin-parkett.de
Musterbestellungen auf Artikeldetailseiten werden auf berlin-parkett.de mit einem Contact Form Drop realisiert, das in einem Popup Drop integriert ist.
Lets Drop #046 - Events buchen @ piekfeinebraende.de
Auf einer Event-Seite stellt piekfeinebraende.de verfgbare Locations fr Veranstaltungen vor. Die Buchungsanfrage wird mit einem Contact Form Drop realisiert.
Die entwicklungstechnische Zusammenfassung des 3. Quartals 2022: Revealer Drop Release, ein neuer DEV Workshop und kleinere Updates fr Flex Menu & Contact Form.
Auf den Artikeldetailseiten von bau.shop werden Rckrufformulare eingebunden, die mit dem Contact Form Drop realisiert sind. Inklusive Eingabemglichkeiten fr Kontaktdaten, Wunschdatum, Uhrzeit und mehr.
Lets Drop #037 - Anfrageformular @ boxxco.com - Teil 2/2
Im Anfrageformular von boxxco.com knnen Wunschkartons via Contact Form Drop geordert werden. Teil 2 zeigt konfigurierbare Uploads, Dropdowns mit vorausgefllten Optionen und mehr.
Lets Drop #036 - Anfrageformular @ boxxco.com Teil 1/2
Im Anfrageformular von boxxco.com knnen Wunschkartons via Contact Form Drop geordert werden. Teil 1 zeigt diverse Arten von (Pflicht-) Formularfeldern, konditionelle Optionen & verlinkte Drops.
Ein Update der Dropper Zone, Lets Drop Beitrge auf Artikelseiten, neue Funktionen im Contact Form Drop & kleinere Drop Bugfixes. Ein Rckblick auf das 1. Quartal 2022.
Auf rollibeet.de kann durch Klicks auf verschiedene Buttons ein Popup aktiviert werden. Dieses Popup enthlt ein Anfrageformular, das mit dem Contact Form Drop umgesetzt ist. Kunden knnen damit ein kostenfreies Infopaket bestellen.
Das umfangreiche Update vorgestellt: gestaltet Formulare komfortabel und responsiv mit dem neuen Grid Control, versendet beliebig viele Mails pro Formular, wertet Daten mit Hooks aus und testet alles bequem im neuen Entwicklermodus.
Heute gesammelt fr euch: Infos zum neuen Cookie Notification Drop und den neuesten Versionen von Dropper, Online Video, Contact Form und dem Wide Layout Drop.
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!
brigens: im eigenen Inhalt kannst du auch HTML-Formularelemente nutzen, also auch Code aus dem Expertemodus / alten Contact Form 1.x Formularen (siehe Appendix).
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.
Auerdem 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
Konditionellen Anzeigebedingungen
kannst du dein Formularfeld auf Basis von Nutzereingaben ausblenden bzw. deaktivieren. Mit
form.meinFeld
greifst du dabei auf Eingaben deiner Formularfelder zu, wobei
meinFeld
der Wert der Option "Variable" des jeweiligen Feldes ist.
form.email !=== ''
blendet ein Feld aus 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.
Fr
Checkboxen und Felder mit Optionen
(Radio Buttons, Dropdowns, Listen) kannst du Zustand und Werte wie folgt prfen:
Checkboxen mit Einfachauswahl: form.meinFeld === true (selektiert) oder form.meinFeld === false (nicht selektiert)
Radiobuttons, Auswahl (Dropdown/Liste) mit Einfachauswahl: form.meinFeld === "meinWert"
Checkboxen und Dropdowns/Listen mit Mehrfachswahl: form.meinFeld.indexOf('meinWert') >= 0
Tipp:
nutze den Entwicklermodus (siehe Abschnitt zu Mails), um alle verfgbaren Variablen und Werte deines Formulars zu sehen!
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.
Einige Beispiele
zur Mailkonfiguration findest du weiter unten im Appendix und auf
Youtube.
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 knnte wie folgt aussehen.
Beachte, dass du in deinem Mailtemplates auch
Smarty verwenden
kannst, um Werte deiner Formularfelder abzufragen. Im nachfolgenden Beispiel werden die selektierten Optionen einer Checkbox mit Mehrfachauswahl (Name der Varibale:
cbm) ausgegeben.
{* no option checked *}
{if empty($form.cbm)}
keine Auswahl
{else}
{* loop each selected option and echo them *}
{foreach from=$form.cbm item="checkboxAuswahl"}
{$checkboxAuswahl} <br>
{/foreach}
{/if}
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-) E-Mail-Clients besser untersttzt werden. Mit obigem 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 Entwrfe kannst du auch an echte Mailadressen senden, um bspw. den Look deiner Mails in bestimmten Mail-Clients 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 1
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);
}
JavaScript Hook Beispiel 2 - Matomo Event Tracking
Nehmen wir an, du hast ein Preisvorschlag Formular mit dem Contact Form Drop realisiert.
Auerdem verwendest du bereits Matomo (ehemals Piwik) und mchtest nun das Absenden dieses Formulars tracken.
Folgenden JavaScript-Code kannst du dazu beim Event "Nach erfolgreichen Mailversand" setzen:
Als letzter Parameter der
push()
Funktion wird hier der Wert des Formularfeldes mit der Variable
cArtNr
gesetzt.
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.
Hufige Anwendungsflle
Besttigungsmail an den Kunden senden
Um eine Besttigungsmail an den anfragenden Kunden zu senden, gehst du wie folgt vor:
erstelle in deinem Formular ein Feld des Typs "Textbox" fr den Namen des Anfragenden
setze im Textfeld die Option "Name der Antwortadresse?" auf "Ja"
erstelle in deinem Formular ein Feld des Typs "Mail-Adresse"
setze im Mailfeld die Option "Mail an diese Adresse senden als" auf "Empfnger (TO)"
lasse in der Konfiguration deiner den "Empfnger" leer
setze in der Mail die Option "An Mail-Adressen aus dem Formular senden?" auf "Ja"
(optional) setze in der Mail die Option "BCC Empfnger" auf eine Email-Adresse, an die eine Blindkopie der Besttigunsmail gehen soll (z.B. deine Supportermail)
Hufig sendet man Mails eines Kontaktformulares an Supportadressen wie
support@meinshop.de. Um auf solche Mails direkt aus dem E-Mail-Client antworten zu knnen, musst du folgendes konfigurieren:
erstelle in deinem Formular ein Feld des Typs "Textbox" fr den Namen des Anfragenden
setze im Textfeld die Option "Name der Antwortadresse?" auf "Ja"
erstelle in deinem Formular ein Feld des Typs "Mail-Adresse"
setze im Feld die Option "Antwortadresse?" auf "Ja"
setze in der Mail die Option "Reply-To aus dem Formular nutzen?" auf "Ja"
Du kannst im Contact Form Drop auch
Select2
nutzen! Mit Select2 lassen sich leicht Suchen in deinen Dropsdown-Optionen oder (mit etwas zustzlichen Code) Bilder / Icons in den Auswahllisten realisieren.
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.
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.
Changelog
2.0.16 - 15.09.2023
Verbesserte Kompatibiltt mit PHP 8.2+.
2.0.15 - 28.04.2023
Bugfix: Mail-Versand unter Shop 5.2 war fehlerhaft wenn die Einstellung "E-Mail-Blacklist benutzen (549)" aktiviert war.
2.0.14 - 27.03.2023
Bugfix: Token-Fehler bei aktivem statischem HTML-Cache behoben.
2.0.13 - 08.02.2023
Bugfix: Fehler beim Mail-Versand unter JTL-Shop 5.2 behoben.
Bugfix: PHP 8.2 Deprecation Warnungen behoben.
2.0.12 - 07.01.2023
Kompatibilitt mit JTL-Shop 5.2.
2.0.11 - 05.10.2022
Bugfix: PHP Warnung im Uploader behoben, welche bei aktivierter Fehlerausgabe zu fehlerhaften Dateiuploads fhren konnte.
2.0.10 - 27.06.2022
Bugfix: Control fr die Auswahl von Uhrzeiten war auf einen bestimmten Zeitbereich beschrnkt.
2.0.9 - 20.04.2022
Bugfix: Verbesserte Evaluierung von Eingabekonditionen.
Feature (Entwickler): Javascript "change" Event wird erzeugt, sobald sich Eingabedaten ndern.
2.0.8 - 22.02.2022
Feature: Optionen von Checkboxen / Selects / Radios knnen dynamisch konditionell deaktiviert oder ausgeblendet werden.
Bugfix: Einstellung "Label anzeigen?" bei einer einfachen Checkbox griff nicht.
2.0.7 - 10.02.2022
Feature: Neue Eingabetypen fr Datum und Uhrzeit.
Bugfix: Feld-Einstellung "In automatisch generiertem Mail-Inhalt anzeigen?" wurde nicht angezeigt.
2.0.6 - 17.09.2021
Bugfix: Anordnung von Checkboxen / Radios nebeneinander war fehlerhaft (JTL-Shop 5).
Bugfix: Mgliche Fehler mit Umlauten in Mails die via CSS gestyled wurden.
Verbessertes Design fr das Mail-Vorschau-Popup (Dev-Modus) im JTL-Shop 5.
2.0.5 - 09.09.2021
Bugfix: Support fr das reCAPTCHA Plugin (JTL-Shop 5).