Skip to content

Commit b61b1c6

Browse files
nielsnuebelnielsnuebel
committed
update forms
1 parent 07755fd commit b61b1c6

File tree

6 files changed

+337
-198
lines changed

6 files changed

+337
-198
lines changed

‎src/kicktemp-addons-for-yootheme-pro/module/form/advanced.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
### `settings.md` – Erweiterte Formular-Konfiguration
2+
3+
In dieser Sektion findest du die erweiterten Einstellungen für dein Formular, einschließlich Layout, Validierung und Modal-Optionen. Diese Felder bieten dir die Möglichkeit, das Erscheinungsbild und Verhalten des Formulars weiter anzupassen.
4+
5+
---
6+
7+
| **Feld** | **Beschreibung** | **Bedingung (wenn gesetzt)** | **Source** |
8+
|-------------------------------|------------------------------------------------------------------------------------------------------------------------------------|------------------------------|-----------|
9+
| **ccs** | Eine durch Kommas getrennte Liste von Empfängern im CC-Feld (Carbon Copy). | - | Ja |
10+
| **bccs** | Eine durch Kommas getrennte Liste von Empfängern im BCC-Feld (Blind Carbon Copy). | - | Ja |
11+
| **horizontal** | Bestimmt, ob das Formular im horizontalen Layout angezeigt wird. | - | Nein |
12+
| **novalidate** | Wenn aktiviert, wird die HTML5-Validierung für das Formular deaktiviert. | - | Nein |
13+
| **show_label** | Wenn aktiviert, werden die Labels für jedes Formularfeld angezeigt. | - | Nein |
14+
| **gap** | Setzt den Abstand (Gap) zwischen den Spalten im Grid-Layout des Formulars. | - | Ja |
15+
| **form_size** | Bestimmt die Größe des Formulars. | - | Ja |
16+
| **form_style** | Bestimmt den Stil des Formulars. | - | Ja |
17+
| **label_button** | Bestimmt den Text des Formular-Submit-Buttons. | - | Ja |
18+
| **button_style** | Bestimmt den Stil des Submit-Buttons. | - | Ja |
19+
| **button_fullwidth** | Wenn aktiviert, wird der Submit-Button über die gesamte Breite des Formulars angezeigt. | - | Nein |
20+
| **show_inmodal** | Wenn aktiviert, wird das Formular in einem Modal-Fenster angezeigt. | - | Ja |
21+
| **modal_id** | Die ID des Modal-Fensters. Wird verwendet, wenn das Formular im Modal angezeigt werden soll. | Wenn **show_inmodal** aktiviert ist | Ja |
22+
| **modal_center** | Wenn aktiviert, wird das Modal-Fenster zentriert auf der Seite angezeigt. | Wenn **show_inmodal** aktiviert ist | Ja |
23+
| **modal_container** | Wenn aktiviert, wird ein Container-Modifikator für das Modal angewendet. | Wenn **show_inmodal** aktiviert ist | Ja |
24+
| **modal_header** | Der Header des Modals, der in der oberen Ecke des Modals angezeigt wird. | Wenn **show_inmodal** aktiviert ist | Ja |
25+
| **close_style** | Bestimmt den Stil des Schließen-Buttons im Modal. | Wenn **show_inmodal** aktiviert ist | Ja |
26+
27+
---
28+
29+
### Beschreibung der Felder
30+
31+
#### **ccs (CCs)**
32+
Gib eine durch Kommas getrennte Liste von E-Mail-Adressen an, an die eine Kopie des Formulars gesendet wird. Dies ist nützlich, wenn mehrere Personen eine Kopie der gesendeten E-Mail erhalten sollen.
33+
34+
**Beispiel:**
35+
- `admin@company.com, manager@company.com`
36+
37+
#### **bccs (BCCs)**
38+
Dies ist eine durch Kommas getrennte Liste von E-Mail-Adressen, an die das Formular im Blind Carbon Copy (BCC)-Feld gesendet wird. Empfänger im BCC sehen nicht, an wen die E-Mail noch gesendet wurde.
39+
40+
**Beispiel:**
41+
- `admin@company.com, bcc@company.com`
42+
43+
#### **horizontal**
44+
Mit dieser Einstellung kannst du dein Formular in einem horizontalen Layout darstellen. Standardmäßig ist das Formular vertikal ausgerichtet, aber wenn du das Kästchen aktivierst, werden die Formularfelder nebeneinander statt untereinander angezeigt.
45+
46+
#### **novalidate**
47+
Aktiviert oder deaktiviert die HTML5-Formularvalidierung. Wenn aktiviert, werden keine eingebauten HTML5-Validierungen angewendet, und du kannst eigene Validierungsregeln oder ein benutzerdefiniertes Verhalten verwenden.
48+
49+
#### **show_label**
50+
Bestimmt, ob die Formularfelder Labels anzeigen sollen. Wenn aktiviert, wird der Name des Feldes über dem Eingabefeld angezeigt. Wenn deaktiviert, kannst du Platzhalter verwenden, die in den Eingabefeldern angezeigt werden.
51+
52+
#### **gap**
53+
Setzt den Abstand (Gap) zwischen den Spalten in einem Formularlayout. Dies hilft, das Layout des Formulars visuell anzupassen und eine benutzerdefinierte Benutzeroberfläche zu gestalten.
54+
55+
#### **form_size**
56+
Definiert die Größe des Formulars. Du kannst "Small", "Default" oder "Large" auswählen, um die Größe des gesamten Formulars auf der Seite anzupassen.
57+
58+
#### **form_style**
59+
Wählt das Stil-Design des Formulars. Du kannst zwischen dem Standardstil und dem leeren Stil ("Blank") wählen, um das Aussehen des Formulars zu steuern.
60+
61+
#### **label_button**
62+
Definiert den Text des Buttons, der das Formular abschickt. Der Standardtext ist "Send", aber du kannst ihn nach Bedarf ändern.
63+
64+
**Beispiel:**
65+
- `Submit`
66+
67+
#### **button_style**
68+
Wählt den Stil des Submit-Buttons aus. Du kannst zwischen verschiedenen Stilen wie "Primary", "Secondary" und "Danger" wählen, um den Button visuell hervorzuheben.
69+
70+
**Beispiel:**
71+
- `Primary`
72+
73+
#### **button_fullwidth**
74+
Wenn aktiviert, wird der Submit-Button die gesamte Breite des Formulars ausfüllen. Dies ist besonders nützlich für größere Formulare oder wenn du ein sehr minimalistisches Design bevorzugst.
75+
76+
#### **show_inmodal**
77+
Wenn aktiviert, wird das Formular in einem Modal-Fenster angezeigt. Dies bedeutet, dass das Formular in einem Popup erscheint, wenn der Benutzer auf einen Button oder ein anderes Element klickt.
78+
79+
#### **modal_id**
80+
Dies ist die ID des Modal-Fensters, das das Formular enthält. Du musst diese ID angeben, damit der Button oder andere Auslöser das Modal-Fenster korrekt ansprechen können.
81+
82+
#### **modal_center**
83+
Wenn aktiviert, wird das Modal-Fenster auf der Seite zentriert. Ohne diese Option kann das Modal-Fenster an der oberen linken Ecke erscheinen, abhängig von den CSS-Einstellungen.
84+
85+
#### **modal_container**
86+
Ein Container-Modifikator, der es ermöglicht, das Modal-Fenster zusätzlich anzupassen. Dies ist hilfreich, wenn du das Modal-Fenster in einen bestimmten Container einfügen möchtest, um es visuell besser in deine Seite zu integrieren.
87+
88+
#### **modal_header**
89+
Der Titel des Modal-Fensters. Du kannst hier einen Text wie "Formular zur Anfrage" eingeben oder ihn leer lassen, wenn du kein Header-Element benötigst.
90+
91+
#### **close_style**
92+
Bestimmt, wie der Schließen-Button im Modal-Fenster aussieht. Du kannst zwischen "Close Default" (Standard-Stil) und "Close Outside" (Schließen des Modals durch Klicken außerhalb) wählen.
93+
94+
---
95+
96+
**Fazit**
97+
Diese erweiterten Einstellungen für dein Formular ermöglichen es dir, das Verhalten und das Layout des Formulars genau nach deinen Wünschen anzupassen. Du kannst sowohl das Design als auch das Verhalten der Formulareingabe und der Formularübermittlung steuern, um die Benutzererfahrung zu verbessern.
98+
99+
---
100+
101+
**Bist du bereit für die nächste Sektion oder möchtest du noch etwas hinzufügen?**

