Чекбокс на Тильде: как сделать и стилизовать самостоятельно

Что такое чекбокс и зачем он нужен

Чекбокс (от англ. checkbox - «флажок») - это поле с двумя состояниями: отмечено или нет. В отличие от радиокнопок, где выбирают только один вариант, чекбоксы позволяют отметить сразу несколько пунктов или не отметить ни одного. На сайтах, собранных на Тильде, этот элемент встречается почти в каждой форме.

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

Виды чекбоксов в Тильде

В конструкторе есть два основных сценария, и настраиваются они по-разному.

• Одиночная галочка (согласие). Тип поля «Галочка» - то самое поле с согласием на обработку персональных данных и ссылкой на политику конфиденциальности.
• Группа чекбоксов (множественный выбор). Тип поля «Вопрос с ответами» с настройкой «Несколько вариантов ответа». Удобно для опросов, брифов и выбора нескольких услуг сразу.

Как сделать чекбокс в Тильде: пошаговая инструкция

Запрос «как сделать чекбокс в Тильде» - один из самых частых у новичков. На деле весь процесс занимает пару минут и не требует кода.

Как стилизовать чекбокс через CSS

Стандартный вид меняется только кодом, но пугаться не стоит - достаточно нескольких строк CSS. Код добавляют в HTML-блок «T123» рядом с формой либо в «Настройки страницы → Дополнительно». Чтобы стили не затронули другие формы, ограничьте их идентификатором блока #recXXXXXX (узнать его можно через F12).

Пример 1. Цвет и размер квадрата

#rec123456 .t-checkbox__control {
 width: 22px; height: 22px;
 border: 2px solid #7c3aed; /* цвет рамки */
 border-radius: 6px;
 background-color: #ffffff;
}
/* состояние «отмечено» */
#rec123456 .t-checkbox:checked + .t-checkbox__control {
 background-color: #7c3aed; border-color: #7c3aed;
}

Пример 2. Полностью свой чекбокс с галочкой

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

#rec123456 .t-checkbox { position: absolute; opacity: 0; width:0; height:0; }
#rec123456 .t-checkbox__control {
 position: relative; width: 24px; height: 24px;
 border: 2px solid #bdbdbd; border-radius: 6px;
 background: #fff; cursor: pointer;
}
#rec123456 .t-checkbox:checked + .t-checkbox__control { background:#7c3aed; border-color:#7c3aed; }
#rec123456 .t-checkbox:checked + .t-checkbox__control::after {
 content: ''; position: absolute; left: 8px; top: 4px;
 width: 6px; height: 11px;
 border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

Каким делать чекбокс, чтобы им было удобно

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

• Делайте подпись кликабельной. Пользователь должен ставить галочку кликом и по квадрату, и по тексту рядом.
• Увеличьте зону нажатия. На смартфонах комфортный размер квадрата - 24 - 28 px, а область касания - не меньше 44 px.
• Пишите понятный текст. «Согласен на обработку персональных данных» понятнее, чем сухое «Согласие».
• Не прячьте согласие. Галочку нельзя ставить заранее отмеченной или маскировать мелким серым шрифтом.
• Показывайте состояние. Отмеченный и пустой чекбокс должны заметно отличаться цветом или галочкой.

Если хочется, чтобы формы не просто работали, а приносили заявки, начните с аудита юзабилити: он показывает, где посетители «спотыкаются» и почему бросают форму.

Частые проблемы и решения

Поможем с сайтом и формами

Частые проблемы с чекбоксом в Тильде и решения

Частые вопросы