CSS-классы форм в Wepps Platform: Конструктор для красивых форм

В Wepps Platform есть готовая система CSS-классов для форм — как конструктор Lego. Вы берёте блоки (классы), собираете форму, и она сразу красивая. Давайте разберёмся, как это работает.

10.01.2026

Вы написали HTML-форму, а она выглядит как в 90-х? Поля разной высоты, кнопки не выровнены, чекбоксы непонятно где, а на мобильном всё разваливается? Обычно приходится писать кучу CSS, подбирать отступы, делать адаптивность...

А что если просто добавить несколько готовых классов — и форма сразу выглядит современно, работает на всех устройствах, с правильными отступами, иконками и анимациями?

В Wepps Platform есть готовая система CSS-классов для форм — как конструктор Lego. Вы берёте блоки (классы), собираете форму, и она сразу красивая. Давайте разберёмся, как это работает.

Конструктор форм: как это понять

Представьте, что форма — это дом из кубиков Lego. У вас есть:

  1. w_form — это фундамент дома. Класс контейнера, который говорит: "Здесь будет форма со всеми правилами оформления".

  2. fieldset — это комнаты в доме. Группируют связанные поля (например, "Личные данные", "Адрес доставки"). Каждая комната имеет фон и отступы.

  3. section — это мебель в комнате. Одна секция = одно поле с подписью. Структурирует поля внутри группы.

  4. label.w_label — это упаковка для каждого элемента формы. Обёртка, которая делает поле кликабельным полностью.

  5. Модификаторы (w_input, w_checkbox, w_button) — это тип кубика. Говорят: "Это текстовое поле", "Это кнопка", "Это чекбокс".

Или вспомните конструктор мебели IKEA:

  • w_form — это инструкция по сборке
  • fieldset — это модули (полка, ящик, столешница)
  • section — это крепления между элементами
  • label.w_label — это базовая деталь
  • Модификаторы — это конкретный тип детали (винт, гайка, шуруп)

Суть в том, что вы просто комбинируете классы по правилам — и получаете готовую красивую форму.

Что такое w_form? Контейнер всех форм

w_form — это главный класс-контейнер для любой формы на сайте. Его главная задача — установить базовые правила оформления для всех вложенных элементов.

Суперсилы w_form:

  • Единое оформление. Все поля внутри автоматически получают правильные отступы, закругления, цвета.

    • На практике: добавили class="w_form" к <form> → все дочерние элементы сразу красиво оформлены.

  • Структурирование через fieldset. Группы полей получают фон, отступы, визуально отделяются друг от друга.

    • На практике: личные данные в одном блоке, адрес в другом — визуально понятно.

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

Где вы это видите на любом сайте?

  • Форма регистрации с несколькими шагами
  • Форма оформления заказа с разными блоками данных
  • Анкета с группировкой вопросов по темам
  • Профиль пользователя с секциями (основное, контакты, настройки)

Что такое fieldset и section? Структура формы

fieldset — это логическая группа полей. В HTML это семантический элемент для группировки связанных полей. В Wepps Platform он получает визуальное оформление:

  • Светлый фон (background-color: var(--color-98))
  • Отступы (padding: var(--s2))
  • Закругленные углы (border-radius: var(--s2))

section — это контейнер для одного поля с подписью. Каждая секция = одно поле формы:

<section>
    <div class="title">Название поля</div>
    <label class="w_label w_input">
        <input type="text" name="fieldname" />
    </label>
</section>

Суперсилы fieldset и section:

  • Визуальная группировка. Пользователь сразу видит, какие поля относятся к одной теме.
  • Семантика. Правильная HTML-разметка для доступности (скринридеры понимают структуру).
  • Отступы. Автоматические отступы между секциями — не нужно писать CSS.

Проще простого: fieldset = блок с фоном, section = одно поле внутри блока.

Что такое label.w_label? Универсальная обёртка

label.w_label — это базовый класс для любого поля формы. Он делает всю область вокруг поля кликабельной, добавляет правильное позиционирование и подготавливает место для модификаторов.

