Anleitung Weiterverarbeitung von Formulardaten auf der Bestätigungsseite

Nach der Übermittlung eines Formulars werden die eingegebenen Daten automatisch in einer Session-Variable gespeichert. Dies ermöglicht es, auf der Bestätigungsseite auf die übermittelten Daten zuzugreifen und diese dem Nutzer anzuzeigen oder weiterzuverarbeiten.

Grundprinzip

Der Formularmailer speichert alle übermittelten Formulardaten in der Session-Variable $_SESSION['Formularmailer-Data']. Diese Daten können über die API-Datei api-session-formularmailer.php abgerufen werden.

Ablauf:

Nutzer füllt das Formular aus und sendet es ab
Formularmailer speichert die Daten in der Session
Weiterleitung zur Bestätigungsseite (definiert über frm_forward)
Bestätigungsseite ruft die Daten über die API ab und zeigt diese an

Beispiel 1: Einfaches Kontaktformular

Formular

<form action="cmd.php?id=-45" method="post">
    <input name="formular" type="hidden" value="Kontaktformular" />
    <input name="frm_forward" type="hidden" value="showpage.php?seite=bestaetigung_kontakt" />
    <input name="frm_notify_email" type="hidden" value="info@example.de" />
 
    <div class="mb-3">
        <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="name" name="name" 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="anfrage" class="form-label">Ihre Anfrage <span class="text-danger">*</span></label>
        <textarea class="form-control" id="anfrage" name="anfrage" rows="5" required></textarea>
    </div>
 
    <button type="submit" class="btn btn-primary">Absenden</button>
</form>

Hinweis: Beachten Sie, dass im CMS keine Head-/Body-Tags zulässig sind!

Bestätigungsseite (bestaetigung_kontakt)

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

    <style>
        .confirmation-box {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }
        .data-table {
            width: 100%;
            margin-top: 20px;
        }
        .data-table th {
            text-align: left;
            padding: 8px;
            background-color: #f8f9fa;
            width: 30%;
        }
        .data-table td {
            padding: 8px;
        }
        .loading {
            color: #6c757d;
        }
        .error {
            color: #dc3545;
        }
    </style>
    <div class="confirmation-box">
        <h2>✓ Vielen Dank für Ihre Anfrage!</h2>
        <p>Wir haben folgende Daten von Ihnen erhalten:</p>
        <div id="output" class="loading">Lade Daten...</div>
    </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">' + (json.message || 'Keine Daten verfügbar.') + '</p>';
                        return;
                    }
 
                    var data = json.data || {};
                    var name = data.name || '(nicht angegeben)';
                    var email = data.email || '(nicht angegeben)';
                    var anfrage = data.anfrage || '(nicht angegeben)';
 
                    var html = '<table class="data-table">';
                    html += '<tr><th>Name:</th><td>' + escapeHtml(name) + '</td></tr>';
                    html += '<tr><th>E-Mail:</th><td>' + escapeHtml(email) + '</td></tr>';
                    html += '<tr><th>Anfrage:</th><td>' + escapeHtml(anfrage).replace(/\n/g, '<br>') + '</td></tr>';
                    html += '</table>';
                    html += '<p style="margin-top: 20px;">Wir werden uns schnellstmöglich bei Ihnen melden.</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>

Beispiel 2: Formular mit Checkbox-Auswahl (Arrays)

Dieses Beispiel zeigt ein Anmeldeformular für eine Veranstaltung, bei dem mehrere Workshops ausgewählt werden können.

Formular

<form action="cmd.php?id=-45" method="post">
    <input name="formular" type="hidden" value="Veranstaltungsanmeldung" />
    <input name="frm_forward" type="hidden" value="showpage.php?seite=bestaetigung_anmeldung" />
    <input name="frm_notify_email" type="hidden" value="veranstaltung@example.de" />
 
    <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 class="form-label">Workshop-Auswahl <span class="text-danger">*</span></label>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="workshops[]" value="Grundlagen der Hundeerziehung" id="ws1">
            <label class="form-check-label" for="ws1">Grundlagen der Hundeerziehung</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="workshops[]" value="Agility für Anfänger" id="ws2">
            <label class="form-check-label" for="ws2">Agility für Anfänger</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="workshops[]" value="Erste Hilfe am Hund" id="ws3">
            <label class="form-check-label" for="ws3">Erste Hilfe am Hund</label>
        </div>
        <div class="form-check">
            <input class="form-check-input" type="checkbox" name="workshops[]" value="Hundeernährung" id="ws4">
            <label class="form-check-label" for="ws4">Hundeernährung</label>
        </div>
    </div>
 
    <div class="mb-3">
        <label for="bemerkung" class="form-label">Bemerkungen</label>
        <textarea class="form-control" id="bemerkung" name="bemerkung" rows="3"></textarea>
    </div>
 
    <button type="submit" class="btn btn-primary">Jetzt anmelden</button>
