Как добавить необычные типы полей в WordPress формах

Зачем нужны необычные типы полей в формах WordPress

Стандартные формы WordPress и популярные плагины для форм предоставляют базовый набор типов полей: текст, email, пароль, чекбокс, радио, select. Однако, часто возникает необходимость добавить более сложные или специфичные поля — например, загрузку нескольких файлов с ограничениями, цветовой селектор, ввод геолокации или даже пользовательские виджеты.

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

Добавление пользовательских типов полей через ACF (Advanced Custom Fields)

Плагин ACF позволяет легко создавать кастомные поля для постов, пользователей и форм. Среди стандартных есть несколько необычных, например, цветовой выбор (Color Picker), Google Map, галерея и прочие.

Пример добавления поля «Цвет» через ACF:

if( function_exists('acf_add_local_field_group') ):
    acf_add_local_field_group(array(
        'key' => 'group_1',
        'title' => 'Дополнительные поля формы',
        'fields' => array(
            array(
                'key' => 'field_color',
                'label' => 'Выбор цвета',
                'name' => 'wppuzzle_color',
                'type' => 'color_picker',
            ),
        ),
        'location' => array(
            array(
                array(
                    'param' => 'post_type',
                    'operator' => '==',
                    'value' => 'post',
                ),
            ),
        ),
    ));
endif;

После добавления поля вы сможете выводить выбранный цвет в шаблонах постов, используя get_field('wppuzzle_color'). Это пример простого, но полезного нестандартного поля.

Добавление поля загрузки нескольких файлов с ограничениями

Стандартный input type=file не всегда удобен — нужен выбор нескольких документов с ограничением по типу и размеру. Рассмотрим пример добавления такого поля с проверкой на стороне сервера.

HTML для формы:

<form method="post" enctype="multipart/form-data">
    <input type="file" name="wppuzzle_files[]" multiple>
    <input type="submit" name="submit_files" value="Загрузить">
</form>

Обработка загрузки в functions.php или плагине:

function wppuzzle_handle_file_upload() {
    if ( ! empty( $_FILES['wppuzzle_files'] ) && isset($_POST['submit_files']) ) {
        $files = $_FILES['wppuzzle_files'];
        $uploaded = [];
        $allowed_types = ['image/jpeg', 'image/png', 'application/pdf'];
        $max_file_size = 2 * 1024 * 1024; // 2 МБ

        for ($i = 0; $i < count($files['name']); $i++) {
            $file_type = $files['type'][$i];
            $file_size = $files['size'][$i];
            $file_tmp = $files['tmp_name'][$i];
            $file_name = sanitize_file_name($files['name'][$i]);

            if (!in_array($file_type, $allowed_types)) {
                echo 'Файл ' . esc_html($file_name) . ' имеет недопустимый тип.<br>';
                continue;
            }
            if ($file_size > $max_file_size) {
                echo 'Файл ' . esc_html($file_name) . ' слишком большой.<br>';
                continue;
            }

            $upload = wp_upload_bits($file_name, null, file_get_contents($file_tmp));
            if (!$upload['error']) {
                $uploaded[] = $upload['url'];
                echo 'Файл ' . esc_html($file_name) . ' загружен успешно.<br>';
            } else {
                echo 'Ошибка загрузки файла ' . esc_html($file_name) . ': ' . esc_html($upload['error']) . '<br>';
            }
        }

        // Можно сохранить ссылки в мета, опции или отправить на почту
    }
}
add_action('init', 'wppuzzle_handle_file_upload');

Такой подход даёт контроль над загружаемыми файлами и их обработкой.

Использование плагина Quizle для создания интерактивных форм с необычными полями

Если нужно не просто форма, а интерактивный опрос или квиз с разными типами вопросов, стоит обратить внимание на плагин Quizle от WPSHOP. Он поддерживает различные типы вопросов, включая выбор цвета, рейтинги, загрузку файлов и многое другое.

Преимущество — визуальный конструктор, лёгкая интеграция и адаптивность. Использование Quizle позволяет быстро добавить на сайт продвинутые формы без программирования.

Подробнее о Quizle и установке можно узнать на официальной странице плагина.

Добавление поля с геолокацией на основе Google Maps

Для сбора адресов с точным указанием координат удобно использовать поле с картой. Рассмотрим пример добавления такого поля с использованием Google Maps JavaScript API и ACF.

После активации ACF и создания поля типа "Google Map" с ключом wppuzzle_location, в шаблоне можно вывести карту и координаты:

$location = get_field('wppuzzle_location');
if( $location ) {
    echo '<div class="acf-map"><div class="marker" data-lat="' . esc_attr($location['lat']) . '" data-lng="' . esc_attr($location['lng']) . '"></div></div>';
}

Для отображения карты подключите скрипты Google Maps и добавьте JavaScript для инициализации карты по координатам маркера. Это даст удобный и понятный интерфейс для выбора и отображения локаций.

Создание своего поля с кастомным HTML и JavaScript

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

Для этого можно использовать хук wppuzzle_add_custom_field_type() — пример реализации кастомного поля:

function wppuzzle_render_custom_slider_field( $field ) {
    echo '<input type="range" name="' . esc_attr($field['name']) . '" min="0" max="100" value="' . esc_attr($field['value']) . '">';
    echo '<span class="slider-value">' . esc_html($field['value']) . '</span>';
    ?>
    <script>
    (function(){
        const range = document.querySelector('input[name="' + '<?php echo esc_js($field['name']); ?>' + '"]');
        const value = range.nextElementSibling;
        range.addEventListener('input', function(){
            value.textContent = range.value;
        });
    })();
    </script>
    <?php
}

add_action('wppuzzle_render_custom_field_slider', 'wppuzzle_render_custom_slider_field');

Далее интегрируйте это поле в вашу форму и обработайте сохранение значений.

Обработка данных и безопасность

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

Обязательно используйте функции валидации и санитизации, например, sanitize_text_field(), esc_url_raw() и другие, в зависимости от типа поля.

При загрузке файлов проверяйте типы, размер и используйте WordPress API для обработки загрузок.

Ниже пример валидации для текстового поля:

function wppuzzle_sanitize_custom_field( $input ) {
    return sanitize_text_field( $input );
}

Итоговые рекомендации и полезные плагины

• Advanced Custom Fields (ACF) — для большинства нестандартных полей.
• Quizle — для интерактивных опросов с расширенными типами вопросов.
• Contact Form 7 + CF7 Custom Fields — для добавления новых типов полей в популярные формы.
• WPForms — расширенные возможности с визуальным конструктором и поддержкой кастомных полей.

Каждый из этих инструментов можно доработать под свои задачи с помощью PHP и JavaScript, используя примеры, приведённые в статье.