Изменение оформления анкеты

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

Тема

Для создания своей темы оформления опроса перейдите в раздел Темы, который находится в настройках:

Нажмите Добавить:

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

Редактор позволяет не только выбирать мышкой цвет из доступных, но и указывать свой цвет в HEX- или RGBA-форматах в поле под палитрой.

С помощью кнопки с круглой стрелкой можно вернуть значение по умолчанию.

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

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

примечание

Если необходимой настройки в теме нет — можно отправить в техническую поддержку запрос на её добавление.

CSS

Если настроек темы оформления недостаточно, но очень нужно что-то быстро поменять, то можно воспользоваться стилями CSS, которые добавляются в редакторе, открывающимся из выпадающего меню Скрипты редактора анкеты:

Описание свойств и селекторов CSS можно найти в интернете, например здесь, а структуру страниц анкеты можно смотреть в инспекторе браузера.

Примеры

Ниже представлены примеры изменения часто используемых элементов анкеты:

/* Добавление нестандартного шрифта "Exo 2" */
@import url('https://fonts.bunny.net/css?family=Exo+2');

/* Установка шрифта "Exo 2" в качестве основного */
body {
    font-family: 'Exo 2', sans-serif;
}

/* Выделение текстов вопросов жирным */
[data-part='question-text'] {
    font-weight: bold;
}

/* Выделение комментариев синим цветом */
[data-part='question-comment'] {
    color: blue !important;
}

/* Выделение текстов ответов курсивом */
[data-part='answer-text'] {
    font-style: italic;
}

Задать стиль можно для конкретного вопроса или ответа:

[data-question-number='12'] [data-part='question-text'] {
    font-weight: bold;
}

[data-answer-code='99'] [data-part='answer-text'] {
    font-style: italic;
}

Доступные атрибуты

Разметка анкеты содержит data-атрибуты, за которые можно зацепиться собственными стилями. data-part говорит, что это за элемент: текст вопроса, текст ответа, чекбокс, кнопка, ячейка таблицы — у каждого своё значение.

Ниже представлены поддерживаемые элементы анкеты, которые можно использовать в своих стилях CSS. Атрибуты указываются в квадратных скобках.

предупреждение

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

Опрос

Данные для применения стилей:

• data-part='survey' - опрос целиком
• data-part='progress' — полоса прогресса
• data-part='logo' — логотип
• data-part='footer' — футер (подвал)
• data-part='alert' — уведомление

Данные, по которым можно ограничить правило:

• data-project-type — тип опроса:
  • cati — телефонный опрос
  • cawi — веб-опрос
• data-test-session — присутствует в режиме тестирования анкеты
• data-progress — тип шкалы прогресса:
  • survey — пройдено / остаток
  • auto-answer — время до автоответа на вопрос
• data-logo — расположение логотипа:
  • footer — в футере
  • welcome — в вопросе Приветствие
• data-alert – тип уведомления:
  • error
  • warning
  • success
  • info
• data-accessibility-mode — присутствует, если включена опция Адаптировать опрос для людей с ограниченными возможностями

Язык интервью (дополнительные квадратные скобки не нужны):

• html[lang='ru'] — русский (доступные варианты)
• html[dir='rtl'] — направление письма справа налево

/* Только в тестовом прогоне */
[data-part='survey'] [data-test-session] [data-part='question-title']::after { … }

/* Только прогресс опроса, не таймер автоответа */
[data-part='progress'] [data-progress='survey'] { … }

/* Только сообщения об ошибках */
[data-part='alert'] [data-alert='error'] { … }

/* Только в режиме доступности */
[data-accessibility-mode] [data-part='answer-text'] { … }

/* Только для русского языка */
html[lang='ru'] [data-part='answer-text'] { … }

Вопрос

Данные для применения стилей:

• data-part='question' — вопрос целиком
• data-part='question-title' — номер
• data-part='question-text' — текст
• data-part='question-information' — информационный текст
• data-part='question-image' — картинка
• data-part='search' — поле поиска по вариантам ответа
• data-part='answers' — область с ответами

Данные, по которым можно ограничить правило:

• data-question-number — номер
• data-question-type-name — тип текстом
• data-question-type — тип числом
• data-display-mode — режим отображения:
  • adaptive — адаптивно (по ширине экрана)
  • compact — компактный вид
  • full — полный вид

/* Только у вопроса номер 12 */
[data-question-number='12'] [data-part='question-text'] { … }

/* Во всех табличных вопросах */
[data-question-type-name^='table-'] [data-part='answer-text'] { … }

/* Только в вопросах с единственным выбором */
[data-question-type-name='single-choice'] [data-part='answer'] { … }

Ответ

Данные для применения стилей:

• data-part='answer' — ответ целиком
• data-part='answer-code' — код
• data-part='answer-text' — текст
• data-part='answer-image' — картинка
• data-part='marker' — маркер выбора
• data-part='group-toggle' — кнопка разворота группы ответов

Данные, по которым можно ограничить правило:

• data-answer-code — код
• data-marker — тип маркера выбора:
  • radio — один ответ
  • checkbox — несколько ответов
• data-group-header — заголовок группы

/* Только для ответа с кодом 10 */
[data-answer-code='10'] [data-part='answer-text'] { … }

