Для настройки интеграции формы Contact Form 7 (CF7) с всплывающим окном FancyBox и предотвращения перезагрузки страницы при отправке формы, вы можете использовать следующий подход:
1. Установите и активируйте плагин "Contact Form 7".
2. Установите и активируйте плагин "WordPress FancyBox". Этот плагин добавляет возможность использования FancyBox для всплывающих окон.
3. Создайте заполнители для формы CF7 и скопируйте их шорткоды. Например, используйте `[contact-form-7 id="1234" title="Contact Form"]`, где `1234` - это идентификатор вашей формы CF7.
4. Создайте новую страницу в WordPress и добавьте этот шорткод формы CF7 на страницу.
5. Создайте новый файл JavaScript (например, `custom.js`) и добавьте следующий код:
```javascript
// Инициализация Fancybox при загрузке страницы
$(document).ready(function() {
$(".fancybox").fancybox();
});
// Отправка формы CF7 через AJAX и переинициализация формы после отправки
$(document).on('submit', '.wpcf7-form', function(event) {
event.preventDefault(); // Предотвращаем перезагрузку страницы при отправке формы
var form = $(this);
var formData = new FormData(form[0]);
$.ajax({
url: form.attr('action'),
type: form.attr('method'),
data: formData,
processData: false,
contentType: false,
success: function(response) {
// Переинициализация формы CF7 после отправки
form.find('input[type="text"], input[type="email"], textarea').val('');
form.find('.wpcf7-response-output').hide().empty();
// Открытие всплывающего окна с содержимым ответа
$.fancybox.open(response);
}
});
});
```
6. Подключите файл JavaScript `custom.js` к вашей теме WordPress. Для этого вставьте следующий код в файл `functions.php` вашей темы:
```php
function custom_scripts() {
wp_enqueue_script('custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');
```
7. Теперь при отправке формы CF7 на странице, она будет отправляться через AJAX, а страница не будет перезагружаться. Вместо этого ответ от сервера будет открываться во всплывающем окне FancyBox. После отправки формы CF7, форма будет автоматически очищена и готова к повторному использованию.