‎src/kicktemp-addons-for-yootheme-pro/module/form/captcha.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Spam-Schutz im Kickform Modul
2+
3+
Das **Kickform Modul** bietet mehrere Methoden zum Schutz vor Spam und Missbrauch von Formularen. Diese Schutzmechanismen stellen sicher, dass nur legitime Benutzer das Formular absenden können und verhindern, dass Bots Formulare automatisch ausfüllen. Im Kickform Modul können drei Hauptmethoden aktiviert werden:
4+
5+
- **Joomla Session Token**
6+
- **Honeypot-Feld**
7+
- **Captcha** (Google reCaptcha oder EasyCalcCheck)
8+
9+
## 1. **Joomla Session Token**
10+
11+
Das **Session Token** von Joomla stellt sicher, dass das Formular nur von einem gültigen Benutzer abgesendet wird. Ein **Session Token** wird automatisch generiert, wenn ein Benutzer sich bei der Website anmeldet, und es hilft zu verhindern, dass ein Bot das Formular absendet.
12+
13+
### **Funktionsweise:**
14+
- Wenn das Formular abgeschickt wird, wird das **Session Token** überprüft, um sicherzustellen, dass der Benutzer berechtigt ist, das Formular abzusenden.
15+
- Wenn das Token ungültig oder abgelaufen ist, wird die Anfrage abgelehnt, und der Benutzer erhält eine Fehlermeldung.
16+
17+
### **Verwendung:**
18+
Aktiviere die Option **Joomla Session** im Formular, um diesen Schutz zu aktivieren. Wenn diese Option aktiviert ist, überprüft das Formular, ob das Token gültig ist, bevor es die Daten absendet.
19+
20+
## 2. **Honeypot-Feld**
21+
22+
Das **Honeypot-Verfahren** ist ein unsichtbares Feld, das speziell für Bots entwickelt wurde. Menschliche Benutzer sehen dieses Feld nicht, während Bots automatisch alle Formularfelder ausfüllen. Wenn das unsichtbare Honeypot-Feld ausgefüllt wird, weiß das System, dass es sich um einen Bot handelt.
23+
24+
### **Funktionsweise:**
25+
- Ein unsichtbares Feld wird zum Formular hinzugefügt, das von echten Benutzern nicht gesehen werden kann.
26+
- Wenn das Feld dennoch ausgefüllt wird (was nur ein Bot tun würde), wird die Anfrage abgelehnt.
27+
- Zusätzlich gibt es eine Zeitüberprüfung: Wenn das Formular zu schnell abgesendet wird (was auf automatisiertes Ausfüllen hindeutet), wird die Anfrage ebenfalls abgelehnt.
28+
29+
### **Verwendung:**
30+
Aktiviere das **Honeypot-Feld**, indem du es im Formular einfügst. Wenn ein Bot dieses Feld ausfüllt, wird die Anfrage automatisch abgelehnt.
31+
32+
## 3. **Captcha (Google reCaptcha oder EasyCalcCheck)**
33+
34+
Das **Captcha** stellt sicher, dass das Formular von einem echten Benutzer und nicht von einem Bot ausgefüllt wird. Das Modul unterstützt zwei verschiedene Captcha-Systeme: **Google reCaptcha** und **EasyCalcCheck** von Viktor Vogel.
35+
36+
### **Funktionsweise:**
37+
- **reCaptcha**: Ein bekannter Dienst von Google, der eine kleine Herausforderung für den Benutzer stellt (z. B. Auswahl von Bildern oder Eingabe eines Textes), um sicherzustellen, dass der Benutzer ein Mensch ist.
38+
- **EasyCalcCheck**: Eine einfachere, aber ebenfalls wirksame Methode zur Verifizierung von menschlichen Benutzern. Diese Methode verwendet einfache mathematische Berechnungen, die der Benutzer lösen muss.
39+
40+
### **Verwendung:**
41+
Aktiviere das Captcha, indem du die entsprechende Option im Formular auswählst und das gewünschte Captcha (reCaptcha oder EasyCalcCheck) konfigurierst. Das Formular wird den Benutzer auffordern, das Captcha zu lösen, bevor es abgeschickt werden kann.
42+
43+
---
44+
45+
## Zusammenfassung der Schutzmaßnahmen:
46+
47+
- **Joomla Session Token**: Verhindert, dass unbefugte Benutzer das Formular absenden. Es stellt sicher, dass nur berechtigte Benutzer das Formular ausfüllen können.
48+
- **Honeypot-Feld**: Ein unsichtbares Feld, das automatisch von Bots ausgefüllt wird und dadurch ihre Anfragen erkennt und blockiert.
49+
- **Captcha**: Ein visueller Test, der sicherstellt, dass das Formular von einem echten Benutzer und nicht von einem Bot ausgefüllt wird.
50+
51+
Diese Schutzmaßnahmen stellen sicher, dass dein Formular sicher vor Spam und Missbrauch ist. Wenn du zusätzliche Anpassungen oder eine detaillierte Erklärung zu einem dieser Schutzmechanismen benötigst, lass es mich wissen!

