Form-Mailer Beispiel: Züchterseminar

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

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.

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"/>

1. formular = Name des Formulares
2. frm_forward = Seite auf die der Nutzer weitergeleitet wird, sobald er die Daten abgesendet hat
3. frm_notify_email = Email-Adresse die über eingehende Anmeldungen informiert wird
4. frm_confirm_tpl = Name des Email-Templates welches an den Teilnehmer verschickt wird, sobald er die Daten abgesendet hat
5. frm_confirm_emailfield = Name des Feldes, welches die Email-Adresse des Teilnehmers enthält
6. 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>

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>

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.

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>

Um die Anmeldungen komfortabel zu verwalten, erstellen Sie unter Sonstiges → Formulare → Formularkonfiguration einen neuen Eintrag:

Dies ermöglicht Ihnen:

• Eine übersichtliche Liste aller Anmeldungen
• Filterung nach Erstzüchtern
• Sortierung nach Anmeldedatum

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>

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>

Nach Ablauf der Meldefrist gehen Sie wie folgt vor:

• Rufen Sie Sonstiges → Formulare → Formulardaten auf
• Filtern Sie nach dem Formular „Anmeldung Erstzüchterseminar“
• Exportieren Sie die Liste zur besseren Übersicht

• 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)

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

• Erstellen Sie die Teilnehmerliste über die Export-Funktion
• Bereiten Sie Platzkarten/Namensschilder vor
• Halten Sie Teilnahmebescheinigungen für den Seminartag bereit

Dieses Beispiel zeigt einen vollständigen Workflow für die Organisation eines Seminars mit dem Formular-Mailer:

1. ✓ Online-Formular mit allen relevanten Daten
2. ✓ Automatische Bestätigungs-E-Mail an Teilnehmer
3. ✓ Benachrichtigung der Geschäftsstelle bei jeder Anmeldung
4. ✓ Anzeige der übermittelten Daten auf der Bestätigungsseite
5. ✓ Übersichtliche Verwaltung aller Anmeldungen über die Formularkonfiguration
6. ✓ Filterung und Priorisierung (Erstzüchter)
7. ✓ Zu- und Absage-E-Mails nach Meldeschluss
8. ✓ Export-Funktion für Teilnehmerlisten

Durch die Verwendung universeller Templates können Sie dieses System leicht für andere Seminare, Workshops oder Veranstaltungen anpassen.

• 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