Cum să modifici mesajele de Succes/Eroare în Contact Form 7

Question

Cum să modifici mesajele de Succes/Eroare în Contact Form 7

13 oct. 2017, 01:34:51

Vizualizări: 57.1K

Voturi: 7

Încerc să găsesc o modalitate de a suprascrie sau filtra afișarea casetelor de răspuns din Contact Form 7 care sunt arătate când apare o eroare sau un mesaj de succes.

În mod implicit, Contact Form 7 generează acest HTML când un formular este trimis cu succes:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
    Vă mulțumim pentru abonare!
</div>

Practic, vreau să schimb codul HTML al răspunsului pentru a fi o alertă Bootstrap care poate fi închisă, astfel:

<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
    Vă mulțumim pentru abonare!
</div>

Am încercat să caut prin documentația Contact Form 7 și am verificat codul sursă al plugin-ului pentru a găsi filtrul de care cred că am nevoie, dar nu reușesc să schimb afișarea HTML a răspunsului. Acesta este codul pe care l-am încercat:

function filter_wpcf7_response_output( $output ){
    // Înlocuiește clasa CSS pentru Succes
    $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 );

Dar se pare că nu modifică deloc rezultatul... Orice ajutor ar fi foarte apreciat!

Mat

1.65K

filtre twitter bootstrap formular contact 7

Comentarii

Pentru moment, am adăugat câteva reguli CSS pentru clasele standard Contact Form 7, astfel încât notificările de răspuns să fie stilizate la fel ca alertele Bootstrap. Dar totuși sunt interesat să aflu cum să modific rezultatul cu filtrul menționat mai sus.

Mat

13 oct. 2017 15:15:24

Hmmm, de ce a fost votată în jos întrebarea mea?

Mat

17 oct. 2017 00:40:03

Cine a votat pentru închiderea acestei discuții merită o palmă zdravănă. Serios acum.

Brett

25 dec. 2018 12:46:14

Toate răspunsurile la întrebare

Comentarii

Exact ceea ce căutam - mulțumesc, omule, ești legendar!

Brett

25 dec. 2018 12:47:30

Acest cod este bun... Dar de ce folosești jQuery pentru selector dar nu și pentru event listener? Folosește-l pentru ambele sau pentru niciunul.

dgo

17 mai 2020 21:35:02

Din păcate, nu există filtre pentru mesajele afișate, așa că trebuie să gestionăm asta în JavaScript. Acest răspuns este deocamdată singura modalitate de a realiza acest lucru!

Maxime Culea

17 nov. 2020 17:47:33

Probabil ar trebui să eliminați clasele .alert-* înainte de a adăuga o nouă clasă în fiecare ascultător de evenimente pentru a preveni adăugarea mai multor clase .alert-* după ce declanșați mai multe evenimente în timpul interacțiunii cu formularul.

Puteți adăuga aceasta în lanț înainte de .addClass(): .removeClass(function (index, className) { return (className.match (/(^|\s)alert-\S+/g) || []).join(' '); })

De asemenea, rețineți că s-ar putea să fie necesar să suprascrieți stilurile pentru .wpcf7-response-output în fișierul de stiluri al temei, deoarece plugin-ul folosește stiluri pentru acea clasă care modifică unele dintre stilurile Bootstrap.

Talk Nerdy To Me

19 nov. 2020 21:56:20

Un mic hack util: În loc să adăugați JS în tema/plugin, puteți să-l includeți direct în definiția formularului de contact (folosind tag-urile <script>...</script>).

Felix

19 feb. 2021 12:42:34

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

După ce am analizat mai în detaliu acest aspect, am realizat că răspunsurile afișate sunt generate prin intermediul Contact Form 7 AJAX.

Așadar, urmărind documentația Contact Form 7 despre Evenimente DOM, am reușit să fac acest lucru să funcționeze conform dorințelor mele cu următorul cod JS:

/* Evenimente de validare pentru modificarea claselor CSS ale răspunsurilor */
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 );