как сделать красивую гугл форму
Все возможности Google Forms
Елена Соловьева, менеджер проектов в Лаборатории Касперского, специально для блога Нетологии написала статью о том, как использовать Google Forms по максимуму.
Google Формы — онлайн-сервис для создания форм обратной связи, онлайн-тестирований и опросов. Инструмент популярный, но весь спектр его возможностей используется редко. В статье я расскажу, когда и для чего пригодятся Google Формы и как максимально эффективно их применять.
Польза Google Форм
Каждая форма в Google Формах представляет собой веб-страницу, на которой размещается анкета или квиз. Все, что нужно для работы с формами, — это иметь аккаунт в Google.
Что можно сделать с помощью Google Форм
Чем удобны Google Формы
Как правильно настроить этот инструмент, чтобы извлечь из него максимум? Я подготовила несколько пошаговых рекомендаций.
Настройте форму
Начните с основных настроек, которые задают параметры и технические характеристики формы.
С помощью верхней панели настраивается поведение формы:
Дополнения. Кликните левой кнопкой мыши по иконке. Здесь появятся дополнения к форме, которые вы настроите. Отсюда же дополнения запускаются:
Внешний вид. Вы можете выбрать однотонную заливку формы или воспользоваться каталогом тем. Чтобы открыть каталог, кликните левой кнопкой мыши на иконку иллюстрации. Выберете любую (некоторые анимированы) или загрузите свою. Тема задает шапку формы и фон.
Предпросмотр. Кликните левой кнопкой мыши на иконку глаза, чтобы посмотреть, как ваши адресаты увидят форму. Эта кнопка пригодится в конце формирования опроса.
Настройка. Кликните левой кнопкой мыши на иконку шестеренки и задайте параметры формы.
Чтобы собирать адреса электронной почты тестируемых, отметьте параметр «Собирать адреса электронной почты». Его активация автоматически добавляет обязательное поле «Электронный адрес» в начале формы.
Кнопка «Отправить». Нажав на нее, вы можете выбрать способ и параметры отправки. Форма отправляется по почте, ссылкой на форму, через встраиваемый код или соцсети. При отправке по почте есть возможность включить форму в тело сообщения. Ваш адресат сможет заполнить опрос не переходя по внешним ссылкам сразу из письма. К сожалению, такая опция хорошо работает только с Gmail. С другими почтовыми сервисами эта функция работает некорректно.
Действия с формой. Кликните левой кнопкой мыши на иконку после кнопки отправки, чтобы раскрыть меню действий с формой. Форму можно удалить, копировать, распечатать. Это же меню позволяет создать из формы предзаполненный шаблон, подключить дополнения и настроить доступ.
курс
Контент-
стратег
Создайте форму
После того, как вы определились с форматом, настройкой и поведением опроса, раздали права доступа и задали дизайн, можно переходить к созданию самой формы. Сначала продумайте структуру опроса на бумаге, чтобы потом не запутаться в логике в конструкторе.
Конструктор
Первые два поля появились по умолчанию: заголовок формы и электронный адрес (обязательное поле по умолчанию, если вы активировали параметр «Собирать адреса электронной почты»).
Начнем создавать новые поля. Если в продуманной вами логике тест получился очень длинным, разбейте его на разделы и добавьте иллюстрации.
Переходим в панель конструктора справа. Для добавления раздела кликните на нижнюю иконку. Чтобы вставить дополнительный материал, например картинки, видео или текстовое описание, кликните на соответствующую иконку.
Google Формы разрешают загружать картинки прямо с устройства, Google диска, Google поиска, через ссылку или с камеры. Видео подтягиваются из Ютуба.
Чтобы вставить вопрос нажмите на «+» в верху панели. Введите название вопроса (это может быть картинка — кликните на иконку иллюстрации, чтобы ее вставить) и выберете тип вопроса из раскрывающегося меню справа.
Типы вопросов:
Текст (строка). Этот тип вопроса предполагает короткий ответ. Его удобно использовать, когда вы хотите получить email, имя, адрес, цифровое значение, ссылку. В этом типе вопроса доступны функции:
Если вы хотите, чтобы в строку было введено число, выберете из выпадающего меню параметр «Число» вместо «Длина» и установите нужные характеристики:
Таким же образом можно выбрать и настроить параметр «Текст» и «Регулярное выражение»:
Текст (абзац). Этот тип вопроса предполагает развернутый ответ. Его удобно использовать при запросе развернутого фидбека. Все функции и настройки совпадают с типом вопроса «Текст (строка)»:
Один из списка. Этот тип вопроса предполагает выбор одного варианта из предложенных. Его удобно использовать в качестве разводящего по логике формы — в зависимости от выбранного варианта тестируемого перебрасывают на другие разделы или в конец формы. Рассмотрим, как это сделать.
Здесь доступны функции:
Несколько из списка. Этот тип вопроса предполагает выбор нескольких вариантов ответа из предложенных.
Создание потрясающих форм
На мобильных устройствах заполнять формы непросто. Лучшими являются те формы, в которых как можно меньше полей. Хорошие формы предусматривают наличие семантического ввода. Клавиши должны меняться в соответствии с тем, какие данные вводит пользователь, например, при выборе даты на календаре. Информируйте об этом своих пользователей. Средства проверки должны сообщать пользователям, что именно им нужно сделать до того, как форма будет отправлена
Общие сведения об этих указаниях по созданию потрясающих форм см. в приведенном далее видеоролике.
Создание эффективных форм
Для создания эффективных форм следует избегать повторяющихся действий, запрашивать только необходимую информацию и направлять пользователей, показывая им, как далеко они уже зашли в заполнении форм, состоящих из нескольких частей
Сводите к минимуму повторяющиеся действия и одинаковые поля
В формах не должно быть повторяющихся действий, полей должно быть столько, сколько действительно нужно, а кроме того необходимо использовать автозаполнение, чтобы пользователям не составляло труда заполнять формы подставляемыми данными.
На веб-сайте Progressive.com пользователей сначала просят ввести свой почтовый индекс, который затем автоматически переносится в следующую часть формы.
Ищите возможность заранее вставлять данные, которые вам уже известны или можно предвидеть, чтобы пользователям не пришлось указывать их еще раз. Например, в поля адреса для доставки автоматически вносите последний адрес доставки, указанный этим пользователем.
Показывайте пользователям, как далеко они уже зашли
Индикаторы хода выполнения и меню должны точно показывать общий ход заполнения форм и выполнения процессов, состоящих из нескольких частей.
Используйте четко обозначенные индикаторы выполнения, чтобы пользователям было удобнее заполнять формы, состоящие из нескольких частей.
Если в самом начале разместить слишком сложную форму, весьма вероятно, что пользователи уйдут с вашего сайта, не пройдя весь процесс.
Предоставляйте наглядные календари при выборе дат
Зачастую пользователям нужно больше контекста при назначении встреч и дат поездок. Чтобы упростить им жизнь и не заставлять их уходить с вашего сайта, чтобы посмотреть в свой календарь, предоставьте им наглядный календарь для выбора дат начала и окончания.
Веб-сайт отеля с удобным виджетом календаря для выбора дат.
Выбор лучшего типа ввода
Оптимизируйте ввод информации путем выбора правильного типа ввода. Пользователям нравятся веб-сайты, которые автоматически выводят на экран цифровые клавиатуры для ввода номеров телефонов или автоматически выполняют переход к следующему полю после заполнения предыдущего. При разработке форм старайтесь, чтобы пользователю не нужно было лишний раз делать нажатия
Типы ввода HTML5
В HTML5 появилось несколько новых типов ввода. Эти новые типы ввода выдают подсказки браузеру о том, клавиатуру какого вида следует отобразить в качестве экранной клавиатуры. Пользователям проще вводить нужную информацию без необходимости переключать свою клавиатуру, когда они видят только те клавиши, которые нужны для ввода данного типа.
Выдавайте подсказки во время ввода с помощью datalist
Элемент datalist не является типом ввода. Это список предлагаемых значений ввода, который связывается с полем формы. Он позволяет браузеру предлагать варианты автоматического заполнения по мере того, как пользователь вводит значения. В отличие от элементов select, когда пользователям приходится просматривать длинные списки, чтобы найти требуемое значение, при этом они могут выбрать только значение из этого списка, элемент datalist выдает подсказки по мере того, как пользователь выполняет ввод.
Обозначайте пола полЯ надлежащим образом
На мобильных устройствах заполнять формы непросто. Лучшими являются те формы, в которых как можно меньше полей. Хорошие формы предусматривают наличие семантического ввода. Клавиши должны меняться в соответствии с тем, какие данные вводит пользователь, например, при выборе даты на календаре. Информируйте об этом своих пользователей. Средства проверки должны сообщать пользователям, что именно им нужно сделать до того, как форма будет отправлена
Важность обозначений
Размер и местоположение обозначения
Обозначения и поля ввода должны быть достаточно большими, чтобы их было легко нажимать. При книжной ориентации обозначения полей следует размещать их над элементами ввода, а при альбомной – сбоку от них. И обозначения полей, и соответствующие поля ввода должны быть видны на экране одновременно. Будьте осторожны с нестандартными обработчиками прокрутки, которые могут прокрутить элемент ввода вверх страницы, скрыв обозначение, либо обозначения, расположенные ниже элементов ввода, могут оказаться под виртуальной клавиатурой.
Используйте заполнители
Атрибут placeholder подсказывает пользователю, что именно следует указать в поле ввода, обычно отображая значение в виде текста светлого тона, пока пользователь не начнет вводить информацию в элемент.
Используйте метаданные для обеспечения автозаполнения
Пользователям нравится, когда веб-сайты экономят их время, автоматически заполняя такие стандартные поля, как имена, адреса электронной почты и другие часто используемые поля. Кроме того, это позволяет снизить вероятность ошибки при вводе – особенно на виртуальных клавиатурах и небольших устройствах.
Например, чтобы подсказать браузеру, что он может автоматически ввести в форму имя пользователя, его адрес электронной почты и номер телефона, следует использовать:
Рекомендуемые значения атрибутов полей ввода name и autocomplete
Атрибут autofocus
Атрибут autofocus следует использовать с осторожностью, поскольку он убирает фокус с клавиатуры, что потенциально может не дать использовать для навигации клавишу возврата на один символ.
Обеспечение проверки в реальном времени
Проверка данных в реальном времени помогает не только обеспечить их точность, но также улучшить восприятие пользователей. Современные браузеры имеют несколько встроенных средств, позволяющих обеспечить проверку данных в реальном времени. Кроме того, они могут не позволить пользователю отправить форму с некорректными сведениями. Необходимо использовать визуальные подсказки, которые укажут, правильно ли заполнена форма
Используйте следующие атрибуты для проверки ввода
Атрибут pattern
Атрибут pattern задает регулярное выражение, используемое для проверки поля ввода. Например, чтобы проверить почтовый индекс США (5 цифр, за которыми иногда следует дефис и еще четыре цифры), атрибут pattern необходимо задать следующим образом:
Стандартные шаблоны регулярных выражений
| Описание | Регулярное выражение |
|---|---|
| Почтовый адрес | [a-zA-Z\d\s\-\,\#\.\+]+ |
| Почтовый индекс (США) | ^\d<5,6>(?:[-\s]\d<4>)?$ |
| IP-адрес (IPv4) | ^(?:(?:255|238|[01]?21?)\.)<3>(?:252|233|[01]?69?)$ |
| IP-адрес (IPv6) | ^(([0-9a-fA-F]<1,4>🙂<7,7>[0-9a-fA-F]<1,4>|([0-9a-fA-F]<1,4>🙂<1,7>:|([0-9a-fA-F]<1,4>🙂<1,6>:[0-9a-fA-F]<1,4>|([0-9a-fA-F]<1,4>🙂<1,5>(:[0-9a-fA-F]<1,4>)<1,2>|([0-9a-fA-F]<1,4>🙂<1,4>(:[0-9a-fA-F]<1,4>)<1,3>|([0-9a-fA-F]<1,4>🙂<1,3>(:[0-9a-fA-F]<1,4>)<1,4>|([0-9a-fA-F]<1,4>🙂<1,2>(:[0-9a-fA-F]<1,4>)<1,5>|[0-9a-fA-F]<1,4>:((:[0-9a-fA-F]<1,4>)<1,6>)|:((:[0-9a-fA-F]<1,4>)<1,7>|:)|fe80:(:[0-9a-fA-F]<0,4>)<0,4>%[0-9a-zA-Z]<1,>|::(ffff(:0<1,4>)<0,1>🙂<0,1>((255|(23|1<0,1>6)<0,1>5).)<3,3>(253|(23|1<0,1>9)<0,1>1)|([0-9a-fA-F]<1,4>🙂<1,4>:((251|(23|1<0,1>2)<0,1>6).)<3,3>(251|(21|1<0,1>5)<0,1>6))$ |
| IP-адрес (оба) | ^(?:(?:254|211|[01]?63?)\.)<3>(?:253|221|[01]?26?)|(([0-9a-fA-F]<1,4>🙂<7,7>[0-9a-fA-F]<1,4>|([0-9a-fA-F]<1,4>🙂<1,7>:|([0-9a-fA-F]<1,4>🙂<1,6>:[0-9a-fA-F]<1,4>|([0-9a-fA-F]<1,4>🙂<1,5>(:[0-9a-fA-F]<1,4>)<1,2>|([0-9a-fA-F]<1,4>🙂<1,4>(:[0-9a-fA-F]<1,4>)<1,3>|([0-9a-fA-F]<1,4>🙂<1,3>(:[0-9a-fA-F]<1,4>)<1,4>|([0-9a-fA-F]<1,4>🙂<1,2>(:[0-9a-fA-F]<1,4>)<1,5>|[0-9a-fA-F]<1,4>:((:[0-9a-fA-F]<1,4>)<1,6>)|:((:[0-9a-fA-F]<1,4>)<1,7>|:)|fe80:(:[0-9a-fA-F]<0,4>)<0,4>%[0-9a-zA-Z]<1,>|::(ffff(:0<1,4>)<0,1>🙂<0,1>((252|(24|1<0,1>1)<0,1>7).)<3,3>(253|(21|1<0,1>7)<0,1>3)|([0-9a-fA-F]<1,4>🙂<1,4>:((251|(22|1<0,1>4)<0,1>1).)<3,3>(251|(24|1<0,1>5)<0,1>2))$ |
| Номер кредитной карты | ^(?:42<12>(?:1<3>)?|522<14>|3[47]7<13>|3(?:04|[68]6)4<11>|6(?:011|55<2>)7<12>|(?:2131|1800|35\d<3>)\d<11>)$ |
| Номер социального страхования | ^\d<3>-\d<2>-\d<4>$ |
| Номер телефона в Северной Америке | ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*(319|751|354)\s*\)|(914|221|449))\s*(?:[.-]\s*)?)?(917|231|37<2>)\s*(?:[.-]\s*)?(8<4>)(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$ |
Атрибут required
Для ввода численной информации, такой как номер, диапазон, дата или время, можно указать минимальное и максимальное значения, а также шаг их изменения при регулировке с помощью ползунка или наборного счетчика. Например, для поля ввода размера обуви задается минимальный размер 1 и максимальный размер 13 с шагом изменения 0,5
Атрибут maxlength
С помощью атрибута maxlength можно задавать максимальную длину вводимого значения или текстового поля. Он полезен, когда требуется ограничить длину информации, которую может указать пользователь. Например, если длину имени файла требуется ограничить 12 символами, это можно сделать следующим образом.
Атрибут minlength
С помощью атрибута minlength можно задавать минимальную длину вводимого значения или текстового поля. Он полезен, когда требуется указать минимальную длину информации, которую должен предоставить пользователь. Например, если требуется указать, что имя файла должно состоять минимум из 8 символов, это можно сделать следующим образом.
Атрибут novalidate
Для более сложной проверки в реальном времени используйте JavaScript
Когда встроенной проверки и регулярных выражений недостаточно, можно использовать API-интерфейс проверки ограничений – мощное средство для выполнения нестандартной проверки. С помощью этого API-интерфейса можно, например, задать нетипичную ошибочную ситуацию, проверить корректность элемента и определить причину, по которой данный элемент является некорректным:
Задавайте нестандартные сообщения о результатах проверки
Если поле не проходит проверку, обозначьте его как некорректное с помощью setCustomValidity() и поясните, в чем заключается ошибка. Например, при заполнении регистрационной формы пользователю может быть предложено для подтверждения его адреса электронной почты ввести его дважды. Используйте событие blur после ввода данных во втором поле, чтобы проверить правильность указанных данных и выдать соответствующий ответ. Например:
Не позволяйте отправлять формы с ошибками
Поскольку некоторые браузеры позволяют пользователю отправлять формы, даже если в них есть некорректные данные, необходимо отслеживать событие отправки и с помощью checkValidity() в элементе формы определять ее корректность. Например:
Отображайте ответ в реальном времени
Полезно снабдить каждое поле визуальной подсказкой, с тем чтобы пользователь еще перед отправкой формы видел, правильно ли он заполнил данное поле. В HTML5 также появилось несколько псевдоклассов, с помощью которых поля ввода можно оформлять в соответствии с их значениями или атрибутами.
| Пвевдокласс | Использование |
|---|---|
| :valid | В явном виде задает стиль, который будет использоваться для поля ввода, когда указанное в нем значение соответствует всем требованиям проверки. |
| :invalid | В явном виде задает стиль, который будет использоваться для поля ввода, когда указанное в нем значение не соответствует всем требованиям проверки. |
| :required | В явном виде задает стиль элемента ввода, для которого задан атрибут required. |
| :optional | В явном виде задает стиль элемента ввода, для которого не задан атрибут required. |
| :in-range | В явном виде задает стиль элемента ввода числа, значение которого находится в пределах диапазона. |
| :out-of-range | В явном виде задает стиль элемента ввода числа, значение которого находится вне диапазона. |
Проверка выполняется мгновенно, а это означает, что, когда страница загружается, поля могут быть обозначены как некорректные, даже если пользователь еще не приступал к их заполнению. Это также означает, что, пока пользователь не закончил вводить информацию, для оформления поля может использоваться стиль, предназначенный для полей с ошибочными данными и указывающий на то, что введено неверное значение. Во избежание таких ситуаций можно с помощью CSS и JavaScript сделать так, чтобы стиль, указывающий на ошибку, использовался только после того, как пользователь перешел в другое поле.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
[Инструкция] Создание гугл-тестов (гугл-форм)
Спасибо пользователям Exosphere и Yuriy_krd за помощь и конструктивную критику
Иногда кажется, что создать что-то по конструктору весьма быстро и просто: хоть сайт, хоть опрос, хоть таблицы. Однако часто упускаешь из внимания какие-то обидные мелочи, из-за которых время уходит впустую и приходится переделывать работу из-за обидного пустяка. Согласитесь, неприятно. Я решил пройти все процессы за вас и предупредить о возможных неприятных мелочах, а также помочь новичкам.
В этой статье мы с вами сделаем гугл-форму, с помощью которой можно собирать данные, опрашивать сотрудников, клиентов, проводить тестирования гипотез и проч. Кстати, крайне актуальная информация в условиях удалённой работы.
Для создания тестов у вас должен быть активный гугл-аккаунт. Если у вас его нет — обратитесь к инструкции “Создание гугл-аккаунта и работа с Гугл-диском”.
Итак, создаем Форму (тестирование).
Входящая задача
Нам нужно создать тестирование, которое будет собирать набор информации.
Шаг 1 — создание теста (формы)
Переходим в гугл-диск. Для этого нажмите кнопку с точками на панели сверху справа, перейдя по ссылке https://www.google.com/ или https://www.google.ru/ Далее выберите Гугл-диск (далее по тексту Диск).
Шаг 2. Создание Теста (формы)
Как и в любом документе в Гугл-диске, начало работы начинается с кнопки “Создать+” в верхней левой части экрана. Этой кнопкой создаются папки на Диске, создаются все документы.
Нажав кнопку Создать, вы увидите меню. В нем нужно выбрать пункт “Еще”.
Создать форму можно несколькими способами:
1. Создание пустой формы:
Мы создали пустую форму (тестирование).
Шаг 3. Элементы управления
Первое, что нужно сделать — создать имя файла для формы. Это имя внутреннее, под ним форма будет храниться на Диске.
Имя создается, если щелкнуть по словосочетанию “Новая форма” в верхней левой части экрана.
В центре экрана находится поле с названием теста (формы). Его будут видеть тестируемые при выполнении. Изменим его на нужное.
Там же заполним описание к тесту (форме).
Далее автоматически создается первый блок вопроса.
В поле “Вопрос без заголовка” вам нужно вписать свой вопрос. Ниже переименовать Вариант 1 ответа на нужный. Если нужно добавить еще один вопрос — нужно нажать ниже “Добавить вопрос”. Также можно добавить вариант “Другое”, тогда в тесте появится текстовое поле, куда пользователь может внести любой иной ответ в произвольной форме.
Выпадающий список позволяет выбрать вид вопроса. В нашем случае автоматически создан вопрос с одним вариантом ответа. Если выпадающий список раскрыть, то можно выбрать иную форму вопроса.
Внизу блока есть кнопки:
Элемент управления “Настройки”
Закладка Общие и Презентация не должны вызвать каких-то вопросов. Важная вкладка “Тесты” — в ней вы можете настроить балльную оценку для каждого вопроса в форме. Для этого активируйте сдвижной переключатель “Тест” и Ваша форма перейдет в разряд теста. После активации этой кнопки вы можете назначать в списке вопросов правильные ответы и количество баллов за правильный ответ.
После активации переключателя, нажмите кнопку “Сохранить” и перейдите к вопросам. Внизу блока вопроса появиться кнопка “Ответы”:
Нажав на нее, вы перейдете в режим установки верных ответов и начисления баллов за правильный ответ.
Итак, давайте начнем выполнение поставленной в начале задачи.
Шаг 4. Создаем тест
Активируем переключатель “Обязательный вопрос”. Теперь пользователь обязан ввести Фамилию и Имя, чтобы продолжить прохождение теста.
Добавляем второй вопрос нажав на верхнюю кнопку в правой вертикальной панеле элементов управления.
Сделаем этот вопрос необязательным не активируя переключатель внизу справа блока. Даже не ответив на этот вопрос, пользователь продолжит и сможет закончить тестирование.
Создаем еще один блок с единственным вариантом ответа
Добавляем блок с несколькими вариантами ответов
Тут мы также добавили вариант ответа “Другое”.
Теперь настраиваем баллы для правильных ответов. Переходим в пункт настройки в верхней правой части элементов управления (значок шестеренки). Переходим на закладку “Тест” и активируем переключатель. Нажимаем кнопку Сохранить и возвращаемся к списку наших вопросов.
Нажав на любое пустое место блока вопроса, активируем его. Слева внизу активируем блок ответов. Выбираем нужный нам ответ верным и назначаем количество баллов.
Нажимаем кнопку готово. Баллы назначены.
Теперь нам нужно настроить регулярность вопросов и сбор адресов электронной почты.
Опять переходим в пункт “Настройки” в верхней части элементов управления. Активируем нужные нам элементы настроек.
Переходим сразу в закладку “Презентации” и проверяем, что активирован пункт “Показывать ссылку для повторного заполнения формы”. Нажимаем кнопку “Сохранить”
Шаг 4. Отправка теста (формы)
Отправка теста (формы) осуществляется путем нажатии кнопки “Отправить”. В открывшемся окне можно выбрать разные варианты отправки.
Отправка по электронной почте:
В поле “Кому” введите адреса получателей. В этом случае в закладке ответы, Вы будете видеть кто проголосовал, а кто еще не ответил на вопросы формы.
Так же форму можно сразу включить в тело письма.
Следующая закладка — отправить ссылку. В этом случае вы можете отправлять ее не только почтой, но и любым иным способом, в том числе через Мессенджер. Однако в этом случае вы будете вынуждены отслеживать ответивших самостоятельно.
Третий вариант — вставка на сайт. Это для более продвинутых пользователей. Позволяет встроить код с формой сразу в шаблон сайта.
Вы закончили создание формы.
Ссылка на тестовую форму, созданную при написании инструкции.