Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
| Beide Seiten der vorigen Revision Vorhergehende Überarbeitung | |||
| breedmaster:anleitung_formmailer [12.11.2018 15:14] – Manfred Link | breedmaster:anleitung_formmailer [03.10.2025 18:40] (aktuell) – Manfred Link | ||
|---|---|---|---|
| Zeile 2: | Zeile 2: | ||
| ==== Aufgabenstellung: | ==== Aufgabenstellung: | ||
| - | Der Verein möchte ein Züchterseminar durchführen. Die Anmeldungen sollen Online durchgeführt werden. Es stehen 15 Plätze zur Verfügung. Da es sich um ein Erst-Züchter-Seminar handelt, sollen diese bevorzugt Plätze erhalten. | ||
| - | Nach dem Absenden der Daten sollen | + | Der Verein möchte ein Züchterseminar durchführen. Die Anmeldungen |
| - | Die Geschäftstelle soll eine Info-Email bei jeder Meldung erhalten, da den Erstzüchtern umgehend die Kontodaten übermittelt | + | **Rahmenbedingungen: |
| + | * Es stehen 15 Plätze zur Verfügung | ||
| + | * Erstzüchter sollen bevorzugt berücksichtigt | ||
| + | * Platzvergabe erfolgt nach dem Meldeschluss | ||
| - | Nach dem Meldeschluß müssen ggf. Absagen verschickt werden, da nur eine begrenzte Teilnehmerzahl zulässig ist. Teilnehmer die einen Platz im Seminar | + | **Anforderungen an das System:** |
| - | + | * Nach Absendung der Daten: Weiterleitung auf eine Info-Seite mit Hinweisen zum weiteren Prozedere | |
| - | Für den Seminartag wird eine Teilnehmerliste benötigt, sowie für jeden Teilnehmer eine Platzkarte/ | + | * Automatische Bestätigungs-E-Mail an die Teilnehmer |
| + | * Info-E-Mail an die Geschäftsstelle bei jeder Anmeldung (damit Erstzüchtern umgehend Kontodaten übermittelt werden können) | ||
| + | * Nach Meldeschluss: | ||
| + | * Teilnehmer mit Zusage | ||
| + | **Benötigte Dokumente: | ||
| + | * Teilnehmerliste für den Seminartag | ||
| + | * Platzkarten/ | ||
| + | * Teilnahmebescheinigungen | ||
| ==== Lösung: ==== | ==== Lösung: ==== | ||
| - | **Anmerkung: | + | |
| + | **Anmerkung: | ||
| + | |||
| + | ===== Schritt 1: Formular erstellen ===== | ||
| Zunächst ist ein Formular zu erstellen. Die Anzahl der Felder und die optische Ausgestaltung spielen für dieses Beispiel keine Rolle, weshalb an dieser Stelle auf ein Muster verzichtet wird. Einzig die Felder Vorname, Nachname und Email des Teilnehmers müssen vorhanden sein, da sonst die in der Aufgabenstellung beschriebenen Abläufe nicht durchgeführt werden können. | Zunächst ist ein Formular zu erstellen. Die Anzahl der Felder und die optische Ausgestaltung spielen für dieses Beispiel keine Rolle, weshalb an dieser Stelle auf ein Muster verzichtet wird. Einzig die Felder Vorname, Nachname und Email des Teilnehmers müssen vorhanden sein, da sonst die in der Aufgabenstellung beschriebenen Abläufe nicht durchgeführt werden können. | ||
| Zeile 20: | Zeile 32: | ||
| Folgende Steuerfelder/ | Folgende Steuerfelder/ | ||
| - | < | + | < |
| <input name=" | <input name=" | ||
| <input name=" | <input name=" | ||
| Zeile 32: | Zeile 44: | ||
| - frm_forward = Seite auf die der Nutzer weitergeleitet wird, sobald er die Daten abgesendet hat | - frm_forward = Seite auf die der Nutzer weitergeleitet wird, sobald er die Daten abgesendet hat | ||
| - frm_notify_email = Email-Adresse die über eingehende Anmeldungen informiert wird | - frm_notify_email = Email-Adresse die über eingehende Anmeldungen informiert wird | ||
| - | - frm_confirm_tpl = Name des Email-Templates welches an den Teilnehmer verschickt wird, sobald er die Daten abgesendet hat. | + | - frm_confirm_tpl = Name des Email-Templates welches an den Teilnehmer verschickt wird, sobald er die Daten abgesendet hat |
| - | - frm_confirm_emailfield = Name des Feldes, welches die Email-Adresse des Teilnehmers enthält. | + | - frm_confirm_emailfield = Name des Feldes, welches die Email-Adresse des Teilnehmers enthält |
| - | - frm_confirm_sender = Absender-Email in deren Namen die Email an den Teilnehmer verschickt wird. | + | - frm_confirm_sender = Absender-Email in deren Namen die Email an den Teilnehmer verschickt wird |
| + | |||
| + | **Beispiel eines vollständigen Formulares: | ||
| + | |||
| + | <code html> | ||
| + | <form action=" | ||
| + | <input name=" | ||
| + | <input name=" | ||
| + | <input name=" | ||
| + | <input name=" | ||
| + | <input name=" | ||
| + | <input name=" | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <input type=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | <select class=" | ||
| + | <option value=""> | ||
| + | <option value=" | ||
| + | <option value=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <label for=" | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | <input type=" | ||
| + | <label class=" | ||
| + | Ich habe die <a href=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | <button type=" | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ===== Schritt 2: Bestätigungsseite erstellen ===== | ||
| + | |||
| + | Erstellen Sie im CMS einen neuen Artikel mit dem Namen **bestaetigung_uebermittlung_seminar** und fügen folgenden Code ein: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | .confirmation-box { | ||
| + | background-color: | ||
| + | border: 2px solid #28a745; | ||
| + | border-radius: | ||
| + | padding: 30px; | ||
| + | margin: 30px 0; | ||
| + | box-shadow: 0 2px 4px rgba(0, | ||
| + | } | ||
| + | .confirmation-box h2 { | ||
| + | color: #155724; | ||
| + | margin-top: 0; | ||
| + | } | ||
| + | .info-box { | ||
| + | background-color: | ||
| + | border: 1px solid #ffc107; | ||
| + | border-radius: | ||
| + | padding: 20px; | ||
| + | margin-top: 20px; | ||
| + | } | ||
| + | .info-box h3 { | ||
| + | color: #856404; | ||
| + | margin-top: 0; | ||
| + | font-size: 1.2em; | ||
| + | } | ||
| + | .data-summary { | ||
| + | background-color: | ||
| + | border-radius: | ||
| + | padding: 15px; | ||
| + | margin-top: 20px; | ||
| + | } | ||
| + | .data-summary table { | ||
| + | width: 100%; | ||
| + | margin: 0; | ||
| + | } | ||
| + | .data-summary th { | ||
| + | text-align: left; | ||
| + | padding: 8px; | ||
| + | width: 35%; | ||
| + | font-weight: | ||
| + | } | ||
| + | .data-summary td { | ||
| + | padding: 8px; | ||
| + | } | ||
| + | .loading { | ||
| + | color: #6c757d; | ||
| + | text-align: center; | ||
| + | padding: 20px; | ||
| + | } | ||
| + | .error { | ||
| + | color: #dc3545; | ||
| + | } | ||
| + | .highlight { | ||
| + | background-color: | ||
| + | padding: 2px 5px; | ||
| + | border-radius: | ||
| + | font-weight: | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | < | ||
| + | < | ||
| + | <div id=" | ||
| + | </ | ||
| + | |||
| + | <div class=" | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | (function() { | ||
| + | var output = document.getElementById(' | ||
| + | |||
| + | fetch(' | ||
| + | .then(function(response) { | ||
| + | if (!response.ok) { | ||
| + | throw new Error(' | ||
| + | } | ||
| + | return response.json(); | ||
| + | }) | ||
| + | .then(function(json) { | ||
| + | if (!json.success) { | ||
| + | output.innerHTML = '<p class=" | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | var data = json.data || {}; | ||
| + | var vorname = data.vorname || ' | ||
| + | var nachname = data.nachname || ' | ||
| + | var email = data.email || ' | ||
| + | var telefon = data.telefon || ' | ||
| + | var erstzuechter = data.erstzuechter || ' | ||
| + | |||
| + | var html = '< | ||
| + | html += '< | ||
| + | html += '< | ||
| + | html += '< | ||
| + | html += '< | ||
| + | html += '< | ||
| + | html += '</ | ||
| + | |||
| + | if (erstzuechter === ' | ||
| + | html += '<p style=" | ||
| + | } | ||
| + | |||
| + | output.innerHTML = html; | ||
| + | }) | ||
| + | .catch(function(error) { | ||
| + | output.innerHTML = '<p class=" | ||
| + | }); | ||
| + | |||
| + | function escapeHtml(text) { | ||
| + | var div = document.createElement(' | ||
| + | div.textContent = text; | ||
| + | return div.innerHTML; | ||
| + | } | ||
| + | }()); | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | ===== Schritt 3: E-Mail-Template für Teilnehmer ===== | ||
| + | |||
| + | Erstellen Sie im CMS einen neuen Artikel mit dem Namen **emailbestaetigung_seminar**: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | Ihre Geschäftsstelle</ | ||
| + | |||
| + | < | ||
| + | <p style=" | ||
| + | Diese E-Mail wurde automatisch generiert. Bitte antworten Sie nicht direkt auf diese E-Mail.< | ||
| + | Bei Rückfragen wenden Sie sich bitte an: gs@musterverein.xyz | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | **Hinweis: | ||
| + | |||
| + | ===== Schritt 4: E-Mail-Template für die Geschäftsstelle ===== | ||
| + | |||
| + | Da die Geschäftsstelle über '' | ||
| + | |||
| + | <code html> | ||
| + | <input name=" | ||
| + | </ | ||
| + | |||
| + | **Inhalt des Templates notify_erstzuechterseminar: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | <p>Es ist eine neue Anmeldung eingegangen:</ | ||
| + | |||
| + | <table border=" | ||
| + | < | ||
| + | <th align=" | ||
| + | <th align=" | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | </ | ||
| + | |||
| + | ===== Schritt 5: Formularkonfiguration einrichten ===== | ||
| + | |||
| + | Um die Anmeldungen komfortabel zu verwalten, erstellen Sie unter **Sonstiges → Formulare → Formularkonfiguration** einen neuen Eintrag: | ||
| + | |||
| + | ^Einstellung^Wert^ | ||
| + | |Formularname|Anmeldung Erstzüchterseminar| | ||
| + | |Listentitel|Seminar-Anmeldungen| | ||
| + | |Anzeigefelder|vorname, | ||
| + | |Sortierung|timestamp DESC| | ||
| + | |Filterfeld|erstzuechter| | ||
| + | |||
| + | Dies ermöglicht Ihnen: | ||
| + | * Eine übersichtliche Liste aller Anmeldungen | ||
| + | * Filterung nach Erstzüchtern | ||
| + | * Sortierung nach Anmeldedatum | ||
| + | |||
| + | ===== Schritt 6: Template für Zusage-E-Mail ===== | ||
| + | |||
| + | Erstellen Sie im CMS einen Artikel **zusage_erstzuechterseminar**: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | Ihre Geschäftsstelle</ | ||
| + | </ | ||
| + | |||
| + | ===== Schritt 7: Template für Absage-E-Mail ===== | ||
| + | |||
| + | Erstellen Sie im CMS einen Artikel **absage_erstzuechterseminar**: | ||
| + | |||
| + | <code html> | ||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | </ | ||
| + | |||
| + | < | ||
| + | |||
| + | < | ||
| + | Ihre Geschäftsstelle</ | ||
| + | </ | ||
| + | |||
| + | ===== Schritt 8: Workflow nach Meldeschluss ===== | ||
| + | |||
| + | Nach Ablauf der Meldefrist gehen Sie wie folgt vor: | ||
| + | |||
| + | ==== 1. Anmeldungen prüfen ==== | ||
| + | * Rufen Sie **Sonstiges → Formulare → Formulardaten** auf | ||
| + | * Filtern Sie nach dem Formular " | ||
| + | * Exportieren Sie die Liste zur besseren Übersicht | ||
| + | |||
| + | ==== 2. Platzvergabe durchführen ==== | ||
| + | * Priorisieren Sie Erstzüchter (Filter: erstzuechter = " | ||
| + | * Markieren Sie die ersten 15 Teilnehmer (bzw. nach Ihren Kriterien) | ||
| + | * Setzen Sie den Status der zugelassenen Teilnehmer auf **1** (Zugelassen) | ||
| + | * Setzen Sie den Status der abgelehnten Teilnehmer auf **2** (Abgelehnt) | ||
| + | |||
| + | ==== 3. E-Mails versenden ==== | ||
| + | |||
| + | **Für Zusagen: | ||
| + | * Nutzen Sie die Serienmail-Funktion mit dem Template **zusage_erstzuechterseminar** | ||
| + | * Filter: Status = 1 | ||
| + | |||
| + | **Für Absagen: | ||
| + | * Nutzen Sie die Serienmail-Funktion mit dem Template **absage_erstzuechterseminar** | ||
| + | * Filter: Status = 2 | ||
| + | |||
| + | ==== 4. Dokumente vorbereiten ==== | ||
| + | * Erstellen Sie die **Teilnehmerliste** über die Export-Funktion | ||
| + | * Bereiten Sie **Platzkarten/ | ||
| + | * Halten Sie **Teilnahmebescheinigungen** für den Seminartag bereit | ||
| + | |||
| + | ===== Zusammenfassung ===== | ||
| + | |||
| + | Dieses Beispiel zeigt einen vollständigen Workflow für die Organisation eines Seminars mit dem Formular-Mailer: | ||
| + | |||
| + | - ✓ Online-Formular mit allen relevanten Daten | ||
| + | - ✓ Automatische Bestätigungs-E-Mail an Teilnehmer | ||
| + | - ✓ Benachrichtigung der Geschäftsstelle bei jeder Anmeldung | ||
| + | - ✓ Anzeige der übermittelten Daten auf der Bestätigungsseite | ||
| + | - ✓ Übersichtliche Verwaltung aller Anmeldungen über die Formularkonfiguration | ||
| + | - ✓ Filterung und Priorisierung (Erstzüchter) | ||
| + | - ✓ Zu- und Absage-E-Mails nach Meldeschluss | ||
| + | - ✓ Export-Funktion für Teilnehmerlisten | ||
| + | |||
| + | Durch die Verwendung universeller Templates können Sie dieses System leicht für andere Seminare, Workshops oder Veranstaltungen anpassen. | ||
| + | |||
| + | ===== Tipps für die Praxis ===== | ||
| + | * **Testlauf: | ||
| + | * **Datenschutz: | ||
| + | * **E-Mail-Vorlagen: | ||