Ключевые характеристики:

  • Относительное позиционирование (position: relative) — позволяет размещать иконки, ошибки абсолютно.
  • Flex-контейнер (display: flex) — выравнивает элементы внутри.
  • Курсор-указатель (cursor: pointer) — показывает, что элемент кликабельный.
  • Полная кликабельность — весь блок label кликабельный, не только сам input.

Модификаторы: типы полей

w_input — текстовые поля

Для чего: обычные текстовые поля (имя, email, телефон, адрес).

HTML:

<label class="w_label w_input">
    <input type="text" name="name" />
</label>

Стили:

  • Белый фон (background: var(--color-100))
  • Серая рамка (border: var(--s-half) solid var(--color-85))
  • Закругленные углы (border-radius: var(--s2))
  • Высота 8 единиц сетки (min-height: calc(var(--s) * 8))
  • Синяя рамка при фокусе (border-color: var(--color-button))

Типы input:

  • type="text" — обычный текст
  • type="email" — email с валидацией браузера
  • type="tel" — телефон (на мобильных откроется цифровая клавиатура)
  • type="url" — URL с валидацией
  • type="password" — скрытый ввод пароля

w_area — многострочное поле

Для чего: длинный текст (сообщение, описание, комментарий).

HTML:

<label class="w_label w_area">
    <textarea name="message"></textarea>
</label>

Особенности:

  • Минимальная высота 20 единиц (min-height: calc(var(--s) * 20))
  • Автоматическое изменение высоты по содержимому (через JavaScript в Forms.js)
  • Отключено ручное изменение размера (resize: none)
  • Скрытый скроллбар (overflow: hidden)

w_checkbox — чекбокс

Для чего: множественный выбор (согласие с условиями, выбор услуг, опции).

HTML:

<label class="w_label w_checkbox">
    <input type="checkbox" name="approve" />
    <span>Я согласен с условиями</span>
</label>

Как работает:

  • Нативный <input type="checkbox"> скрыт (display: none)
  • Кастомный чекбокс через псевдоэлемент :before у <span>
  • Иконка из Bootstrap Icons:
    • Не выбран: \f584 (пустой квадрат)
    • Выбран: \f26C (квадрат с галочкой)
  • Цвет меняется при :checked

Для массивов: используйте name="field[]" и разные value:

<label class="w_label w_checkbox">
    <input type="checkbox" name="services[]" value="web" />
    <span>Разработка сайтов</span>
</label>
<label class="w_label w_checkbox">
    <input type="checkbox" name="services[]" value="seo" />
    <span>SEO-продвижение</span>
</label>

w_radio — радиокнопка

Для чего: выбор одного варианта из нескольких (пол, способ доставки, тариф).

HTML:

<label class="w_label w_radio">
    <input type="radio" name="gender" value="male" />
    <span>Мужской</span>
</label>
<label class="w_label w_radio">
    <input type="radio" name="gender" value="female" />
    <span>Женский</span>
</label>

Как работает:

  • Нативный <input type="radio"> скрыт
  • Кастомная радиокнопка через :before у <span>
  • Иконки:
    • Не выбран: \f28A (пустой круг)
    • Выбран: \f26A (круг с точкой)
  • Все radio с одинаковым name образуют группу (выбрать можно только один)

w_select — выпадающий список

Для чего: выбор из длинного списка (город, страна, категория).

HTML:

<label class="w_label w_select">
    <select name="city">
        <option value="1">Москва</option>
        <option value="2">Санкт-Петербург</option>
        <option value="3">Новосибирск</option>
    </select>
</label>

Интеграция с Select2:

Платформа использует библиотеку Select2 для расширенных селектов:

  • Поиск по списку
  • Множественный выбор
  • AJAX-подгрузка опций
  • Кастомное оформление

Стили Select2:

  • .select2-container — контейнер
  • .select2-dropdown — выпадающий список
  • .select2-results__option — опция в списке
  • .select2-selection__choice — выбранный элемент (при multiple)

Множественный выбор:

<label class="w_label w_select">
    <select multiple name="skills[]">
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
        <option value="python">Python</option>
    </select>
