WPForms: как создать уникальный виджет формы на основе шорткода с параметрами

Автор: Алексей Борисов | Опубликовано: 31.12.2025

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

Зачем создавать кастомный виджет для WPForms

Стандартные инструменты WordPress и WPForms позволяют вставлять формы с помощью шорткодов [wpforms id="123"], но если вам нужно, чтобы одна и та же форма в разных местах сайта вела себя по-разному (например, менялся заголовок, скрывались поля, менялись параметры), то простой шорткод уже недостаточно.

Создание собственного виджета WordPress с поддержкой передачи параметров в шорткод WPForms даёт следующие преимущества:

Удобство добавления форм в сайдбар, футер и другие виджет-области без редактирования кода шаблона.
Возможность расширять функциональность форм, подменять тексты, управлять видимостью полей через параметры.
Легкая интеграция с другими плагинами и темами, которые работают с виджетами.

Создание виджета с параметрами для шорткода WPForms

Ниже приведён пример создания виджета, который принимает ID формы и дополнительные параметры, передаёт их в шорткод и выводит форму на фронтенде.

Регистрация виджета в WordPress

Создадим класс виджета с названием WPForms_Widget_Custom, который расширит WP_Widget. В методе widget мы сформируем шорткод с параметрами и выведем его результат.

class WPForms_Widget_Custom extends WP_Widget_wpforms_ru {
    public function __construct() {
        parent::__construct(
            'wpforms_widget_custom',
            'WPForms: кастомный виджет с параметрами',
            ['description' => 'Вывод формы WPForms с передачей параметров через шорткод']
        );
    }

    public function widget( $args, $instance ) {
        echo $args['before_widget'];

        $form_id = ! empty( $instance['form_id'] ) ? intval( $instance['form_id'] ) : 0;
        $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
        $extra_class = ! empty( $instance['extra_class'] ) ? sanitize_text_field( $instance['extra_class'] ) : '';

        if ( $title ) {
            echo $args['before_title'] . esc_html( $title ) . $args['after_title'];
        }

        if ( $form_id ) {
            // Формируем шорткод с дополнительным параметром css_class
            $shortcode = sprintf('[wpforms id="%d" css_class="%s"]', $form_id, esc_attr($extra_class));
            echo do_shortcode( $shortcode );
        } else {
            echo '<p>Форма не выбрана.</p>';
        }

        echo $args['after_widget'];
    }

    public function form( $instance ) {
        $form_id = ! empty( $instance['form_id'] ) ? intval( $instance['form_id'] ) : '';
        $title = ! empty( $instance['title'] ) ? $instance['title'] : '';
        $extra_class = ! empty( $instance['extra_class'] ) ? sanitize_text_field( $instance['extra_class'] ) : '';

        // Получаем формы WPForms для выбора
        $forms = get_posts([
            'post_type' => 'wpforms',
            'numberposts' => -1
        ]);
        ?>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>">Заголовок виджета:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>"/>
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('form_id')); ?>">Выберите форму WPForms:</label>
            <select class="widefat" id="<?php echo esc_attr($this->get_field_id('form_id')); ?>" name="<?php echo esc_attr($this->get_field_name('form_id')); ?>">
                <option value="">-- Выберите форму --</option>
                <?php foreach ( $forms as $form ) : ?>
                    <option value="<?php echo intval($form->ID); ?>" <?php selected($form_id, $form->ID); ?>><?php echo esc_html($form->post_title); ?></option>
                <?php endforeach; ?>
            </select>
        </p>
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('extra_class')); ?>">Дополнительный CSS класс для формы:</label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('extra_class')); ?>" name="<?php echo esc_attr($this->get_field_name('extra_class')); ?>" type="text" value="<?php echo esc_attr($extra_class); ?>"/>
        </p>
        <?php
    }

    public function update( $new_instance, $old_instance ) {
        $instance = [];
        $instance['form_id'] = ! empty( $new_instance['form_id'] ) ? intval( $new_instance['form_id'] ) : 0;
        $instance['title'] = ! empty( $new_instance['title'] ) ? sanitize_text_field( $new_instance['title'] ) : '';
        $instance['extra_class'] = ! empty( $new_instance['extra_class'] ) ? sanitize_text_field( $new_instance['extra_class'] ) : '';
        return $instance;
    }
}

// Регистрируем виджет
add_action('widgets_init', function() {
    register_widget('WP_Widget_wpforms_ru');
});

Этот код создаёт виджет с настройками: заголовок, выбор формы из списка, дополнительный CSS класс. На фронтенде формируется шорткод WPForms с передачей этих параметров.

Динамическая модификация формы через параметры виджета

Передача дополнительного параметра css_class позволяет легко менять стили формы. Но можно пойти дальше и с помощью JavaScript или PHP менять поведение формы в зависимости от параметров.

Например, можно добавить в виджет передачу параметра hide_fields — ID полей, которые нужно скрыть. Тогда на фронтенде через JS можно скрывать соответствующие элементы формы.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var widget = document.querySelector('.wpforms-container.<?php echo esc_js($extra_class); ?>');
  if(widget) {
    var fieldsToHide = '<?php echo esc_js($instance['hide_fields'] ?? ''); ?>'.split(',');
    fieldsToHide.forEach(function(fieldId) {
      var el = widget.querySelector('[data-field-id="' + fieldId.trim() + '"]');
      if(el) el.style.display = 'none';
    });
  }
});
</script>

Виджет можно расширить, добавив поле для ввода ID скрываемых полей. Таким образом достигается мощная кастомизация форм без правки шаблонов и плагинов.

Интеграция с плагином Clearfy Pro для оптимизации вывода

Если на сайте установлен плагин Clearfy Pro, можно дополнительно оптимизировать загрузку стилей и скриптов WPForms, загружая их только на страницах, где отображается виджет WPForms.

Clearfy Pro позволяет управлять подключением ресурсов плагинов, что ускоряет сайт и уменьшает нагрузку.

Заключение

Создание кастомного виджета для WPForms с поддержкой параметров через шорткод — эффективный приём для повышения гибкости вывода форм на сайте. Такой подход позволяет не только быстро вставлять формы в виджет-зоны, но и динамически менять их внешний вид и функционал без вмешательства в код плагина.

Если вам необходимы более сложные изменения, стоит рассмотреть создание дополнений к WPForms через хуки и фильтры, но для большинства задач кастомный виджет — оптимальный вариант.