</form>

Bestätigungsseite (bestaetigung_anmeldung)

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

    <style>
        .confirmation-box {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }
        .data-table {
            width: 100%;
            margin-top: 20px;
        }
        .data-table th {
            text-align: left;
            padding: 8px;
            background-color: #f8f9fa;
            width: 30%;
            vertical-align: top;
        }
        .data-table td {
            padding: 8px;
        }
        .workshop-list {
            list-style-type: none;
            padding-left: 0;
            margin: 0;
        }
        .workshop-list li {
            padding: 5px 0;
        }
        .workshop-list li:before {
            content: "✓ ";
            color: #28a745;
            font-weight: bold;
        }
        .loading {
            color: #6c757d;
        }
        .error {
            color: #dc3545;
        }
    </style>
    <div class="confirmation-box">
        <h2>✓ Ihre Anmeldung war erfolgreich!</h2>
        <p>Folgende Daten haben wir von Ihnen erhalten:</p>
        <div id="output" class="loading">Lade Daten...</div>
    </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">' + (json.message || 'Keine Daten verfügbar.') + '</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 bemerkung = data.bemerkung || '(keine Bemerkungen)';
                    var workshops = data.workshops || [];
 
                    // Array-Prüfung: Wenn workshops ein String ist, in Array umwandeln
                    if (typeof workshops === 'string') {
                        workshops = [workshops];
                    }
 
                    var html = '<table class="data-table">';
                    html += '<tr><th>Vorname:</th><td>' + escapeHtml(vorname) + '</td></tr>';
                    html += '<tr><th>Nachname:</th><td>' + escapeHtml(nachname) + '</td></tr>';
                    html += '<tr><th>E-Mail:</th><td>' + escapeHtml(email) + '</td></tr>';
                    html += '<tr><th>Gewählte Workshops:</th><td>';
 
                    if (workshops.length > 0) {
                        html += '<ul class="workshop-list">';
                        for (var i = 0; i < workshops.length; i++) {
                            html += '<li>' + escapeHtml(workshops[i]) + '</li>';
                        }
                        html += '</ul>';
                    } else {
                        html += '<em>Keine Workshops ausgewählt</em>';
                    }
 
                    html += '</td></tr>';
                    html += '<tr><th>Bemerkungen:</th><td>' + escapeHtml(bemerkung).replace(/\n/g, '<br>') + '</td></tr>';
                    html += '</table>';
                    html += '<p style="margin-top: 20px;"><strong>Sie erhalten in Kürze eine Bestätigungs-E-Mail.</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>

Hinweis: Beachten Sie, dass im CMS keine Head-/Body-Tags zulässig sind!

Technische Details

Die Session-Variable

Alle Formulardaten werden in $_SESSION['Formularmailer-Data'] als assoziatives Array gespeichert. Die Schlüssel entsprechen den name-Attributen der Formularfelder.

Beispiel:

// Inhalt von $_SESSION['Formularmailer-Data'] nach dem ersten Formular:
Array (
    [name] => Max Mustermann
    [email] => max@example.de
    [anfrage] => Ich interessiere mich für...
)
 
// Inhalt nach dem zweiten Formular mit Checkboxen:
Array (
    [vorname] => Maria
    [nachname] => Musterfrau
    [email] => maria@example.de
    [workshops] => Array (
        [0] => Grundlagen der Hundeerziehung
        [1] => Erste Hilfe am Hund
    )
    [bemerkung] => Ich freue mich auf die Veranstaltung
)

Die API-Datei

Die Datei api-session-formularmailer.php gibt die Session-Daten als JSON zurück:

<?php
declare(strict_types=1);
 
if (session_status() === PHP_SESSION_NONE)
{
    @session_start();
}
 
header('Content-Type: application/json; charset=utf-8');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
 
if ($_SERVER['REQUEST_METHOD'] !== 'GET')
{
    http_response_code(405);
    header('Allow: GET');
    echo json_encode([
        'success' => false,
        'message' => 'Nur GET-Anfragen sind erlaubt.'
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    exit;
}
 
$data = $_SESSION['Formularmailer-Data'] ?? null;
 
if ($data === null)
{
    http_response_code(404);
    echo json_encode([
        'success' => false,
        'data' => null,
        'message' => 'Keine Formulardaten in dieser Sitzung vorhanden.'
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    exit;
}
 
$payload = json_encode([
    'success' => true,
    'data' => $data
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
 
if ($payload === false)
{
    http_response_code(500);
    echo json_encode([
        'success' => false,
        'message' => 'Fehler bei der JSON-Kodierung.'
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    exit;
}
 
echo $payload;
exit;

JSON-Antwort bei Erfolg:

{
    "success": true,
    "data": {
        "vorname": "Maria",
        "nachname": "Musterfrau",
        "email": "maria@example.de",
        "workshops": ["Grundlagen der Hundeerziehung", "Erste Hilfe am Hund"],
        "bemerkung": "Ich freue mich auf die Veranstaltung"
    }
}

JSON-Antwort bei fehlenden Daten:

{
    "success": false,
    "data": null,
    "message": "Keine Formulardaten in dieser Sitzung vorhanden."
}

Kombination mit E-Mail-Templates

Die Formulardaten können in E-Mail-Templates verwendet werden. Auf der Bestätigungsseite haben Sie Zugriff auf die gleichen Daten und können diese entsprechend anpassen.

Wichtige Hinweise

Session-Lebensdauer: Die Formulardaten bleiben nur für die aktuelle Session verfügbar. Sobald der Nutzer den Browser schließt oder die Session abläuft, sind die Daten nicht mehr abrufbar.
Sicherheit: Alle ausgegeben Daten sollten mit escapeHtml() (JavaScript) bzw. htmlspecialchars() (PHP) gegen XSS-Angriffe geschützt werden.
Arrays: Checkbox-Gruppen und Multi-Select-Felder werden als Arrays übermittelt. Prüfen Sie immer, ob ein Wert ein Array ist, bevor Sie darauf zugreifen.
Leere Werte: Nicht ausgefüllte Formularfelder werden möglicherweise nicht in die Session übernommen. Verwenden Sie daher immer Fallback-Werte.
API-Verfügbarkeit: Die API-Datei api-session-formularmailer.php muss im Root-Verzeichnis Ihrer Installation verfügbar sein.

Fehlerbehebung

Problem	Lösung
„Keine Formulardaten in dieser Sitzung vorhanden“	Stellen Sie sicher, dass das Formular korrekt übermittelt wurde und die Weiterleitung funktioniert hat. Überprüfen Sie, ob Cookies aktiviert sind.
Daten werden nicht angezeigt	Öffnen Sie die Browser-Konsole (F12) und prüfen Sie auf JavaScript-Fehler. Stellen Sie sicher, dass die API-Datei erreichbar ist.
Array-Werte werden nicht korrekt angezeigt	Prüfen Sie, ob der Feldname mit `[]` endet (z. B. `workshops[]`) und ob die JavaScript-Auswertung Arrays korrekt verarbeitet.
Umlaute werden falsch dargestellt	Stellen Sie sicher, dass alle Dateien in UTF-8 codiert sind und die entsprechenden Meta-Tags gesetzt sind.

Inhaltsverzeichnis

Anleitung Weiterverarbeitung von Formulardaten auf der Bestätigungsseite

Grundprinzip

Beispiel 1: Einfaches Kontaktformular

Formular

Bestätigungsseite (bestaetigung_kontakt)

Beispiel 2: Formular mit Checkbox-Auswahl (Arrays)

Formular

Bestätigungsseite (bestaetigung_anmeldung)

Technische Details

Die Session-Variable

Die API-Datei

Kombination mit E-Mail-Templates

Wichtige Hinweise

Fehlerbehebung

Siehe auch