</label>

w_upload — загрузка файла

Для чего: прикрепление файлов (резюме, фото, документы).

HTML:

<label class="w_label w_upload">
    <input type="file" name="resume" />
    <span>Прикрепить файл</span>
</label>
<div class="w_upload_add">
    {foreach $uploaded['resume'] as $k => $file}
        <div class="w_upload_file" data-key="{$k}">
            {$file.name} <i class="bi bi-x-circle-fill"></i>
        </div>
    {/foreach}
</div>

Как работает:

  • Нативный <input type="file"> скрыт (opacity: 0; display: none)
  • Кастомная кнопка через <span>
  • Кнопка стилизована как обычная кнопка (color: var(--color-button))
  • При наведении меняет цвет (:hover)
  • Список загруженных файлов в .w_upload_add
  • Иконка удаления файла .bi-x-circle-fill

JavaScript (Forms.js) обрабатывает:

  • Клик по <span> → открывает диалог выбора файла
  • Выбор файла → AJAX-загрузка в сессию
  • Клик по .bi (крестик) → удаление файла из сессии

w_button — кнопка

Для чего: действия (отправить, отменить, далее, назад).

HTML:

<label class="w_label w_button">
    <input type="submit" value="Отправить" />
</label>

<!-- Или button -->
<label class="w_label w_button">
    <button type="button">Отменить</button>
</label>

<!-- Или ссылка-кнопка -->
<a href="/catalog" class="w_button">Перейти в каталог</a>

Стили:

  • Цветная кнопка (background: var(--color-button))
  • Белый текст (color: var(--color-100))
  • Высота 8 единиц (min-height: calc(var(--s) * 8))
  • Состояния:
    • :hover — темнее (background: var(--color-focus))
    • :active — еще темнее с тенью (background: var(--color-active))
    • :disabled — серая и неактивная (background: var(--color-75))

Модификатор .w_button_important:

<label class="w_label w_button w_button_important">
    <input type="submit" value="Купить сейчас" />
</label>
  • Жирный шрифт (font-weight: 600)
  • Заглавные буквы (text-transform: uppercase)
  • Увеличенная высота (min-height: calc(var(--s) * 10))

Дополнительные классы-утилиты

w_require — обязательное поле

Для чего: показать, что поле обязательно для заполнения.

HTML:

<label class="w_label w_input w_require">
    <input type="text" name="email" />
</label>

Визуал:

  • Красная звёздочка слева от поля (:after)
  • Иконка Bootstrap Icons \f287 (звёздочка)
  • Цвет var(--color-attention) (красный)
  • Позиция: left: calc(-1 * var(--s3)) (слева от label)

w_error — ошибка валидации

Для чего: показать ошибку рядом с неправильно заполненным полем.

Генерируется JavaScript:

var t = $('<div>{$value}</div>').addClass('w_error_{$key}').addClass('w_error');
elem.eq(0).before(t);

Визуал:

  • Красный фон (background: var(--color-attention))
  • Белый текст (color: var(--color-100))
  • Абсолютное позиционирование справа от поля
  • Треугольник-стрелка влево (:before)
  • Иконка закрытия справа (:after — крестик)
  • Кликабельная — при клике исчезает

Родительский класс .w_error_parent:

  • Добавляется к label с ошибкой
  • Используется для стилизации (можно добавить красную рамку)

w_success — успешная отправка

Для чего: показать сообщение об успешной отправке формы.

Генерируется PHP:

Validator::setFormSuccess("Спасибо! Ваше сообщение отправлено", $this->get['form']);

Визуал:

  • Зелёная рамка (border: var(--s-half) solid var(--color-success))
  • Светлый фон (background: var(--color-98))
  • Серый текст (color: var(--color-25))
  • Центрированный текст (text-align: center)
  • Заменяет всю форму после успешной отправки

w_minmax — счётчик количества

Для чего: выбор количества товара, гостей, дней.

HTML:

<div class="w_label w_minmax" data-id="123">
    <button class="sub"><span></span></button>
    <input type="text" name="quantity" value="1" min="1" max="10" />
    <button class="add"><span></span></button>
