Leeren der Felder ohne senden

Wenn Sie möchten, dass alle Felder eines Contact Form 7-Formulars geleert werden, ohne dass das Formular tatsächlich gesendet wird, können Sie dies mit einer einfachen JavaScript-Funktion erreichen. Dies könnte nützlich sein, wenn Sie z.B. einen „Reset“-Button implementieren möchten, der die Eingaben löscht, ohne das Formular abzusenden.

Schritt 1: JavaScript-Funktion für das Leeren der Felder

Zuerst erstellen wir eine Funktion, die alle Felder des Formulars leert, wenn ein bestimmter Button angeklickt wird.

function cf7_clear_fields() {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wp_add_inline_script('contact-form-7', "
            document.addEventListener('DOMContentLoaded', function() {
                const resetButton = document.querySelector('.cf7-reset-button');
                
                if(resetButton) {
                    resetButton.addEventListener('click', function(event) {
                        event.preventDefault(); // Verhindert das Absenden des Formulars
                        const form = this.closest('form');
                        form.reset(); // Setzt alle Felder des Formulars zurück
                    });
                }
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'cf7_clear_fields');

Schritt 2: Reset-Button zum Formular hinzufügen

Um die Funktion auszulösen, müssen Sie dem Contact Form 7-Formular einen speziellen Button hinzufügen, den die Benutzer anklicken können, um die Felder zu leeren.

In Ihrem Contact Form 7-Formular könnten Sie folgenden Button hinzufügen:

<p>
    [submit "Senden"]
    <button type="button" class="cf7-reset-button">Felder leeren</button>
</p>

Schritt 3: Erklärung der Funktion

• event.preventDefault(): Verhindert das Standardverhalten des Buttons, also das Absenden des Formulars.
• form.reset(): Setzt alle Felder des Formulars zurück, ohne die Daten zu senden.
• .cf7-reset-button: Diese Klasse identifiziert den Button, der zum Leeren der Felder verwendet wird.

Schritt 4: Einfügen in WordPress

• Einfügen: Kopieren Sie den PHP-Code und fügen Sie ihn in die functions.php Ihres aktiven Themes oder in ein benutzerdefiniertes Plugin ein.
• Hinzufügen: Fügen Sie den Reset-Button zu Ihrem Contact Form 7-Formular hinzu, wie oben gezeigt.

Nutzung:

Nach der Implementierung wird ein neuer Button im Formular angezeigt, mit dem der Benutzer alle Felder zurücksetzen kann, ohne das Formular abzusenden.

Diese Methode bietet eine klare Möglichkeit, das Formular zurückzusetzen, während die Kontrolle vollständig bei den Benutzern bleibt.

function cf7_clear_fields() {
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wp_add_inline_script('contact-form-7', "
            document.addEventListener('DOMContentLoaded', function() {
                const resetButton = document.querySelector('.cf7-reset-button');
                
                if(resetButton) {
                    resetButton.addEventListener('click', function(event) {
                        event.preventDefault(); // Verhindert das Absenden des Formulars
                        const form = this.closest('form');
                        form.reset(); // Setzt alle Felder des Formulars zurück
                    });
                }
            });
        ");
    }
}
add_action('wp_enqueue_scripts', 'cf7_clear_fields');

Schritt 2: Reset-Button zum Formular hinzufügen

Um die Funktion auszulösen, müssen Sie dem Contact Form 7-Formular einen speziellen Button hinzufügen, den die Benutzer anklicken können, um die Felder zu leeren.

In Ihrem Contact Form 7-Formular könnten Sie folgenden Button hinzufügen:

<p>
    [submit "Senden"]
    <button type="button" class="cf7-reset-button">Felder leeren</button>
</p>

Schritt 3: Erklärung der Funktion

• event.preventDefault(): Verhindert das Standardverhalten des Buttons, also das Absenden des Formulars.
• form.reset(): Setzt alle Felder des Formulars zurück, ohne die Daten zu senden.
• .cf7-reset-button: Diese Klasse identifiziert den Button, der zum Leeren der Felder verwendet wird.

Schritt 4: Einfügen in WordPress

• Einfügen: Kopieren Sie den PHP-Code und fügen Sie ihn in die functions.php Ihres aktiven Themes oder in ein benutzerdefiniertes Plugin ein.
• Hinzufügen: Fügen Sie den Reset-Button zu Ihrem Contact Form 7-Formular hinzu, wie oben gezeigt.

Nutzung:

Nach der Implementierung wird ein neuer Button im Formular angezeigt, mit dem der Benutzer alle Felder zurücksetzen kann, ohne das Formular abzusenden.

Diese Methode bietet eine klare Möglichkeit, das Formular zurückzusetzen, während die Kontrolle vollständig bei den Benutzern bleibt.