Come modificare l'output delle risposte di Successo/Errore in Contact Form 7

Question

Come modificare l'output delle risposte di Successo/Errore in Contact Form 7

13 ott 2017, 01:34:51

Visualizzazioni: 57.1K

Voti: 7

Sto cercando un modo per sovrascrivere o filtrare l'output dei box di risposta di Contact Form 7 che vengono mostrati quando appare un messaggio di errore o di successo.

Di default, Contact Form 7 genera questo HTML quando un form viene inviato con successo:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
    Grazie per esserti iscritto!
</div>

In pratica, voglio modificare l'output HTML della risposta per trasformarlo in un alert eliminabile di Bootstrap come questo:

<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
    Grazie per esserti iscritto!
</div>

Ho cercato nella documentazione di Contact Form 7 e ho esaminato il codice sorgente del plugin per trovare il filtro che penso mi serva, ma non riesco a far cambiare l'output HTML della risposta. Questo è il codice che ho provato:

function filter_wpcf7_response_output( $output ){
    // Sostituisce la classe CSS di Successo
    $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 );

Ma non sembra modificare l'output in alcun modo... Qualsiasi aiuto sarebbe molto apprezzato!

Mat

1.65K

filtri twitter bootstrap plugin contact form 7

Commenti

Per il momento ho aggiunto alcune regole CSS per le classi standard di Contact Form 7 in modo che le notifiche di risposta abbiano lo stesso stile degli alert di Bootstrap. Ma sono ancora interessato a sapere come modificare l'output con il filtro sopra menzionato.

Mat

13 ott 2017 15:15:24

Uhm, perché la mia domanda è stata votata negativamente?

Mat

17 ott 2017 00:40:03

Chiunque abbia votato per chiudere questa domanda merita un bel ceffone. Seriamente.

Brett

25 dic 2018 12:46:14

Tutte le risposte alla domanda

Commenti

Esattamente quello che stavo cercando - grazie amico, sei un mito!

Brett

25 dic 2018 12:47:30

Questo è buono... Ma perché usare jQuery per il selettore ma non per l'event listener? Usalo per entrambi o per nessuno dei due

dgo

17 mag 2020 21:35:02

Sfortunatamente, non ci sono filtri sui messaggi visualizzati, quindi dobbiamo gestirlo via JavaScript. Questa risposta è finora l'unico modo per ottenerlo!

Maxime Culea

17 nov 2020 17:47:33

Probabilmente dovresti rimuovere le classi .alert-* prima di aggiungere una nuova classe in ogni listener di eventi per evitare di aggiungere più classi .alert-* dopo aver attivato più di un evento durante l'interazione con il form.

Puoi aggiungere questo alla catena prima di .addClass(): .removeClass(function (index, className) { return (className.match (/(^|\s)alert-\S+/g) || []).join(' '); })

Tieni anche presente che potresti comunque dover sovrascrivere gli stili per .wpcf7-response-output nel foglio di stile del tuo tema, poiché il plugin utilizza stili per quella classe che modificano alcuni degli stili di bootstrap.

Talk Nerdy To Me

19 nov 2020 21:56:20

Piccolo hack carino: invece di aggiungere il JS al tuo tema/plugin puoi inserirlo nella definizione del modulo di contatto (usando i tag <script>...</script>).

Felix

19 feb 2021 12:42:34

Mat 1.65K · Accepted Answer · 2017-10-13T16:09:11Z

Dopo un'analisi più approfondita, ho capito che le risposte visualizzate sono generate tramite l'AJAX di Contact Form 7.

Quindi, seguendo la documentazione di Contact Form 7 sugli Eventi DOM, sono riuscito a far funzionare tutto come desiderato con il seguente codice JS:

/* Eventi di validazione per modificare le classi CSS delle risposte */
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 );