</div>

Визуал:

  • Серая рамка вокруг (border: var(--border))
  • Три элемента в ряд: кнопка минус, input, кнопка плюс
  • Кнопки с иконками:
    • Минус: \f63B
    • Плюс: \f64D
  • Серый фон кнопок (background: var(--color-85))
  • При наведении: синий фон (background: var(--color-focus))

JavaScript (Forms.js):

formWepps.minmax(); // Инициализация
  • Клик по минусу — уменьшает значение
  • Клик по плюсу — увеличивает значение
  • Проверка min/max атрибутов
  • Ручной ввод с валидацией

w_hide — скрытие элемента

Для чего: временно скрыть поле или кнопку.

HTML:

<label class="w_label w_input w_hide">
    <input type="hidden" name="user_id" value="123" />
</label>

Стили:

label.w_label.w_hide { display: none; }

Магия в соединении: собираем форму из классов

Давайте соберём полноценную форму обратной связи:

<form action="javascript:formWepps.send('feedback','feedback-form','/ext/Contacts/Request.php')"
    id="feedback-form" class="w_form">

    <h2>Свяжитесь с нами</h2>

    <!-- Группа 1: Личные данные -->
    <fieldset>
        <section>
            <div class="title">Ваше имя</div>
            <label class="w_label w_input w_require">
                <input type="text" name="name" placeholder="Иван Иванов" />
            </label>
        </section>

        <section>
            <div class="title">Email</div>
            <label class="w_label w_input w_require">
                <input type="email" name="email" placeholder="ivan@example.com" />
            </label>
        </section>

        <section>
            <div class="title">Телефон</div>
            <label class="w_label w_input">
                <input type="tel" name="phone" placeholder="+7 (___) ___-__-__" />
            </label>
        </section>
    </fieldset>

    <!-- Группа 2: Сообщение -->
    <fieldset>
        <section>
            <div class="title">Ваше сообщение</div>
            <label class="w_label w_area w_require">
                <textarea name="message" placeholder="Напишите ваш вопрос..."></textarea>
            </label>
        </section>

        <section>
            <div class="title">Вложение</div>
            <label class="w_label w_upload">
                <input type="file" name="attachment" />
                <span>Прикрепить файл</span>
            </label>
            <div class="w_upload_add"></div>
        </section>
    </fieldset>

    <!-- Группа 3: Дополнительно -->
    <fieldset>
        <section>
            <div class="title">Интересующие услуги</div>
            <label class="w_label w_checkbox">
                <input type="checkbox" name="services[]" value="web" />
                <span>Разработка сайтов</span>
            </label>
            <label class="w_label w_checkbox">
                <input type="checkbox" name="services[]" value="seo" />
                <span>SEO-продвижение</span>
            </label>
            <label class="w_label w_checkbox">
                <input type="checkbox" name="services[]" value="support" />
                <span>Техподдержка</span>
            </label>
        </section>

        <section>
            <div class="title">Предпочтительный способ связи</div>
            <label class="w_label w_radio">
                <input type="radio" name="contact_method" value="email" checked />
                <span>Email</span>
            </label>
            <label class="w_label w_radio">
                <input type="radio" name="contact_method" value="phone" />
                <span>Телефон</span>
            </label>
            <label class="w_label w_radio">
                <input type="radio" name="contact_method" value="telegram" />
                <span>Telegram</span>
            </label>
        </section>
    </fieldset>

    <!-- Группа 4: Отправка -->
    <fieldset>
        <section>
            <label class="w_label w_checkbox">
                <input type="checkbox" name="approve" />
                <span>Я согласен на обработку персональных данных</span>
            </label>
        </section>

        <section>
            <label class="w_label w_button">
                <input type="submit" value="Отправить" disabled />
            </label>
        </section>
    </fieldset>
</form>

