Inhaltsverzeichnis

Form-Mailer Beispiel: Züchterseminar

Form-Mailer Beispiel: Züchterseminar

Aufgabenstellung:

Der Verein möchte ein Züchterseminar durchführen. Die Anmeldungen sollen online erfolgen.

Rahmenbedingungen:

Es stehen 15 Plätze zur Verfügung
Erstzüchter sollen bevorzugt berücksichtigt werden
Platzvergabe erfolgt nach dem Meldeschluss

Anforderungen an das System:

Nach Absendung der Daten: Weiterleitung auf eine Info-Seite mit Hinweisen zum weiteren Prozedere
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: Zusage- oder Absage-E-Mails an die Teilnehmer
Teilnehmer mit Zusage erhalten eine E-Mail mit Wegbeschreibung und Ablaufinformationen

Benötigte Dokumente:

Teilnehmerliste für den Seminartag
Platzkarten/Namensschilder für jeden Teilnehmer
Teilnahmebescheinigungen

Lösung:

Anmerkung: Bei allen nachfolgenden Schritten die beschrieben werden, sollte das Ziel sein, immer möglichst universelle Ansätze zu verfolgen. Dadurch ist es einfacher Formulare und deren weitere Bestandteile mehrfach zu verwenden, bzw. können Anpassungen leichter umgesetzt werden. Formulierungen in Templates etc. sollten also allgemein gehalten werden.

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.

Folgende Steuerfelder/Angaben sind im HTML-Code des Formulares einzufügen:

<input name="formular"               value="Anmeldung Erstzüchterseminar" type="hidden"/> 
<input name="frm_forward"            value="showpage.php?seite=bestaetigung_uebermittlung_seminar" type="hidden"/>
<input name="frm_notify_email"       value="gs@musterverein.xyz" type="hidden"/>
<input name="frm_confirm_tpl"        value="emailbestaetigung_seminar" type="hidden"/>
<input name="frm_confirm_emailfield" value="email" type="hidden"/>
<input name="frm_confirm_sender"     value="gs@musterverein.xyz" type="hidden"/>

formular = Name des Formulares
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_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_sender = Absender-Email in deren Namen die Email an den Teilnehmer verschickt wird

Beispiel eines vollständigen Formulares:

<form action="cmd.php?id=-45" method="post" class="form-horizontal">
    <input name="formular" value="Anmeldung Erstzüchterseminar" type="hidden"/> 
    <input name="frm_forward" value="showpage.php?seite=bestaetigung_uebermittlung_seminar" type="hidden"/>
    <input name="frm_notify_email" value="gs@musterverein.xyz" type="hidden"/>
    <input name="frm_confirm_tpl" value="emailbestaetigung_seminar" type="hidden"/>
    <input name="frm_confirm_emailfield" value="email" type="hidden"/>
    <input name="frm_confirm_sender" value="gs@musterverein.xyz" type="hidden"/>
 
    <div class="mb-3">
        <label for="vorname" class="form-label">Vorname <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="vorname" name="vorname" required>
    </div>
 
    <div class="mb-3">
        <label for="nachname" class="form-label">Nachname <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="nachname" name="nachname" required>
    </div>
 
    <div class="mb-3">
        <label for="email" class="form-label">E-Mail <span class="text-danger">*</span></label>
        <input type="email" class="form-control" id="email" name="email" required>
    </div>
 
    <div class="mb-3">
        <label for="telefon" class="form-label">Telefon <span class="text-danger">*</span></label>
        <input type="tel" class="form-control" id="telefon" name="telefon" required>
    </div>
 
    <div class="mb-3">
        <label for="strasse" class="form-label">Straße, Hausnummer</label>
        <input type="text" class="form-control" id="strasse" name="strasse">
    </div>
 
    <div class="row">
        <div class="col-md-4 mb-3">
            <label for="plz" class="form-label">PLZ</label>
            <input type="text" class="form-control" id="plz" name="plz">
        </div>
        <div class="col-md-8 mb-3">
            <label for="ort" class="form-label">Ort</label>
            <input type="text" class="form-control" id="ort" name="ort">
        </div>
    </div>
 
    <div class="mb-3">
        <label for="erstzuechter" class="form-label">Züchterstatus <span class="text-danger">*</span></label>
        <select class="form-control" id="erstzuechter" name="erstzuechter" required>
            <option value="">Bitte wählen...</option>
            <option value="Ja">Ja, ich bin Erstzüchter</option>
            <option value="Nein">Nein, ich habe bereits Zuchterfahrung</option>
        </select>
    </div>
 
    <div class="mb-3">
        <label for="bemerkung" class="form-label">Bemerkungen / Besondere Anforderungen</label>
        <textarea class="form-control" id="bemerkung" name="bemerkung" rows="4"></textarea>
    </div>
 
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" id="datenschutz" name="datenschutz" value="akzeptiert" required>
        <label class="form-check-label" for="datenschutz">
            Ich habe die <a href="showpage.php?seite=datenschutz" target="_blank">Datenschutzerklärung</a> zur Kenntnis genommen. <span class="text-danger">*</span>
        </label>
    </div>
 
    <button type="submit" class="btn btn-primary">Verbindlich anmelden</button>
