Как создать свой уникальный шаблон для форм в WordPress с помощью WPForms

Почему важно создавать уникальные шаблоны форм в WordPress

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

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

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

Основы работы с WPForms и кастомные шаблоны

WPForms — это один из самых популярных плагинов для создания форм на WordPress благодаря удобному интерфейсу drag-and-drop и широкому набору функций. Однако плагин не имеет встроенного механизма создания и сохранения собственных шаблонов форм через интерфейс. Для решения этой задачи придется использовать программный подход.

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

Для начала разберём простейший пример создания собственного шаблона формы для WPForms, который будет содержать поля: Имя, Email и Сообщение.

Пример кода: создание шаблона формы

function wpformru_register_custom_form_template( $templates ) {
    $templates['wpformru-custom-contact-form'] = array(
        'name'    => 'Кастомная контактная форма',
        'fields'  => array(
            array(
                'id'          => '1',
                'type'        => 'text',
                'label'       => 'Имя',
                'required'    => true,
            ),
            array(
                'id'          => '2',
                'type'        => 'email',
                'label'       => 'Email',
                'required'    => true,
            ),
            array(
                'id'          => '3',
                'type'        => 'textarea',
                'label'       => 'Сообщение',
                'required'    => false,
            ),
        ),
        'settings' => array(
            'submit_text' => 'Отправить'
        ),
    );
    return $templates;
}
add_filter( 'wpforms_custom_templates', 'wpformru_register_custom_form_template' );

В этом примере мы используем фильтр wpforms_custom_templates, чтобы добавить новый шаблон формы. В массиве $templates задаются поля формы и основные настройки. После добавления этого кода в файл functions.php вашей темы или в специальный плагин, шаблон станет доступен для использования.

Расширение шаблона: добавление кастомных стилей и валидации

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

WPForms позволяет подключать собственные CSS-стили, которые можно добавить в файл стилей темы или подключить отдельно. Например, чтобы изменить внешний вид полей и кнопок, используйте следующий код:

function wpformru_custom_form_styles() {
    wp_enqueue_style( 'wpformru-custom-style', get_stylesheet_directory_uri() . '/css/wpformru-custom-style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpformru_custom_form_styles' );

В файле wpformru-custom-style.css можно прописать, например:

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
    border: 2px solid #0073aa;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
}

.wpforms-submit {
    background-color: #0073aa;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    padding: 12px 20px;
    cursor: pointer;
}

Для добавления кастомной валидации, например, проверка длины сообщения, можно использовать хук wpforms_process_validate:

function wpformru_custom_validation( $field_id, $field_submit, $form_data, &$errors ) {
    if ( $field_id === '3' ) { // ID поля Сообщение
        if ( strlen( trim( $field_submit ) ) < 10 ) {
            $errors['fields'][ $field_id ] = 'Сообщение должно содержать не менее 10 символов.';
        }
    }
}
add_action( 'wpforms_process_validate', 'wpformru_custom_validation', 10, 4 );

Интеграция собственного шаблона с уведомлениями и сохранением данных

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

Например, можно отправлять данные формы в сторонний сервис или сохранять их в отдельную таблицу базы данных.

Пример: сохранение данных формы в отдельную таблицу

Создадим функцию, которая будет запускаться после успешной отправки формы и записывать данные в таблицу wpformru_submissions (предварительно созданную вручную или через установочный скрипт плагина):

function wpformru_save_form_data( $fields, $entry, $form_data ) {
    global $wpdb;
    if ( $form_data['id'] !== 'wpformru-custom-contact-form' ) {
        return;
    }

    $name = sanitize_text_field( $fields[1]['value'] );
    $email = sanitize_email( $fields[2]['value'] );
    $message = sanitize_textarea_field( $fields[3]['value'] );

    $table_name = $wpdb->prefix . 'wpformru_submissions';

    $wpdb->insert(
        $table_name,
        array(
            'name'    => $name,
            'email'   => $email,
            'message' => $message,
            'date'    => current_time( 'mysql' ),
        )
    );
}
add_action( 'wpforms_process_complete', 'wpformru_save_form_data', 10, 3 );

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

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

При создании и кастомизации шаблонов форм важно уделять внимание безопасности и отладке. Всегда используйте функции очистки данных, такие как sanitize_text_field(), sanitize_email() и другие, чтобы избежать инъекций и XSS-атак.

Для отладки можно использовать логирование данных, например, через error_log() или плагины для отладки WordPress. Если форма не отображается или не сохраняет данные, проверьте корректность идентификаторов полей и соответствие функций обратного вызова.

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

Альтернативные плагины для расширенного создания форм

WPForms отлично подходит для большинства задач, однако если требуется еще более глубокая кастомизация, можно рассмотреть альтернативы:

Gravity Forms — мощный плагин с большим количеством расширений и хуков для разработчиков.
Contact Form 7 — бесплатный плагин с возможностью добавления кастомных фильтров и хук для расширения.
Formidable Forms — подходит для создания сложных форм с логикой и расчетами.

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

На сайте wpform.ru вы можете найти подробные руководства и примеры для всех этих плагинов, а также сравнения и советы по выбору.