Что получилось:

  • ✅ 4 визуальные группы полей (fieldset)
  • ✅ Обязательные поля отмечены красной звёздочкой
  • ✅ Разные типы полей: текст, email, телефон, текстовая область, загрузка файла
  • ✅ Множественный выбор (чекбоксы)
  • ✅ Выбор одного варианта (радио)
  • ✅ Кнопка неактивна до согласия с условиями
  • ✅ Всё адаптивно и красиво из коробки

Реальные сценарии компоновки

Сценарий 1: Форма регистрации

Задача: создать форму регистрации с паролем, подтверждением пароля и выбором пола.

<form class="w_form" id="register-form">
    <h2>Регистрация</h2>

    <fieldset>
        <section>
            <div class="title">Email</div>
            <label class="w_label w_input w_require">
                <input type="email" name="email" />
            </label>
        </section>

        <section>
            <div class="title">Пароль</div>
            <div class="text">Минимум 8 символов</div>
            <label class="w_label w_input w_require">
                <input type="password" name="password" />
            </label>
        </section>

        <section>
            <div class="title">Подтверждение пароля</div>
            <label class="w_label w_input w_require">
                <input type="password" name="password_confirm" />
            </label>
        </section>

        <section>
            <div class="title">Пол</div>
            <label class="w_label w_radio">
                <input type="radio" name="gender" value="m" />
                <span>Мужской</span>
            </label>
            <label class="w_label w_radio">
                <input type="radio" name="gender" value="f" />
                <span>Женский</span>
            </label>
        </section>
    </fieldset>

    <fieldset>
        <section>
            <label class="w_label w_button w_button_important">
                <input type="submit" value="Зарегистрироваться" />
            </label>
        </section>
    </fieldset>
</form>

Особенности:

  • <div class="text"> — подсказка под заголовком (серый цвет)
  • type="password" — скрытый ввод
  • Радиокнопки в одной секции
  • Важная кнопка с классом w_button_important

Сценарий 2: Форма с поиском в селекте (Select2)

Задача: выбор города из большого списка с поиском.

<section>
    <div class="title">Город</div>
    <label class="w_label w_select">
        <select name="city" class="select2">
            <option value="">Выберите город</option>
            <option value="1">Москва</option>
            <option value="2">Санкт-Петербург</option>
            <option value="3">Новосибирск</option>
            <!-- ... ещё 100+ городов ... -->
        </select>
    </label>
</section>

JavaScript (Forms.js):

$('.w_select select.select2').select2({
    language: "ru",
    placeholder: "Введите название города"
});

Стили Select2 автоматически:

  • Синяя рамка при открытии
  • Поле поиска в выпадающем списке
  • Закругленные углы
  • Правильная высота
  • Иконка стрелки

Сценарий 3: Форма с динамическим добавлением полей

Задача: форма "Добавить участников", где можно добавить несколько человек.

<fieldset id="participants">
    <section class="participant-row">
        <div class="title">Участник 1</div>
        <div class="w_grid w_2col w_gap_small">
            <label class="w_label w_input w_require">
                <input type="text" name="participants[0][name]" placeholder="Имя" />
            </label>
            <label class="w_label w_input w_require">
                <input type="email" name="participants[0][email]" placeholder="Email" />
            </label>
        </div>
    </section>
</fieldset>

<fieldset>
    <section>
        <button type="button" class="w_button" onclick="addParticipant()">
            + Добавить участника
        </button>
    </section>
</fieldset>

JavaScript:

let participantIndex = 1;
function addParticipant() {
    let html = `
        <section class="participant-row">
            <div class="title">Участник ${participantIndex + 1}</div>
            <div class="w_grid w_2col w_gap_small">
                <label class="w_label w_input w_require">
                    <input type="text" name="participants[${participantIndex}][name]" placeholder="Имя" />
                </label>
                <label class="w_label w_input w_require">
                    <input type="email" name="participants[${participantIndex}][email]" placeholder="Email" />
                </label>
            </div>
        </section>
    `;
    $('#participants').append(html);
    participantIndex++;
}

Используются классы сетки:

  • w_grid — включает CSS Grid
  • w_2col — две колонки
  • w_gap_small — маленький промежуток между колонками

Сценарий 4: Форма с кнопкой очистки в input