</form>

Schritt 2: Bestätigungsseite erstellen

Erstellen Sie im CMS einen neuen Artikel mit dem Namen bestaetigung_uebermittlung_seminar und fügen folgenden Code ein:

<style>
    .confirmation-box {
        background-color: #d4edda;
        border: 2px solid #28a745;
        border-radius: 8px;
        padding: 30px;
        margin: 30px 0;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .confirmation-box h2 {
        color: #155724;
        margin-top: 0;
    }
    .info-box {
        background-color: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 5px;
        padding: 20px;
        margin-top: 20px;
    }
    .info-box h3 {
        color: #856404;
        margin-top: 0;
        font-size: 1.2em;
    }
    .data-summary {
        background-color: #f8f9fa;
        border-radius: 5px;
        padding: 15px;
        margin-top: 20px;
    }
    .data-summary table {
        width: 100%;
        margin: 0;
    }
    .data-summary th {
        text-align: left;
        padding: 8px;
        width: 35%;
        font-weight: 600;
    }
    .data-summary td {
        padding: 8px;
    }
    .loading {
        color: #6c757d;
        text-align: center;
        padding: 20px;
    }
    .error {
        color: #dc3545;
    }
    .highlight {
        background-color: #ffffcc;
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: 600;
    }
</style>
 
<div class="confirmation-box">
    <h2>✓ Vielen Dank für Ihre Anmeldung!</h2>
    <p><strong>Ihre Anmeldung zum Erstzüchterseminar ist bei uns eingegangen.</strong></p>
    <div id="output" class="loading">Ihre Daten werden geladen...</div>
</div>
 
<div class="info-box">
    <h3>Wie geht es weiter?</h3>
    <ul>
        <li><strong>Meldeschluss:</strong> Die Anmeldefrist endet am <span class="highlight">[Datum einfügen]</span></li>
        <li><strong>Platzvergabe:</strong> Da nur 15 Plätze zur Verfügung stehen, erfolgt die Platzvergabe nach Meldeschluss. Erstzüchter werden bei der Vergabe bevorzugt berücksichtigt.</li>
        <li><strong>Bestätigung:</strong> Sie erhalten eine Bestätigungs-E-Mail an die von Ihnen angegebene E-Mail-Adresse.</li>
        <li><strong>Weitere Informationen:</strong> Unsere Geschäftsstelle wird sich zeitnah bei Ihnen melden.</li>
        <li><strong>Zahlung:</strong> Erstzüchter erhalten von der Geschäftsstelle die Kontodaten für die Seminargebühr.</li>
    </ul>
</div>
 
<script>
(function() {
    var output = document.getElementById('output');
 
    fetch('api-session-formularmailer.php', { credentials: 'same-origin' })
        .then(function(response) {
            if (!response.ok) {
                throw new Error('Fehler beim Laden der Daten: ' + response.status);
            }
            return response.json();
        })
        .then(function(json) {
            if (!json.success) {
                output.innerHTML = '<p class="error">Hinweis: ' + (json.message || 'Ihre Anmeldedaten konnten nicht angezeigt werden, wurden aber erfolgreich gespeichert.') + '</p>';
                return;
            }
 
            var data = json.data || {};
            var vorname = data.vorname || '(nicht angegeben)';
            var nachname = data.nachname || '(nicht angegeben)';
            var email = data.email || '(nicht angegeben)';
            var telefon = data.telefon || '(nicht angegeben)';
            var erstzuechter = data.erstzuechter || '(nicht angegeben)';
 
            var html = '<p>Folgende Daten wurden von uns gespeichert:</p>';
            html += '<div class="data-summary"><table>';
            html += '<tr><th>Name:</th><td>' + escapeHtml(vorname) + ' ' + escapeHtml(nachname) + '</td></tr>';
            html += '<tr><th>E-Mail:</th><td>' + escapeHtml(email) + '</td></tr>';
            html += '<tr><th>Telefon:</th><td>' + escapeHtml(telefon) + '</td></tr>';
            html += '<tr><th>Züchterstatus:</th><td>' + escapeHtml(erstzuechter) + '</td></tr>';
            html += '</table></div>';
 
            if (erstzuechter === 'Ja') {
                html += '<p style="margin-top: 15px;"><strong>Als Erstzüchter werden Sie bei der Platzvergabe bevorzugt.</strong></p>';
            }
 
            output.innerHTML = html;
        })
        .catch(function(error) {
            output.innerHTML = '<p class="error">' + error.message + '</p>';
        });
 
    function escapeHtml(text) {
        var div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }
}());
</script>

Schritt 3: E-Mail-Template für Teilnehmer

Erstellen Sie im CMS einen neuen Artikel mit dem Namen emailbestaetigung_seminar:

<p>Sehr geehrte/r {vorname} {nachname},</p>
 
<p>vielen Dank für Ihre Anmeldung zum <strong>Erstzüchterseminar</strong>.</p>
 
<p><strong>Ihre Anmeldedaten:</strong></p>
<ul>
    <li>Name: {vorname} {nachname}</li>
    <li>E-Mail: {email}</li>
    <li>Telefon: {telefon}</li>
    <li>Züchterstatus: {erstzuechter}</li>
</ul>
 
<p><strong>Wichtige Informationen:</strong></p>
<ul>
    <li>Meldeschluss: [Datum einfügen]</li>
    <li>Verfügbare Plätze: 15</li>
    <li>Platzvergabe erfolgt nach Meldeschluss</li>
    <li>Erstzüchter werden bevorzugt berücksichtigt</li>
</ul>
 
<p>Sie erhalten nach dem Meldeschluss eine weitere E-Mail mit der Zu- oder Absage sowie allen weiteren Details zum Seminar.</p>
 
<p>Bei Fragen stehen wir Ihnen gerne zur Verfügung.</p>
 
<p>Mit freundlichen Grüßen<br>
Ihre Geschäftsstelle</p>
 
<hr>
<p style="font-size: 0.9em; color: #666;">
Diese E-Mail wurde automatisch generiert. Bitte antworten Sie nicht direkt auf diese E-Mail.<br>
Bei Rückfragen wenden Sie sich bitte an: gs@musterverein.xyz
</p>

Hinweis: Die Platzhalter in geschweiften Klammern (z. B. {vorname}) werden automatisch durch die entsprechenden Formulardaten ersetzt.

Schritt 4: E-Mail-Template für die Geschäftsstelle

Da die Geschäftsstelle über frm_notify_email automatisch benachrichtigt wird, erhält diese eine Standard-Benachrichtigung. Für eine angepasste Benachrichtigung erstellen Sie einen CMS-Artikel notify_erstzuechterseminar und fügen im Formular folgende Zeile hinzu:

<input name="frm_notify_tpl" value="notify_erstzuechterseminar" type="hidden"/>

Inhalt des Templates notify_erstzuechterseminar:

<p><strong>Neue Anmeldung zum Erstzüchterseminar</strong></p>
 
<p>Es ist eine neue Anmeldung eingegangen:</p>
 
<table border="1" cellpadding="8" cellspacing="0" style="border-collapse: collapse;">
    <tr>
        <th align="left" bgcolor="#f0f0f0">Feld</th>
        <th align="left" bgcolor="#f0f0f0">Wert</th>
    </tr>
    <tr>
        <td><strong>Vorname:</strong></td>
        <td>{vorname}</td>
    </tr>
    <tr>
        <td><strong>Nachname:</strong></td>
        <td>{nachname}</td>
    </tr>
    <tr>
        <td><strong>E-Mail:</strong></td>
        <td>{email}</td>
    </tr>
    <tr>
        <td><strong>Telefon:</strong></td>
        <td>{telefon}</td>
    </tr>
    <tr>
        <td><strong>Adresse:</strong></td>
        <td>{strasse}<br>{plz} {ort}</td>
    </tr>
    <tr>
        <td><strong>Erstzüchter:</strong></td>
        <td><strong style="color: {erstzuechter=Ja?#28a745:#dc3545};">{erstzuechter}</strong></td>
    </tr>
    <tr>
        <td><strong>Bemerkung:</strong></td>
        <td>{bemerkung}</td>
    </tr>
    <tr>
        <td><strong>Anmeldedatum:</strong></td>
        <td>{TIMESTAMP}</td>
    </tr>
</table>
 
<p><strong>Nächste Schritte:</strong></p>
<ul>
    <li>Bei Erstzüchtern: Kontodaten für die Seminargebühr zusenden</li>
    <li>Zahlungseingang prüfen</li>
    <li>Nach Meldeschluss: Platzvergabe durchführen</li>
</ul>
 
<p>Die Anmeldung kann unter <a href="[URL_ZUR_FORMULARVERWALTUNG]">Formulardaten</a> eingesehen werden.</p>

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, nachname, email, telefon, erstzuechter
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:

<p>Sehr geehrte/r {vorname} {nachname},</p>
 
<p>wir freuen uns, Ihnen mitteilen zu können, dass Sie einen <strong>Platz beim Erstzüchterseminar</strong> erhalten haben!</p>
 
<p><strong>Seminardaten:</strong></p>
<ul>
    <li><strong>Datum:</strong> [Datum einfügen]</li>
    <li><strong>Uhrzeit:</strong> [Uhrzeit] bis [Uhrzeit]</li>
    <li><strong>Ort:</strong> [Adresse einfügen]</li>
</ul>
 
<p><strong>Anfahrt:</strong></p>
<p>[Wegbeschreibung oder Link zu Google Maps]</p>
 
<p><strong>Was Sie mitbringen sollten:</strong></p>
<ul>
    <li>Schreibmaterial</li>
    <li>Eigene Verpflegung für die Pausen (Getränke werden gestellt)</li>
    <li>Ggf. Laptop/Tablet für Notizen</li>
</ul>
 
<p><strong>Programm:</strong></p>
<ul>
    <li>09:00 Uhr - Begrüßung und Einführung</li>
    <li>09:30 Uhr - [Thema 1]</li>
    <li>11:00 Uhr - Kaffeepause</li>
    <li>11:30 Uhr - [Thema 2]</li>
    <li>13:00 Uhr - Mittagspause</li>
    <li>14:00 Uhr - [Thema 3]</li>
    <li>16:00 Uhr - Abschluss und Ausgabe der Teilnahmebescheinigungen</li>
</ul>
 
<p><strong>Wichtig:</strong> Bitte bestätigen Sie Ihre Teilnahme bis zum [Datum] per E-Mail an gs@musterverein.xyz</p>
 
<p>Wir freuen uns auf Ihre Teilnahme!</p>
 
<p>Mit freundlichen Grüßen<br>
Ihre Geschäftsstelle</p>

Schritt 7: Template für Absage-E-Mail

Erstellen Sie im CMS einen Artikel absage_erstzuechterseminar:

<p>Sehr geehrte/r {vorname} {nachname},</p>
 
<p>vielen Dank für Ihr Interesse am Erstzüchterseminar.</p>
 
<p>Leider müssen wir Ihnen mitteilen, dass alle verfügbaren Plätze bereits vergeben sind. Die große Nachfrage hat unsere Erwartungen übertroffen, und wir konnten aufgrund der begrenzten Kapazität von 15 Teilnehmern nicht allen Interessenten einen Platz zusagen.</p>
 
<p><strong>Alternative Möglichkeiten:</strong></p>
<ul>
    <li>Sie werden auf die Warteliste gesetzt und bei Absagen bevorzugt berücksichtigt</li>
    <li>Aufgrund der hohen Nachfrage planen wir einen weiteren Termin im [Zeitraum]</li>
    <li>Sie werden automatisch über neue Seminartermine informiert</li>
</ul>
 
<p>Sollten Sie von der Warteliste Gebrauch machen wollen oder Fragen haben, melden Sie sich gerne bei uns.</p>
 
<p>Mit freundlichen Grüßen<br>
Ihre Geschäftsstelle</p>

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 „Anmeldung Erstzüchterseminar“
Exportieren Sie die Liste zur besseren Übersicht

2. Platzvergabe durchführen

Priorisieren Sie Erstzüchter (Filter: erstzuechter = „Ja“)
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/Namensschilder vor
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: Führen Sie vor der Veröffentlichung einen Testlauf mit Testdaten durch
Datenschutz: Informieren Sie über die Verwendung der Daten und holen Sie das Einverständnis ein
E-Mail-Vorlagen: Passen Sie die Platzhalter [Datum einfügen], [Adresse einfügen] etc. vor dem Versand an