Для связывания Contact Form 7 (CF7) с всплывающим окном fancybox без перезагрузки страницы при отправке, вам понадобятся несколько шагов. Далее я подробно опишу каждый из них.
Шаг 1: Установка и подключение библиотек
На самом первом шаге вам необходимо установить и подключить самые последние версии Contact Form 7 и FancyBox на вашу веб-страницу. Это можно сделать с помощью следующих шагов:
1. Скачайте и установите плагин Contact Form 7 с официального репозитория WordPress.
2. Активируйте плагин Contact Form 7 в разделе «Плагины» в панели администратора WordPress.
3. Скачайте и подключите библиотеку FancyBox на вашу веб-страницу. Вы можете использовать либо версию JavaScript, либо CSS библиотеки FancyBox. Вы также можете использовать CDN, чтобы подключить библиотеку. Используйте следующую строку в вашем HTML-коде:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
Шаг 2: Создание формы CF7
После успешной установки и подключения CF7 вы можете создать свою форму. Вам понадобятся следующие шаги:
1. Перейдите в раздел «Контакты» в панели администратора WordPress и нажмите на «Добавить новый».
2. Создайте все необходимые поля для вашей формы, используя метки CF7. Например, вы можете добавить поле для имени, адреса электронной почты и сообщения с помощью следующего кода:
[text* your-name placeholder "Имя"] [email* your-email placeholder "Адрес электронной почты"] [textarea* your-message placeholder "Сообщение"] [submit "Отправить"]
3. Нажмите на кнопку «Сохранить» для сохранения изменений.
Шаг 3: Добавление JavaScript для связи CF7 с FancyBox
На этом шаге вам нужно добавить JavaScript-код, который будет связывать CF7 с FancyBox. Используйте следующий код:
// Параметры настройки FancyBox var fancybox = { animationEffect: 'fade', transitionDuration: 800, iframe: { css: { width: '600px', height: '400px' } } }; // Подключение события на отправку формы CF7 document.addEventListener('wpcf7mailsent', function(event) { // Отмена перезагрузки страницы event.preventDefault(); // Открытие всплывающего окна fancybox $.fancybox.open('<h2>Спасибо!</h2><p>Ваше сообщение было успешно отправлено.</p>', fancybox); }, false);
Шаг 4: Добавление CSS для всплывающего окна FancyBox
Добавьте следующий CSS-код для стилизации всплывающего окна FancyBox:
.fancybox-slide-down { display: none; background: #fff; padding: 20px; width: 400px; text-align: center; } .fancybox-slide-down h2 { margin-top: 0; } .fancybox-slide-down p { margin-bottom: 0; }
Шаг 5: Тестирование
Теперь вы можете протестировать связку CF7 и FancyBox. Перейдите на вашу веб-страницу с формой CF7, заполните ее и отправьте. Вы должны увидеть всплывающее окно FancyBox с сообщением о успешной отправке формы без перезагрузки страницы.
Это все! Теперь у вас есть грамотно связанная Contact Form 7 с всплывающим окном FancyBox без перезагрузки страницы при отправке.