Как изменить контактную форму 7 Вывод ответа об успехе/ошибке [закрыт]

Question

Как изменить контактную форму 7 Вывод ответа об успехе/ошибке [закрыт]

Я пытаюсь найти способ переопределить или отфильтруйте выходные данные полей ответов контактной формы 7, которые отображаются при отображении сообщения об ошибке или успешном выполнении формы.

По умолчанию Контактная форма 7 выводит этот HTML-код при успешной отправке формы:

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

По сути, я хочу изменить выходной HTML-код ответа, чтобы он был предупреждением об отклонении начальной загрузки, например:

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

Я попытался просмотреть документацию по контактной форме 7 и просмотрел исходный код плагинов, чтобы найти фильтр, который, как мне кажется, мне нужен, но я не удается изменить вывод HTML-кода ответа. Это код, который я пробовал:

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

Но, похоже, это вообще не меняет результат... Любая помощь будет очень признательна!

7

twitter-bootstrap filters plugin-contact-form-7

Author: Mat, 2017-10-12

Source

1 answers

score 15 · Accepted Answer

После более глубокого изучения этого вопроса я понял, что отображаемые ответы создаются через контактную форму 7 AJAX.

Итак, следуя документации Контактной формы 7 по событиям DOM, я смог заставить это работать так, как я хотел, со следующим кодом JS:

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