Pop-up vor dem Senden

Um eine WordPress-Funktion zu erstellen, die die Daten aus einem Contact Form 7-Formular in einem Pop-up-Fenster anzeigt, bevor das Formular gesendet wird, können Sie folgendes Vorgehen umsetzen:

Schritt 1: JavaScript für das Pop-up erstellen

Zunächst müssen wir ein JavaScript-Skript erstellen, das die Formularfelder sammelt und in einem Pop-up anzeigt, bevor das Formular tatsächlich gesendet wird.

function cf7_popup_before_submit() {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wp_add_inline_script('contact-form-7', "
            document.addEventListener('DOMContentLoaded', function() {
                const forms = document.querySelectorAll('.wpcf7 form');
                
                forms.forEach(function(form) {
                    form.addEventListener('submit', function(event) {
                        event.preventDefault(); // Verhindert das direkte Senden des Formulars
                        
                        let formData = '';
                        const inputs = form.querySelectorAll('input, textarea, select');

                        inputs.forEach(function(input) {
                            if (input.type !== 'submit' && input.type !== 'button') {
                                formData += '<p><strong>' + input.name + ':</strong> ' + input.value + '</p>';
                            }
                        });

                        // Erstellen und anzeigen des Pop-ups
                        const popup = document.createElement('div');
                        popup.innerHTML = '<div class=\"cf7-popup-overlay\" style=\"position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; justify-content:center; align-items:center;\"><div class=\"cf7-popup-content\" style=\"background:#fff; padding:20px; border-radius:5px; width:80%; max-width:600px;\">' + formData + '<button id=\"cf7-confirm\" style=\"margin-top:20px; padding:10px 20px;\">Bestätigen und Senden</button> <button id=\"cf7-cancel\" style=\"margin-top:20px; padding:10px 20px; margin-left:10px;\">Abbrechen</button></div></div>';
                        document.body.appendChild(popup);

                        // Bestätigen-Button: Sendet das Formular
                        document.getElementById('cf7-confirm').addEventListener('click', function() {
                            document.body.removeChild(popup);
                            form.submit(); // Sendet das Formular ab
                        });

                        // Abbrechen-Button: Schließt das Pop-up
                        document.getElementById('cf7-cancel').addEventListener('click', function() {
                            document.body.removeChild(popup);
                        });
                    });
                });
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'cf7_popup_before_submit');

Schritt 2: Erklärung der Funktion

• JavaScript-Eventlistener: Der Code fügt einen submit-Eventlistener zu allen Contact Form 7-Formularen hinzu. Dieser verhindert zunächst das Absenden des Formulars, um die eingegebenen Daten in einem Pop-up anzuzeigen.
• Formulardaten sammeln: Es werden alle relevanten Formularfelder gesammelt (außer Schaltflächen) und in einem HTML-Pop-up angezeigt.
• Pop-up Erstellen: Das Pop-up wird mit einem Overlay angezeigt und enthält die gesammelten Formulardaten sowie zwei Schaltflächen: „Bestätigen und Senden“ und „Abbrechen“.
• Formular senden: Wenn der Benutzer auf „Bestätigen und Senden“ klickt, wird das Pop-up geschlossen und das Formular wird normal gesendet.
• Abbrechen: Wenn der Benutzer auf „Abbrechen“ klickt, wird das Pop-up geschlossen und das Formular bleibt unverändert.

Schritt 3: Einfügen in WordPress

• PHP-Code einfügen: Kopieren Sie den oben genannten PHP-Code und fügen Sie ihn in die functions.php Ihres aktiven Themes oder in ein benutzerdefiniertes Plugin ein.

Schritt 4: Styling anpassen (optional)

Falls Sie das Aussehen des Pop-ups anpassen möchten, können Sie das CSS im HTML-Code des Pop-ups direkt anpassen oder zusätzliche CSS-Regeln in Ihre style.css-Datei einfügen.

Nutzung:

Nach der Implementierung wird das Contact Form 7-Formular nicht sofort gesendet, sondern zeigt zunächst ein Pop-up-Fenster mit den eingegebenen Daten an. Der Benutzer hat dann die Möglichkeit, die Eingaben zu überprüfen und entweder das Formular abzusenden oder den Vorgang abzubrechen.

Hinweis:

• Diese Methode verwendet JavaScript und erfordert, dass der Benutzer JavaScript im Browser aktiviert hat. Achten Sie darauf, dass das Formular ohne JavaScript korrekt funktioniert, falls erforderlich.