Toolbox: #008 · Fokus: (https://kreativkonzentrat.de/Contact-Form)
Problem
Ich möchte ein eigenes Kontaktformular in meinen Shop einbauen und dabei die Felder frei bestimmen - das Standard-Kontaktformular des JTL-Shops reicht mir dafür nicht aus.
Das Kontaktformular im JTL-Shop ist ein fester Bestandteil der Kontaktseite - nicht mehr und nicht weniger. Wer dort Felder anpassen, mehrere Empfänger konfigurieren oder das Formular an anderen Stellen im Shop platzieren möchte, stößt im Standard schnell an die Grenzen des Backends.
Formulare für Rückrufanfragen auf Artikelseiten, Musterbestellungen in Kategorien, Projektanfragen auf einer Landingpage oder ein Widerrufsformular im Footer - das alles ist mit Bordmitteln nicht umsetzbar. Es fehlt eine flexible und wartbare Lösung, die unabhängig vom Template funktioniert und sich überall einbinden lässt.
Lösung
Mit dem Contact Form Drop baust du individuelle Formulare mit frei konfigurierbaren Feldern und eigenem E-Mail-Versand überall im Shop ein. Die Konfiguration erfolgt vollständig in Dropper und funktioniert in jedem Template.
Das Drop ist überaus umfangreich und bietet mehr Funktionen als manches Plugin. Bitte beachte die Ressourcen weiter unten, insbesondere Videos und Dokumentationen!
In der Dropper-Zone
Beachte die Demo des Contact Form Drops in der Dropper-Zone. Hier kannst du die Funktionen und Einstellungen direkt in einem JTL-Shop mit Dropper Installation nachvollziehen.
Schritt für Schritt
- Contact Form Drop anlegen und Felder konfigurieren (Textfelder, Auswahllisten, Upload, Captcha etc.).
- E-Mail-Versand einrichten: Empfänger, Betreff und E-Mail-Template(s) definieren.
- Drop per Dropper an der gewünschten Stelle im Shop einbinden (Artikelseite, Kategorie, Footer, Popup Drops etc.).
- Formular im Test- & Debugmodus prüfen, dann freischalten.
in Dropper Gold & Ultimate
Nutze alle Drops in unseren Flatrates oder wähle gezielt, was du brauchst.
Anwendungsbeispiele
Das Contact Form Drop lässt sich für viele praxisnahe Szenarien einsetzen - weit über die klassische Kontaktseite hinaus:
- Projektanfrage auf Landingpages - Ein strukturiertes Formular direkt auf der Angebotsseite, damit Interessenten verlässliche und vollständige Anfragen stellen können.
- Rückrufformular auf Artikeldetailseiten - Kunden hinterlassen Name und Telefonnummer ohne Umweg zur Kontaktseite. Siehe Let's Drop #040.
- Musterbestellung als Popup - Ein schlankes Formular öffnet sich per Klick auf Artikel- oder Kategorieseiten, ohne die laufende Browsing-Session zu unterbrechen. Siehe Let's Drop #048 und Let's Drop #007.
- Händler- und Partneranmeldungen - Anmeldeformulare für Händlerkonten oder Affiliateprogramme mit individuellen Pflichtfeldern und automatischer Benachrichtigung. Siehe Let's Drop #076.
- Serviceanfragen im Kontext - erweiterte "Frage zum Produkt" Formulare direkt auf dem Artikel, vorausgefüllt mit Artikelname oder Artikelnummer, damit das Supportteam sofort weiß, worum es geht.
- Gesetzlich gefordertes Widerrufsformular - Als Drop im Footer oder als Popup - ein vollständiges Formular, jederzeit zugänglich. Siehe Toolbox #007.
Detailvorstellung im Livestream
Im Livestream stellen wir dir das Contact Form Drop wirklich detailiert vor. Bitte beachte die Kapitelmarken!
Wissenswert
Das Contact Form Drop baut auf unserem Grid Control auf - damit kannst du das Formularlayout direkt im Backend in Spalten und Zeilen aufteilen, ohne CSS schreiben zu müssen. Formulare werden automatisch responsiv und fügen sich in jeden Shop-Kontext ein.
Neben einfachen Textfeldern stehen viele weitere Feldtypen zur Verfügung: Auswahllisten, Checkboxen, Datei-Uploads, Buttons und Captcha. Felder können voneinander abhängig gemacht werden - etwa eine Auswahlliste, die weitere Felder ein- oder ausblendet.
Das Contact Form Drop kann pro Absende-Vorgang beliebig viele E-Mails versenden - zum Beispiel eine Bestätigung an den Einsender und gleichzeitig eine interne Benachrichtigung an das Supportteam. Beide E-Mails können vollständig unterschiedliche Inhalte und Empfänger haben.
Für erweiterte Steuerung bietet das Drop einen JavaScript- und PHP-Hook-Mechanismus. Darüber lassen sich eigene Validierungen, externe API-Calls oder Weiterleitungen nach dem Absenden realisieren - ohne das Drop selbst zu verändern.
Formulare lassen sich kontextbezogen vorausfüllen: Per GET-Parameter oder Smarty-Variablen kann z.B. auf einer Artikelseite der Artikelname oder die Artikelnummer automatisch in ein verstecktes Feld übernommen werden. Das macht Anfragen für Supportteam und Einsender deutlich konkreter.
Testen von Formularen ist oft aufwändiger als die Konfiguration selbst - der Versand von E-Mails, Pflichtfeld-Validierungen und Hook-Aktionen müssen sauber geprüft werden. Das Contact Form Drop bringt dafür einen umfangreichen Entwickler- und Debugmodus mit, über den sich ausgelöste Aktionen und E-Mail-Versände direkt nachvollziehen lassen.
Das Drop lässt sich problemlos mit einem Popup Drop kombinieren: Das Formular bleibt dann verborgen und öffnet sich erst nach einem Klick - z. B. auf einen Button in einer Artikelseite oder im Footer. In einem Toolboxbeitrag zeigen wir genau dieses Prinzip am Beispiel des neuen Widerrufsbuttons.
Ressourcen
| Format | Ressource (Link) |
|---|---|
| Video | Contact Form vorgestellt (Livestream) · Mails an verschiedene Empfänger |
| Demo | Contact Form im Demostore |
| Test & Shop | Contact Form in unserem Store · Im JTL-Extension Store |
| Doku & Blog | Contact Form Docs · Contact Form 2.0 Release Notes |
| Let's Drop | Let's Drop #076 · #048 · #040 · #007 im Blog |
| Toolbox | Individuelle Kontaktformulare überall im JTL-Shop |