Задача: добавить иконку очистки поля при вводе текста.

<section>
    <div class="title">Поиск</div>
    <label class="w_label w_input">
        <i class="w_field_empty"></i>
        <input type="text" name="search" placeholder="Введите запрос..." />
    </label>
</section>

Стили (Forms.css):

  • .w_field_empty — абсолютное позиционирование справа
  • Иконка крестика из Bootstrap Icons (\f659)
  • При наведении: серый фон
  • При клике: очищает поле (обработчик в Forms.js)

JavaScript (Forms.js):

$('i.w_field_empty').on('click', function () {
    $(this).siblings('input,textarea').val('');
});

Частые вопросы и проблемы

❓ Почему поля имеют разную высоту?

Проблема: input и button имеют разную высоту, форма выглядит криво.

Причина: Не используется класс w_label или не подключен Forms.css.

Решение:

<!-- ❌ Неправильно -->
<input type="text" name="name" />
<button>Отправить</button>

<!-- ✅ Правильно -->
<label class="w_label w_input">
    <input type="text" name="name" />
</label>
<label class="w_label w_button">
    <button>Отправить</button>
</label>

Все элементы получают единую высоту min-height: calc(var(--s) * 8).

❓ Как сделать кнопку на всю ширину?

Решение: Добавьте display: block и width: 100% к label:

<label class="w_label w_button" style="display: block; width: 100%;">
    <input type="submit" value="Отправить" />
</label>

Или создайте класс-утилиту в своём CSS:

.w_button_full {
    display: block;
    width: 100%;
}

❓ Чекбоксы не кликаются

Проблема: Клик по тексту чекбокса не переключает его.

Причина: Неправильная структура HTML — <input> не внутри <label> или отсутствует <span>.

Решение:

<!-- ❌ Неправильно -->
<input type="checkbox" name="agree" />
<label>Согласен</label>

<!-- ✅ Правильно -->
<label class="w_label w_checkbox">
    <input type="checkbox" name="agree" />
    <span>Согласен</span>
</label>

Обязательно используйте <span> для текста — иначе кастомные стили не применятся.

❓ Select2 не инициализируется

Проблема: Селект выглядит как обычный, без поиска и стилей Select2.

Причина: Не вызван select2Render() или не подключена библиотека.

Решение:

  1. Убедитесь, что подключены скрипты:

    $this->headers->js("/packages/vendor/select2/select2/dist/js/select2.full.min.js");
$this->headers->css("/packages/vendor/select2/select2/dist/css/select2.min.css");

  2. Вызовите инициализацию:

    $(document).ready(function() {
$('.w_select select').select2({
    language: "ru"
});
});

Или используйте готовую функцию из Forms.js:

select2Render();

❓ Как изменить цвета форм под свой дизайн?

Решение: Переопределите CSS-переменные в своём файле стилей:

:root {
    --color-button: #ff5722;      /* Цвет кнопок */
    --color-focus: #e64a19;       /* Цвет при наведении */
    --color-active: #d84315;      /* Цвет при клике */
    --color-attention: #f44336;   /* Цвет ошибок */
    --color-success: #4caf50;     /* Цвет успеха */
}

Все классы используют эти переменные, поэтому форма сразу перекрасится.

Принципы работы с классами

✅ Делайте так:

  1. Всегда используйте w_form для контейнера

    <form class="w_form">
   <!-- Содержимое -->
</form>

  2. Группируйте связанные поля в fieldset

    <fieldset>
   <!-- Личные данные -->
</fieldset>
<fieldset>
   <!-- Адрес доставки -->
</fieldset>

  3. Каждое поле в свою section

    <section>
   <div class="title">Название</div>
   <label class="w_label w_input">
       <input type="text" name="field" />
   </label>
</section>

  4. Комбинируйте w_label с модификатором

    <label class="w_label w_input">      <!-- Текстовое поле -->
<label class="w_label w_checkbox">   <!-- Чекбокс -->
<label class="w_label w_button">     <!-- Кнопка -->

  5. Добавляйте w_require к обязательным полям

    <label class="w_label w_input w_require">
   <input type="email" name="email" />
