Как изменить вывод успешного/ошибочного ответа в Contact Form 7

Question

Как изменить вывод успешного/ошибочного ответа в Contact Form 7

13 окт. 2017 г., 01:34:51

Просмотры: 57.1K

Голосов: 7

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

По умолчанию Contact Form 7 выводит следующий HTML при успешной отправке формы:

<div class="wpcf7-response-output wpcf7-display-none wpcf7-mail-sent-ok" style="display: block;" role="alert">
    Спасибо за подписку!
</div>

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

<div class="wpcf7-response-output wpcf7-display-none alert alert-success" role="alert">
    Спасибо за подписку!
</div>

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

function filter_wpcf7_response_output( $output ){
    // Заменяем CSS класс успешного ответа
    $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 );

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

Mat

1.65K

фильтры twitter bootstrap плагин contact form 7

Комментарии

Я временно добавил несколько CSS правил для стандартных классов Contact Form 7, чтобы уведомления о ответах выглядели так же, как Bootstrap алерты. Но мне всё ещё интересно узнать, как модифицировать вывод с помощью указанного выше фильтра.

Mat

13 окт. 2017 г. 15:15:24

Эмм, почему мой вопрос получил отрицательный голос?

Mat

17 окт. 2017 г. 00:40:03

Тому, кто проголосовал за закрытие этого вопроса, нужно хорошенько дать по башке. Серьёзно.

Brett

25 дек. 2018 г. 12:46:14

Все ответы на вопрос

Комментарии

Именно то, что я искал - спасибо, дружище, легенда!

Brett

25 дек. 2018 г. 12:47:30

Это хорошо... Но почему использовать jQuery для селектора, но не для обработчика событий? Используйте его для обоих или ни для чего

dgo

17 мая 2020 г. 21:35:02

К сожалению, здесь нет фильтров для отображаемых сообщений, поэтому приходится делать это через JavaScript. Этот ответ пока единственный способ добиться этого!

Maxime Culea

17 нояб. 2020 г. 17:47:33

Вероятно, стоит удалить классы .alert-* перед добавлением нового класса в каждом обработчике событий, чтобы избежать добавления нескольких классов .alert-* при срабатывании более одного события во время взаимодействия с формой.

Вы можете добавить это в цепочку перед .addClass(): .removeClass(function (index, className) { return (className.match (/(^|\s)alert-\S+/g) || []).join(' '); })

Также имейте в виду, что вам, возможно, всё ещё придётся переопределить стили для .wpcf7-response-output в таблице стилей вашей темы, так как плагин использует стили для этого класса, которые изменяют некоторые стили Bootstrap.

Talk Nerdy To Me

19 нояб. 2020 г. 21:56:20

Небольшой лайфхак: Вместо добавления JS в вашу тему/плагин, вы можете поместить его в определение контактной формы (используя теги <script>...</script>).

Felix

19 февр. 2021 г. 12:42:34

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

Более детально изучив этот вопрос, я понял, что отображаемые ответы генерируются через AJAX в Contact Form 7.

Следуя документации Contact Form 7 по DOM событиям, мне удалось добиться желаемого результата с помощью следующего JS кода:

/* События валидации для изменения CSS классов ответов */
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 );