‎src/kicktemp-addons-for-yootheme-pro/module/form/index.md‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,46 @@
1-
# Overview - Form
1+
# Formular-Modul für YOOtheme Pro
22

3-
## Einführung
3+
Das Formular-Modul für YOOtheme Pro ermöglicht dir, benutzerdefinierte Formulare zu erstellen und diese dynamisch in deine Templates zu integrieren. Es bietet eine leistungsstarke Möglichkeit, Formularfelder zu erstellen, zu konfigurieren und zu verarbeiten – ganz nach deinen Bedürfnissen.
44

5-
Mit dem Formular Addon kannst du Formulare erstellen. Dafür stellt dir das Addon zwei Elemente zur Verfügung: das Form- Element und das Toggle- Modal- Element. Es können verschiedene Felder erstellt und die Inhalte dieser Felder per E-Mail versendet werden.
5+
### Warum ist das Formular-Modul wichtig?
66

7-
## Video
7+
Formulare sind auf nahezu jeder Website unerlässlich – sei es für Kontaktformulare, Newsletter-Anmeldungen oder Umfragen. Das **Formular-Modul** für YOOtheme Pro bietet dir die Flexibilität, Formulare zu gestalten und mit dynamischen Inhalten zu füllen. Es ermöglicht dir, Felder anzupassen, die mit bestimmten Daten aus dem Backend, z.B. Benutzerinformationen oder Produktdaten, vorab gefüllt werden.
8+
9+
Das Modul versendet beim Absenden des Formulars eine E-Mail, die an einen Empfänger gesendet wird. Dabei kannst du die Formularfelder nach Bedarf verarbeiten und anpassen, bevor sie abgesendet werden. Besonders wichtig ist, dass du sowohl vor als auch nach dem Absenden auf die Felder zugreifen kannst, um sie weiter zu verarbeiten.
10+
11+
### Wichtige Features:
12+
13+
- **Flexibilität**: Anpassbare Formulare mit verschiedenen Feldtypen wie Text, E-Mail, Dateiuploads und mehr.
14+
- **Dynamische Felder**: Felder können mit dynamischen Inhalten aus dem CMS befüllt werden.
15+
- **E-Mail-Benachrichtigungen**: Formulardaten können per E-Mail verschickt werden.
16+
- **Spam-Schutz**: Unterstützt verschiedene Mechanismen wie Captcha und Honeypot zur Spam-Vermeidung.
17+
- **Trigger vor und nach Absenden**: Vor und nach dem Absenden des Formulars können Trigger verwendet werden, um zusätzliche Felder zu verarbeiten.
18+
19+
### Wie funktioniert das Formular-Modul?
20+
21+
Das Formular-Modul funktioniert auf der Basis von benutzerdefinierten Feldern, die im Backend konfiguriert werden. Sobald ein Benutzer das Formular ausfüllt und absendet, wird eine E-Mail an die definierten Empfänger gesendet. Du kannst zudem entscheiden, ob nach dem Absenden eine Bestätigungsnachricht angezeigt wird oder ob der Benutzer auf eine andere Seite weitergeleitet wird.
22+
23+
Die Konfiguration des Formulars erfolgt über eine benutzerfreundliche Oberfläche, die es dir ermöglicht, Formularelemente hinzuzufügen, zu bearbeiten und deren Verhalten anzupassen. Jedes Formularfeld kann durch die Verwendung von **Triggers** und **Ereignissen** vor und nach dem Absenden angepasst werden.
24+
25+
### Funktionsweise der Formularverarbeitung
26+
27+
Das Formular-Modul empfängt die Formulardaten und verarbeitet diese durch eine `submit`-Methode. Dabei wird eine Reihe von Validierungen und Verarbeitungsschritten durchgeführt:
28+
29+
1. **Verarbeitung der Formulardaten**: Die Formulardaten werden nach dem Absenden durch die `submit`-Methode verarbeitet.
30+
2. **Überprüfung der Sicherheitsmerkmale**: Zunächst werden Sicherheitsmaßnahmen wie Token und Honeypot überprüft.
31+
3. **Datenweiterverarbeitung**: Nach der Validierung wird das Formular weiterverarbeitet. Es können Trigger wie `onKickyooaddonsBeforeSubmit` und `onKickyooaddonsAfterSubmit` genutzt werden, um auf die Formulardaten zuzugreifen und diese weiter zu verarbeiten.
32+
4. **E-Mail-Versand**: Sobald die Daten verarbeitet sind, wird eine E-Mail an die angegebenen Empfänger gesendet.
33+
5. **Benachrichtigungen**: Das Formular-Modul kann auch Benachrichtigungen an den Benutzer senden oder eine Weiterleitung auf eine andere URL vornehmen.
34+
35+
### Flexibilität durch Trigger
36+
37+
Ein besonders leistungsstarkes Feature des Formular-Moduls ist die Möglichkeit, auf die Formularfelder vor und nach dem Absenden zuzugreifen. Über die `before`- und `after`-Submit-Trigger kannst du benutzerdefinierte Logiken implementieren, bevor das Formular abgeschickt wird oder nachdem die Antwort versendet wurde. Das gibt dir die Flexibilität, Daten zu verarbeiten oder zu ändern, ohne die Formularstruktur selbst zu verändern.
38+
39+
#### Beispiele:
40+
41+
- **Vor dem Absenden**: Du kannst die Formulardaten vor dem Absenden validieren oder ergänzen.
42+
- **Nach dem Absenden**: Du kannst Benachrichtigungen anzeigen, Weiterleitungen vornehmen oder die E-Mail weiter anpassen.
43+
44+
Das Formular-Modul ist daher besonders geeignet für dynamische Webanwendungen, in denen Formulardaten in Echtzeit verarbeitet und flexibel angezeigt werden müssen.
45+
46+
---

0 commit comments

Comments
 (0)