it-swarm.com.de

So ändern Sie die Ausgabe der Kontaktformular-7-Erfolgs-/Fehlerantwort

Ich versuche, eine Möglichkeit zu finden, die Ausgabe der Contact Form 7-Antwortfelder zu überschreiben oder zu filtern, die angezeigt werden, wenn ein Formularfehler oder eine Erfolgsmeldung angezeigt wird.

Standardmäßig gibt Contact Form 7 diesen HTML-Code aus, wenn ein Formular erfolgreich gesendet wurde:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
    Thank you for subscribing!
</div>

Tatsächlich möchte ich den Ausgabe-HTML-Code der Antwort so ändern, dass er eine von Bootstrap abzulassende Warnung darstellt:

<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
    Thank you for subscribing!
</div>

Ich habe versucht, die Contact Form 7-Dokumentation zu durchsuchen und den Quellcode des Plugins zu durchsuchen, um den Filter zu finden, den ich für nötig halte, aber die HTML-Ausgabe der Antwort kann nicht geändert werden. Dies ist der Code, den ich ausprobiert habe:

function filter_wpcf7_response_output( $output ){
    // Replace Success CSS Class
    $output = str_replace( ' wpcf7-mail-sent-ok', ' alert alert-success', $output );
    return $output; 
}
add_filter( 'wpcf7_form_response_output', 'filter_wpcf7_response_output', 10, 1 );

Aber es scheint die Ausgabe überhaupt nicht zu ändern ... Jede Hilfe wäre sehr dankbar!

5
Mat

Nachdem ich mir das genauer angesehen hatte, stellte ich fest, dass die angezeigten Antworten über das Kontaktformular 7 AJAX erstellt wurden.

Nach der Kontaktformular 7-Dokumentation zu DOM-Ereignissen konnte ich dies mit dem folgenden JS-Code zum Laufen bringen:

/* Validation Events for changing response CSS classes */
document.addEventListener( 'wpcf7invalid', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-danger');
}, false );
document.addEventListener( 'wpcf7spam', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailfailed', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-warning');
}, false );
document.addEventListener( 'wpcf7mailsent', function( event ) {
    $('.wpcf7-response-output').addClass('alert alert-success');
}, false );
4
Mat