</label>

❌ Не делайте так:

  1. Не пропускайте label

    <!-- ❌ Неправильно -->
<input type="text" class="w_input" />

<!-- ✅ Правильно -->
<label class="w_label w_input">
   <input type="text" />
</label>

  2. Не забывайте про span в чекбоксах/радио

    <!-- ❌ Неправильно -->
<label class="w_label w_checkbox">
   <input type="checkbox" />
   Текст
</label>

<!-- ✅ Правильно -->
<label class="w_label w_checkbox">
   <input type="checkbox" />
   <span>Текст</span>
</label>

  3. Не смешивайте разные типы в одном label

    <!-- ❌ Неправильно -->
<label class="w_label w_input w_button">
   <!-- Что это? Input или button? -->
</label>

<!-- ✅ Правильно -->
<label class="w_label w_input">
   <input type="text" />
</label>
<label class="w_label w_button">
   <button>OK</button>
</label>

Адаптивность и сетка

Формы в Wepps Platform адаптивны из коробки, но для сложных макетов используйте классы сетки:

Два поля в строку

<section>
    <div class="w_grid w_2col w_gap_medium">
        <label class="w_label w_input">
            <input type="text" name="first_name" placeholder="Имя" />
        </label>
        <label class="w_label w_input">
            <input type="text" name="last_name" placeholder="Фамилия" />
        </label>
    </div>
</section>

Три поля в строку

<section>
    <div class="w_grid w_3col w_gap_small">
        <label class="w_label w_input">
            <input type="text" name="city" placeholder="Город" />
        </label>
        <label class="w_label w_input">
            <input type="text" name="street" placeholder="Улица" />
        </label>
        <label class="w_label w_input">
            <input type="text" name="house" placeholder="Дом" />
        </label>
    </div>
</section>

Разные ширины колонок

<section>
    <div class="w_grid w_gap_medium" style="grid-template-columns: 2fr 1fr;">
        <label class="w_label w_input">
            <input type="text" name="address" placeholder="Адрес" />
        </label>
        <label class="w_label w_input">
            <input type="text" name="apartment" placeholder="Кв." />
        </label>
    </div>
</section>

Переменные CSS и кастомизация

Все размеры и цвета форм управляются через CSS-переменные:

Размеры (сетка)

:root {
    --s: 4px;                    /* Базовая единица */
    --s-half: 2px;               /* Половина (для border) */
    --s2: 8px;                   /* 2 единицы */
    --s3: 12px;                  /* 3 единицы */
    --s4: 16px;                  /* 4 единицы */
    --s5: 20px;                  /* 5 единицы */
    --s6: 24px;                  /* 6 единиц */
}

Цвета

:root {
    --color-100: #ffffff;        /* Белый (фон полей) */
    --color-98: #fafafa;         /* Почти белый (фон fieldset) */
    --color-95: #f5f5f5;         /* Светло-серый */
    --color-85: #e0e0e0;         /* Серый (рамки) */
    --color-75: #bdbdbd;         /* Темно-серый */
    --color-50: #757575;         /* Текст подсказок */
    --color-25: #424242;         /* Основной текст */
    --color-20: #333333;         /* Темный текст */
    --color-primary: #212121;    /* Самый темный текст */

    --color-button: #2196f3;     /* Синий (кнопки, акценты) */
    --color-focus: #1976d2;      /* Темнее при наведении */
    --color-active: #0d47a1;     /* Самый темный при клике */

    --color-attention: #f44336;  /* Красный (ошибки) */
    --color-success: #4caf50;    /* Зелёный (успех) */
    --color-warning: #ff9800;    /* Оранжевый (предупреждения) */
}

Шрифты

:root {
    --font: 'Roboto', sans-serif;  /* Основной шрифт */
    --font-default: 14px;          /* Размер по умолчанию */
    --font-medium: 16px;           /* Средний размер */
}

Пример кастомизации

Создайте файл custom-forms.css:

/* Увеличим все поля */
:root {
    --s: 5px;  /* Было 4px, стало 5px */
}

