Современные сайты на WordPress всё чаще используют блоковый редактор Gutenberg, который позволяет создавать контент гибко и удобно. Если вы работаете с плагином WPForms, то важно понимать, как правильно вставлять формы в блоки редактора, чтобы обеспечить корректное отображение и функциональность. В этой статье мы разберём несколько способов вставки форм WPForms в Gutenberg, а также рассмотрим тонкости, которые могут возникнуть при этом.
Возможности вставки WPForms в Gutenberg
WPForms интегрируется с Gutenberg через собственные блоки, шорткоды и PHP-функции, что даёт несколько вариантов вставки форм:
- Использование встроенного блока WPForms в редакторе;
- Вставка шорткода формы через блок "Шорткод";
- Программная вставка формы через PHP и хуки в шаблонах.
Каждый метод имеет свои преимущества и подходит под разные задачи. Рассмотрим их подробнее.
Блок WPForms в Gutenberg: простой способ вставки формы
Самый удобный вариант — использовать официальный блок WPForms, который добавляется вместе с плагином. Чтобы вставить форму:
- Откройте страницу или запись в редакторе Gutenberg;
- Нажмите на кнопку добавления блока (+);
- В поиске введите "WPForms";
- Выберите блок "WPForms";
- В выпадающем списке выберите нужную форму из доступных;
- Сохраните или опубликуйте изменения.
Этот способ автоматически вставляет форму и корректно обрабатывает все её настройки, включая скрипты и стили. При этом форма остаётся полностью интерактивной и готовой к отправке.
Если блок WPForms отсутствует, убедитесь, что плагин активен и обновлён до последней версии.
Советы по использованию блока WPForms
Иногда в визуальном редакторе форма может отображаться не так, как на фронте сайта. Это связано с тем, что некоторые стили подключаются только на публичной части. Чтобы проверить реальный вид, всегда смотрите страницу в режиме предпросмотра или на опубликованном сайте.
Также в настройках блока можно задать дополнительные CSS-классы для кастомной стилизации.
Вставка формы через шорткод в Gutenberg
Если по какой-то причине блок WPForms не подходит, можно использовать стандартный блок "Шорткод" для вставки формы. Для этого:
- В админке WordPress перейдите в WPForms → Все формы;
- Скопируйте шорткод нужной формы, например
[wpforms id="123"]; - В редакторе Gutenberg добавьте блок "Шорткод";
- Вставьте скопированный шорткод;
- Сохраните изменения.
Этот метод универсален и работает в любых местах, где поддерживается шорткод. Однако он не даёт визуального предпросмотра формы в редакторе, что может быть неудобно.
Использование шорткода с параметрами
WPForms позволяет передавать параметры в шорткод для динамического управления формой. Например, можно передать значения для полей через GET-параметры или программно. Пример шорткода с атрибутом для скрытого поля:
[wpforms id="123" field_value="value"]Для более сложной динамики лучше использовать хуки и PHP — о них далее.
Программная вставка формы WPForms через PHP в шаблонах
Иногда требуется вывести форму вне контента страниц, например, в шаблонах темы или кастомных блоках. Для этого используется PHP-функция wpforms_display(). Чтобы вставить форму с ID 123, добавьте в шаблон код:
<?php echo wpforms_display( 123 ); ?>Также можно использовать функцию do_shortcode():
<?php echo do_shortcode( '[wpforms id="123"]' ); ?>Программный вывод даёт полный контроль над разметкой и позиционированием формы.
Пример кастомного блока Gutenberg с формой WPForms
Если вы создаёте собственный блок в Gutenberg с помощью React, можно вывести форму через PHP-рендеринг или шорткод. Пример PHP-кода для рендера формы внутри блока:
function wpformsru_render_custom_block() {
return wpforms_display( 123 );
}Затем зарегистрируйте блок и назначьте функцию рендеринга. Это позволит интегрировать WPForms в пользовательские решения.
Оптимизация и устранение возможных проблем
Конфликты с кешированием и оптимизацией скриптов
Формы WPForms используют JavaScript для валидации и отправки. При использовании плагинов кеширования (например, WP Rocket, W3 Total Cache) или оптимизации JS стоит убедиться, что скрипты WPForms не минифицируются и не объединяются некорректно, иначе форма может перестать работать.
Рекомендуется добавить исключения для скриптов WPForms или отключить оптимизацию на страницах с формами.
Проблемы с отображением в редакторе Gutenberg
Если форма в блоке WPForms не отображается или видна как пустой блок, попробуйте следующее:
- Обновить плагин WPForms;
- Отключить сторонние плагины, которые могут влиять на редактор;
- Очистить кеш браузера и сайта;
- Использовать режим отладки WordPress для выявления ошибок.
Дополнительные советы и полезные плагины для работы с WPForms и Gutenberg
Для расширения функциональности форм и их интеграции с Gutenberg можно использовать:
- Clearfy Pro — оптимизация работы WordPress и плагинов, включая WPForms;
- WPRemark — улучшение комментариев и форм обратной связи;
- Тема Reboot — современная тема с отличной совместимостью с WPForms и Gutenberg.
Эти инструменты помогут сделать формы более удобными и адаптивными.