0

Здравствуйте, подскажите, пожалуйста как в Contact Form 7, после нажатия на кнопку "Отправить", изменить ajax-loader на свой?

Раньше делал отправку формы не через плагин, а просто свой php обработчик, то там было несколько проще в этом плане.

Стандартно он находится возле кнопки отправки, как spanс background-image:введите сюда описание изображения

Раньше я вообще писал для него целый HTML блок, так как делал на CSS:

<!--Loader-->
<div id="loader">
    <div id="circularG">
        <div id="circularG_1" class="circularG"></div>
        <div id="circularG_2" class="circularG"></div>
        <div id="circularG_3" class="circularG"></div>
        <div id="circularG_4" class="circularG"></div>
        <div id="circularG_5" class="circularG"></div>
        <div id="circularG_6" class="circularG"></div>
        <div id="circularG_7" class="circularG"></div>
        <div id="circularG_8" class="circularG"></div>
    </div>
</div>

введите сюда описание изображения

И как можно также полностью убрать стандартное сообщение об успешной отправке, и подключить свое собственное окно благодарности? Спасибо

2
  • Картинку что ли? И ещё: одна задача/проблема: один вопрос(топик)
    – SeVlad
    18 фев 2018 в 7:06
  • ajax-loader заменить - вообще не вопрос. Замените на свой код css, например. 18 фев 2018 в 10:52

1 ответ 1

1

Чтобы вывести своё окно благодарности, надо использовать событие wpcf7mailsent. Вот примерный код на JQuery

$('.popup-form').on('wpcf7mailsent', function () {
    var sentPopup = $("#sent_popup");
    if (sentPopup.length) {
        // $.fancybox.close();
        setTimeout(function () {
            $.fancybox(sentPopup.closest('.fancybox-hidden').html()); // Показать окно благодарности
            // Клик на кнопке "Ожидаю ответа" закрывает попап
            $('#fancybox-content .waiting-btn').on('click', function (event) {
                event.preventDefault();
                $.fancybox.close();
            });
        }, 1000);
    }
});

Здесь использован плагин Easy FancyBox. Разметка html под окно благодарности:

<div class="fancybox-hidden" style="display: none;">
    <div id="sent_popup" class="popup-form">Здесь ваша форма</div>
</div>

В форме кнопка с классом .waiting-btn, по клику на которую закрывается это всплывающее окно.

Таймаут в коде JQuery нужен был, потому что саму contact form 7 я выводил во всплывающем окне, по событию wpcf7mailsent закрывал его (закомментированная строка), и надо было подождать, пока fancybox "очухается". Без таймаута после закрытия окна открыть новое не получалось. Вы можете все это выкинуть. Оставил для примера, вдруг захотите и саму contact form 7 выводить во всплывающем окне.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.