web-dev-qa-db-fra.com

Comment modifier le formulaire de contact 7 Succès/Réponse d'erreur

J'essaie de trouver un moyen de remplacer ou de filtrer la sortie des zones de réponse du formulaire de contact 7 qui s'affichent lorsqu'un message d'erreur de formulaire ou de réussite s'affiche.

Par défaut, le formulaire de contact 7 génère ce code HTML lorsqu'un formulaire est envoyé avec succès:

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

En réalité, je souhaite que le code HTML de sortie de la réponse soit une alerte Bootable pouvant être rejetée, comme suit:

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

J'ai essayé de parcourir la documentation du formulaire de contact 7 et de parcourir le code source des plug-ins pour trouver le filtre dont je pense avoir besoin, mais je ne parviens pas à modifier la sortie HTML de la réponse. C'est le code que j'ai essayé:

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 );

Mais cela ne semble pas changer le résultat ... Toute aide serait grandement appréciée!

filterstwitter-bootstrapplugin-contact-form-7
5
Mat

Après un examen plus approfondi, j’ai réalisé que les réponses affichées étaient générées via le formulaire de contact 7 AJAX.

Ainsi, suite à la documentation du formulaire de contact 7 sur les événements DOM , j'ai pu obtenir le résultat escompté avec le code JS suivant:

/* 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