/* Сделаем кнопки зелёными */
:root {
    --color-button: #4caf50;
    --color-focus: #43a047;
    --color-active: #2e7d32;
}

/* Уберём закругления */
label.w_label.w_input input,
label.w_label.w_button input,
label.w_label.w_button button {
    border-radius: 0;
}

/* Сделаем чекбоксы квадратными */
label.w_label.w_checkbox input[type="checkbox"]+span:before {
    content: "☐";  /* Квадрат вместо иконки */
}
label.w_label.w_checkbox input[type="checkbox"]:checked+span:before {
    content: "☑";  /* Квадрат с галочкой */
}

Подключите после Forms.css:

$this->headers->css("/ext/Template/Forms/Forms.{$this->rand}.css");
$this->headers->css("/path/to/custom-forms.css");

Заключение

Система CSS-классов для форм в Wepps Platform предоставляет:

  • ✅ Готовые стили для всех типов полей
  • ✅ Единую высоту элементов (8 единиц сетки)
  • ✅ Адаптивность из коробки
  • ✅ Кастомные чекбоксы и радиокнопки через иконки
  • ✅ Интеграцию с Select2 для расширенных селектов
  • ✅ Визуализацию ошибок и успеха
  • ✅ Модульность через классы-модификаторы
  • ✅ Кастомизацию через CSS-переменные

Вы просто комбинируете классы по правилам — и получаете красивую, функциональную, адаптивную форму. Не нужно писать CSS с нуля для каждой формы.

Начните с базовой структуры (form.w_form > fieldset > section > label.w_label), добавляйте модификаторы (w_input, w_checkbox, w_button) — и через 10 минут у вас готова профессионально оформленная форма.

Файлы:

  • packages/WeppsExtensions/Template/Forms/Forms.css — все стили форм
  • packages/WeppsExtensions/Template/Forms/Forms.js — JavaScript для форм
  • packages/vendor/select2/ — библиотека Select2
forms css uiux dev

Как фреймворк: Гибкость разработки

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

wapps framework

Как CMS: Простота управления

Интуитивная админ-панель для редакторов контента без программирования

wapps cms

Как платформа: Готовые решения

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

wapps platform
Формы в Wepps Platform: От шаблона до базы данных за 5 минут

В Wepps Platform работа с формами организована как конвейер: вы описываете форму в шаблоне, система автоматически собирает данные, валидирует их, показывает ошибки и обрабатывает успешную отправку. Давайте разберёмся, как это работает и почему это намного проще, чем кажется.

08.01.2026
concept forms uiux dev
A
AJAX-запросы в Wepps Platform: Обновляем страницу без перезагрузки

А что если страница могла бы обновляться мгновенно, без перезагрузки? Пользователь отправляет форму — и тут же видит результат. Открывает попап — контент подгружается моментально. Добавляет товар в корзину — счётчик обновляется без единого мерцания экрана.

06.01.2026
concept ajax uiux dev
G
CSS Grid в Wepps Platform: Система классов для двумерных макетов (строки + колонки)

CSS Grid Layout - мощный инструмент для создания двумерных макетов веб-страниц. В платформе Wepps реализована система утилитарных классов для работы с Grid, которая позволяет быстро создавать адаптивные сетки без написания дополнительного CSS. Система поддерживает до 6 колонок, адаптивные breakpoints и полный контроль над выравниванием и отступами.

31.12.2025
css grid uiux dev

☝️ Будьте в курсе: полезные статьи, новости проекта и практические советы по работе с платформой Wepps.

dev 15 uiux 5 concept 4 mail 4 blocks 3 css 3 telegram 3 content 2 docs 2 extensions 2 forms 2 lists 2 ai 1 ajax 1 api 1 cms 1 config 1 edit 1 excel 1 fields 1 flexbox 1 grid 1 images 1 pdf 1 tables 1 tasks 1
Ваша конфиденциальность важна для нас

Мы используем файлы cookie для улучшения работы сайта. Вы можете принять все cookies или настроить предпочтения. Подробнее в нашей Политике использования cookie-файлов.

Принять все Настроить