/* Только для ответов в группе с кодом 5001  */
[data-group-code='5001'] [data-part='answer-text'] { … }

/* Заголовки всех групп */
[data-part='answer'] [data-group-header] [data-part='answer-text'] { … }

/* Маркеты выбора при множественном ответе */
[data-part='marker'] [data-marker='checkbox'] { … }

Таблица

Данные для применения стилей:

• data-part='table' — таблица целиком
• data-part='row' — строка целиком
• data-part='row-header' — заголовок строки (первая колонка)
• data-part='column' — колонка целиком
• data-part='column-header' — заголовок колонки
• data-part='cell' — ячейка целиком

Данные, по которым можно ограничить правило:

• data-row-code — код строки
• data-column-code — код колонки
• data-cell-code — код ячейки
• data-cell-index — позиция ячейки в контейнере, начиная с 1
• data-view — режим отображения:
  • full — полный вид
  • compact — компактный вид

/* Только для строки с кодом 1 */
[data-row-code='1'] [data-part='answer-text'] { … }

/* Только для колонки с кодом 1 */
[data-column-code='1'] [data-part='answer-text'] { … }

/* Все ячейки колонки с кодом 5 */
[data-part='cell'][data-cell-code='5'] { … }

/* Только ячейка с кодом 5 в строке 3 */
[data-row-code='3'] [data-part='cell'] [data-cell-code='5'] { … }

/* Первая ячейка каждой строки */
[data-part='cell'][data-cell-index='1'] { … }

/* Маркеры выбора во всех ячейках колонки 5 */
[data-part='cell'] [data-cell-code='5'] [data-part='marker'] { … }

/* Таблица в компактном режиме */
[data-part='table'] [data-view='compact'] { … }

Шкала рейтинга

Данные для применения стилей:

• data-part='rating-item' — шкала целиком

Данные, по которым можно ограничить правило:

• data-value — значение

/* Пятая звезда шкалы */
[data-part='rating-item'] [data-value='5'] { … }

Поле ввода

Данные для применения стилей:

• data-part='field' — поле целиком
• data-part='input' — область ввода (input или textarea)
• data-part='open-value' — поле у ответа, строки, колонки
• data-part='field-error' – текст сообщения об ошибке

Данные, по которым можно ограничить правило:

• data-field-type — тип поля:
  • text — текст
  • multiline — многострочный текст
  • number – число
  • date — дата
  • time — время
  • datetime – дата и время
  • phone — номер телефона
  • email — адрес электронной почты
  • dropdown — выпадающий список

/* Только числовые поля */
[data-part='field' ][data-field-type='number'] [data-part='input'] { … }

/* Области ввода многострочных полей */
[data-field-type='multiline'] [data-part='input'] { … }

Состояние

Данные, по которым можно ограничить правило:

• data-checked — выбран маркер ответа (колонки, ячейки) или шкалы
• data-blocking — блокирующий вариант ответа
• data-disabled — заблокированный объект (недоступен для взаимодействия)
• data-expanded — группа развёрнута
• data-error — ответ, строка, колонка или поле подсечены как ошибочные

Атрибут состояния появляется только тогда, когда состояние истинно (значения false не бывает). Если состояния нет, нет и атрибута.

/* Выбранная карточка варианта */
[data-part='answer'] [data-checked] { … }

/* Недоступные варианты */
[data-part='answer'] [data-disabled] [data-part='answer-text'] { … }

/* Строка таблицы с ошибкой */
[data-part='row'] [data-error] { … }

Кнопки

Данные для применения стилей:

• data-part='button' — кнопка
• data-part='nav' — панель кнопок

Данные, по которым можно ограничить правило:

• data-button — тип кнопки:
  • next — Далее / Начать (в вопросе Приветствие)
  • back — Назад
  • skip — Пропустить
  • go-first — В начало
  • interrupt — Завершить
  • redial — Перенести звонок (проект Телефонный опрос)
  • script — Выполнить скрипт
  • go-to-question — Перейти к вопросу (в режиме тестирования)
  • save — Сохранить (в редакторе ответа интервью)
  • cancel — Отменить (в редакторе ответа интервью)
  • select-all — Выбрать ответ во всех строках или колонках (таблица с выбором ответа)
  • clear-search — Очистить (в поле поиска ответов)
  • carousel-prev — Назад (в таблице с опцией Отображать таблицу как карусель)
  • carousel-next — Вперёд (в таблице с опцией Отображать таблицу как карусель)
  • captcha-refresh — Обновить картинку капчи

/* Кнопка «Далее» */
[data-button='next'] { … }

Если стиль не применился

Часть цветов темы опроса задаётся напрямую в разметке. Такое значение сильнее обычного правила, поэтому именно для этих свойств нужен !important, например:

[data-part='question-comment'] {
    color: blue !important;
}

Общее правило: если свойство не применилось, посмотрите элемент в инспекторе браузера. Если значение пришло из атрибута style, добавьте !important.

Ограничение

Длинные списки ответов и большие таблицы отрисовываются порциями: в разметке находится только видимая часть, остальное появляется при прокрутке. Для CSS это не имеет значения — правила применяются к элементам по мере их появления.

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