Стилизация опросов: меняем внешний вид ответов

Опросы ClickDimensions предоставляют вам различные способы сбора информации и обратной связи от ваших клиентов благодаря различным типам вопросов, включая рейтинговую оценку (звезды, от 1 до 10), чекбосы (вопросы с выбор нескольких ответов из списка) и радио-кнопки (вопросы с выбором одного ответа и при необходимости с возможностью указать свой вариант).

 

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

Вопрос «Рейтинг» (оценка)

Что нам надо сделать? Во-первых, нам нужно создать новый спрайт с графикой, которую мы хотим использовать вместо стандартных звезд. Это должен быть транспарентный GIF или PNG, который равен 16px*80px. Ниже представлены спрайт по умолчанию и модифицированная версия.

 

Оригинал:

Стандартный вид оценки

Модификация:

Новый вид вопроса-рейтинга

Как вы можете видеть, в этих спрайтах есть пять значков. Нижние три означают состояния: не выбрано, выбрано и наведена мышь, соответственно. Верхние два – для кнопки, которая очищает выбранный рейтинг. После того, как вы создали свой собственный спрайт, его необходимо загрузить в менеджер изображений в HTML-компоненте нашего опроса.

 

Загрузка спрайта

Отсюда мы можем временно добавить изображение в HTML-компонент и получить URL-ссылку на нее из представления исходного кода опроса.

 

Скопируйте созданную ссылку на картинку в HTML коде после добавления ее на страницу:

 

Картинка добавлена в HTML-компонент опроса

Копируем ссылку на картинку

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

 

Итак, сначала вставьте этот CSS в начале раздела CSS редактора кода:

 

/*—RATING STARS—*/

.ui-stars-star a, .ui-stars-cancel a {

width: 16px;

height: 15px;

display: block;

background: url(‘Ссылка на картинку‘) no-repeat 0 0;

}

.ui-stars-star a {

background-position:0 -32px;

}

.ui-stars-star-on a {

background-position:0 -48px;

}

.ui-stars-star-hover a {

background-position:0 -64px;

}

.ui-stars-cancel-hover a {

background-position:0 -16px;

}

Затем найдите блок, который выглядит так:

.ui-stars-star a, .ui-stars-cancel a {

width: 16px;

height: 15px;

display: block;

background: url(‘Ссылка на картинку‘) no-repeat 0 0;

}

 

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

 

Обновленный рейтинг

Чекбоксы и радио-кнопки

Пример измененного вопроса-чекбокс

Большинство браузеров устанавливают дефолтную стилизацию для полей-чекбоксов и не позволяют использовать настроенный CSS без специальных ключевых слов. Обычно это делается в том числе для защиты от непоказа чекбоксов и радио-кнопок на страницах.

 

Вернитесь в редактор кода опроса и добавьте кусочек:

 

Input[type=”checkbox” i] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

Вы заметите, что одно и то же заявление было сделано три раза с разными прикрепленными префиксами. Это важно, потому что внешний вид по-прежнему не имеет 100% -ного соответствия во всех браузерах, но, включив -webkit- и -moz, вы можете получить до 91-94% процентов охвата со своим дизайном, а остальные тем не менее увидят ваши вопросы и варианты ответа, но в стандартном виде.

 

Теперь вы можете добавить несколько стилей для изменения чекбокса, когда он отмечен и активен, используя оператор after:

 

Стили для чекбоксов

Наконец, радио-кнопки работают так же, как и чекбоксы. Вам просто нужно прописать в input «Radio» вместо «Checkbox»:

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

 

input[type=”radio” i]:checked:after {

content: ‘ ‘;

width: 6px;

height: 6px;

border-radius: 50px;

position: absolute;

top: 2px;

background: #eee;

left: 2px;

}

Новая радио-кнопка

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