Как сделать красивую гугл форму
Перейти к содержимому

Как сделать красивую гугл форму

  • автор:

Сделайте Красивую Визуализацию из Ответов на Google Docs Form

Melissa Murphy

Melissa Murphy May 15, 2017

Russian (Pусский) translation by Andy Yur (you can also view the original English article)

Одно из интереснейших приложений Google Docs — это Google Forms (Google формы), которые дают возможность бесплатно провести опрос среди ваших пользователей и собрать информацию. Они собирают данные, которые автоматически сохраняются в Google Таблицах, в которых вы можете работать с этими данными — и тут начинается самое интересное.

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

Придется правда немного поработать, но когда вы сделаете это, ваши формы будут не просто формами, а гораздо более мощным инструментом. В этом уроке я покажу вам все, что вам нужно, чтобы сделать из ответов на ваши Google Формы красивую визуализацию, без всяких дополнительных программ.

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

Нужен более короткий путь?

Если вам нужен быстрый и простой способ создать красивые графики из ответов, попробуйте приложение qForm доступное на Envato Market.

qForm — это стильный и мощный инструмент по организации работы с формами. Его можно использовать для создания опросов, вопросников, контактных форм, регистрационных форм и т.д.; возможности безграничны.

Каждый ответ можно просмотреть онлайн, а qForms также может подготовить подробный отчет, снабженный диаграммами и много чем еще. И вам не придется возиться с цифрами. Программа создана как полно-функциональная альтернатива (и даже более того) Google Формам и другим подобным программам и сервисам.

Forms Visualizations with qFormsForms Visualizations with qForms Forms Visualizations with qFormsqForms доступна на Envato Market,

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

1. Тщательно Продумайте Постановку Вопросов

Все начинается с ваших Google Форм. Если у вас есть определенные вопросы, для ответов на которые вы хотите построит графики, то я рекомендую вам использовать multiple choice (выбор из нескольких вариантов ответов), scale (шкала), drop down (выбор из списка) или check box (ответы с чекбоксами).

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

Если вы используете для ответа текстовую область, даже для простого вопроса «Сколько вам лет?«, то ответы могут быть сильно разными и их сложно будет обработать (например могут быть такие: мне 12, 11 лет, тринадцать, и другие варианты).

Прежде чем вы пойдете дальше, отметьте себе, что у нас есть еще два урока на эту тему, кс которыми вы также можете ознакомится. В первом даются инструкции по испозованию Google Form, чтобы создать опросник, а во втором, показыватеся как использовать Google Таблицы, чтобы строить графики:

2. Дайте Название Данным

Как только ваша аудитория ответит на форму, их ответы будут заполнят электронную таблицу Google.

В первой строке таблицы, вы увидите оригинальный вопрос. Чтобы облегчить дальнейшую работу, вам нужно дать каждой колонке свое имя или named range. Если вы используете пример и предыдущего пункта, то для названия колонки с ответам на вопрос «Сколько Вам Лет?«, логично использовать Возраст.

Чтобы дать название диапазону с данными, подсветите колонку с вопросами и ответами на форму, для которых вы хотите построить график. После того, как вы выберите строку, выберите вкладку Data верхней панели инструментов, и затем Named ranges.

Google Sheets Named RangeGoogle Sheets Named Range Google Sheets Named RangeЧтобы построить график для ответов на вопросы Google Forms в колонке B, подсветите колонку нажав на В в верху таблицы. Выберите вкладку Data в панели инструментов. Прокрутите вниз до пункта Named Ranges.

Далее, напечатайте короткое название для колонки с данными и нажмите Done.

Naming a Google Sheets rangeNaming a Google Sheets range Naming a Google Sheets rangeЯ дала этой колонке название peasy потому, что название продукта, по которому был сделан опрос, начиналось с «Р», и вопрос был о простоте (ease of use) использования.

3. Добавьте Новую Таблицу

Нажмите на знак + в нижнем левом углу экрана, чтобы добавить еще одну таблицу.

Add a sheetAdd a sheet Add a sheetЩелкните по знаку + внизу таблицы. Появится новая таблица следом за таблицей Form Responses.

4. Добавьте Ответы в Колонку А

В Sheet2 (во второй таблице), напечатайте все варианты ответов на ваш вопрос. Каждый ответ будет стоять в отдельной ячейке в колонке А. На пример, возможные ответы на вопрос который я использовала были следующие Strongly Disagree (Полностью не Согласен), Disagree (Не Согласен), Neutra (Нейтральное отношение)l, Agree (Согласен), Strongly Agree (Полностью Согласен).

Если вы взгляните на картинку ниже, то вы можете заметить, что я напечатала каждый ответ в отдельной ячейке, будьте внимательны и печатайте ответы в точности такие же, как они давались в Google Форме.

Enter Google Forms responsesEnter Google Forms responses Enter Google Forms responsesНапечатайте все возможные ответы на ваши впоросы в Колонке А, в точности так как они давались. Изменения в заглавных или строчных буквах, ошибки в написании, приведут к неправильным результатам.

5. Используйте =countif Функцию в колонке B

Здесь начинаются тонкие моменты. Для того, чтоб построить диаграмму, вам нужно знать частоту появления ответа на вопрос. Чтобы сделать это, используйте формулу countif, которая подсчитает ответы из вашей Google Форм с предыдущего листа в заданной колонке. Применив формулу раз (к одной ячейке в строке), вы можете применить ее к остальным строкам.

Для работы формулы countif, нужно два аргумента: название колонки таблицы которую вы хотите обработать (которую мы называли range (диапазон) в 3-ем шаге) и ответ на вопрос, частоту появления которого вы хотите подсчитать (которые мы напечатали в колонке A в 4-м шаге).

Далее, для вашего первого ответа, который вероятнее всего находится в ячейке А1, вы должны напечатать название формулы, которое выглядит так: =countif( . Появится диалоговое окно, с предложениями, как вы можете корректно завершить формулу. Далее, вам надо будет продолжить формулу, указав имя диапазона, а потом запятую, и название ячейки в которой содержится ответ для Google Form, число повторений которого, вы хотите подсчитать.

COUNTIF formulaCOUNTIF formula COUNTIF formulaХотя Google предоставляет инструкции для вашей формулы COUNTIF, но может показаться, что ее слишком много.

В моем примере, чтобы подсчитать количество ответов Strong Disagree, я должна напечатать =countif(peasy, A1), поскольку «peasy» — это имя, которое я задала диапазону в 3-м шаге, и A1 — ячейка, которая содержит ответ — Strongly Disagree в колонке A. Завершите формулу, закрыв скобку, и вместо формулы, появится число, которое показывает, сколько раз повторялся такой ответ.

COUNTIF formula exampleCOUNTIF formula example COUNTIF formula exampleЯ завершила формулу, использовав peasy в качестве диапазона, потом поставила запятую, и адрес ячейки A1, где содержится ответ, повторение которого я хочу посчитать.

После того, как вы сделаете это для одной ячейки, Google Sheet автоматически может применить формулу ко всем ячейкам. Наведите курсор на квадратик в нижнем правом углу ячейки с формулой, пока не появится перекрестие +. Затем щелкните и потяните крестик вниз, до тех пор, сколько у вас есть ячеек с ответами, и формула распространится на другие ячейки и подсчитает для вас количество ответов на Google Forms.

Extend the formulaExtend the formula Extend the formulaЧтобы распространить формулу на остальные ячейки, щелкните по квадратику, который обведен в кружок на картинке. Удерживайте и тяните курсор вниз, чтобы включит все строки к которым вам нужно применить формулу. В это примере, я потянула курсор вниз до B5, так как последний ответ находится в ячейке А5.

После того, как вы потяните квадратик вниз до последнего ответа, вы увидите, что после каждого ответа появились цифры, которые представляют частоту данного ответа, на вопрос в Google Forms.

Spreadsheet displays values for each Google Forms responseSpreadsheet displays values for each Google Forms response Spreadsheet displays values for each Google Forms responseПосле того, как вы потяните формулу вниз, в колонке В появятся числа, которое показывают сколько раз повторился каждый ответ в Google Forms.

6. Постройте Диаграмму

Двигаемся дальше, и теперь давайте узнаем как построить диаграмму в Google Docs Sheets. Теперь когда у вас подсчитаны частоты для ответов, вы можете можете создать диаграмму результатов для своих Google Форм.

Сперва, выделите все ячейки, включая ответы в колоне А и соответствующие им частоты в колонке В. Далее, выберите в панели инструментов вкладку Insert (Вставить) и прокрутите вниз до пункта Chart.

Insert chart in Google SheetsInsert chart in Google Sheets Insert chart in Google SheetsВ панели инструментов выберите Insert, а затем Chart.

Появится новое диалоговое окно — Chart Editor. Здесь, вы можете выбирать, тип диаграммы, которую вы хотите использовать. В моем случае, хорошо подойдут гистограмма или круговая диаграмма. Я выбрала гистограмму (column graph).

Chart EditorChart Editor Chart EditorВ Chart Editor, выберите ваш график или тип графика во вкладке Chart types.

7. Настройте Вашу Диаграмму

Наконец, мы можем настроит диаграмму наших Google Forms результатов, используя вкладку Customize. Дайте графику название, добавьте значения и названия для осей x и y, и измените фон или цвета графика.

Customize chartCustomize chart Customize chartНастройте ваш график, используя вкладку Customization.

После того, как вы настроили вашу диаграмму, нажмите Insert (Вставить), чтобы вернуться в таблицу, где будут построены результаты для ваших Google Форм. (Замечание: Возможно вам придется воспользоваться мышкой, чтобы сместить график, который может загородить колонки с данными).

Your Google Forms Results Chart displaysYour Google Forms Results Chart displays Your Google Forms Results Chart displaysОкончательная Диаграмма Показывающая Результаты для Google Форм

Чтобы сохранить, копировать или опубликовать график, щелкните по стрелке с выпадающем меню в верхнем правом углу диаграммы.

Google Forms Results Chart OptionsGoogle Forms Results Chart Options Google Forms Results Chart OptionsСохраните, скопируйте или опубликуйте диаграмму с результатами для Google Forms.

Заключение

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

Если вы хотите узнать больше об использовании Таблиц Google, посмотрите этот урок:

Заметка редактора: Эта статья была первоначально опубликована в 2014 году. Она был полностью пересмотрена нашими сотрудниками, чтобы она соответствовала нынешним реалиям и не содежала ошибок — при особой поддержке Laura Spencer.

Возможности Google Forms для онлайн-школы

Google Forms — отличный инструмент для проведения онлайн-опросов и тестирования. С его помощью онлайн-школа может собирать статистику, данные, отзывы, проверять знания учеников и регистрировать на мероприятие.

Содержание

Что можно сделать с помощью Google Forms

Проводить опросы и анкетирование

Google Forms

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

Тестировать уровень освоения учебной информации

Google Forms

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

Собирать отклики на вакансии и тестовые задания для соискателей

Google Forms

Можно провести предварительный отсев, оценив выполненное тестовое и/или ответы кандидатов на ваши вопросы.

Собирать и обрабатывать отзывы

Google Forms

Можно попросить оценить по шкале, выбрать несколько вариантов ответа или написать развернутый отзыв о работе преподавателя, куратора и о курсе вообще.

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

Чем удобны Google Forms

Доступность. Онлайн-сервис доступен 24/7 на всех девайсах через браузер. Вы можете быстро создать нужный опросник, отправить респондентам или встроить форму сразу на свой сайт, моментально анализируя полученные ответы.

Гибкость. Вы можете настроить опрос под свои нужды, используя разные варианты: респонденты могут выбирать один ответ из многих, отмечать несколько, писать развернутые ответы на открытые вопросы.

Статистика. Сразу после получения ответов формируются отчеты с диаграммами, вы можете привязать к форме таблицу, куда будут экспортироваться ответы, для большего удобства.

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

Безопасность. Все данные хранятся в облаке, вы не потеряете их, если сломается ноутбук или компьютер. Можно настроить доступ сотрудников к редактированию формы.

Как настроить google forms: пошаговая инструкция

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

Google Forms

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

  • анкета для сбора любой нужной информации;
  • тестирование для проверки уровня знаний;
  • рабочий лист — рабочая тетрадь — для освоения материала и
  • тестирования в процессе обучения;
  • оценка курса для сбора обратной связи от учеников.

После того как вы выбрали шаблон (или пустую форму), можно приступать непосредственно к созданию теста.

Оформление Google Forms

Google Forms

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

Google Forms

Меню для настройки

Меню формы максимально простое:

  1. Добавить новый вопрос.
  2. Импорт вопросов из ранее созданной формы.
  3. Вставка блока с названием и описанием (можно добавить пояснения или дополнительную информацию для теста).
  4. Вставка изображения.
  5. Вставка видео.
  6. Добавить раздел (разделяет опрос на несколько страниц).

Настройка тестирования

Чтобы назначать баллы и таким образом автоматизировать проверку, нужно включить опцию «Тесты» в настройках.

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

Google Forms

Типы вопросов в Google Формах

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

Открытые вопросы

Пользователям нужно написать правильный ответ самостоятельно. Автоматизировать проверку в этом случае можно, только если вы проверяете, например, регулярные/короткие выражения, числа.

Текст (строка)

Предполагает краткий ответ, можно ограничить количество знаков, которые напишет пользователь, а также обозначить тип вводимых данных и определить количество баллов за правильный ответ.

Google Forms

Текст (абзац)

Подходит для развернутых ответов, например, отзывов и т. д.

Закрытые вопросы

Выбор правильных вариантов из предложенных.

Один из списка

Можно выбрать только один вариант из нескольких или написать свой, если добавить вариант «другое».

Google Forms

Несколько из списка

Верных вариантов ответа может быть несколько →

Google Forms

Раскрывающийся список

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

Google Forms

Шкала

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

Google Forms

Сетка (множественный выбор)

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

Google Forms

Сетка флажков

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

Google Forms

Выбор даты по календарю — полезная функция при бронировании и записи на консультацию и т. д. Можно в этом же вопросе указать и время.

Google Forms

Время

Можно обозначить продолжительность или время начала действия.

Загрузка файлов

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

Google Forms

Как собирать статистику

Статистика с отчетами начинает формироваться сразу, как только появляются первые ответы. В самой форме отчеты выглядят подобным образом →

Google Forms

Вы можете посмотреть сводку с отчетом по всем ответам, по отдельному вопросу или отдельному респонденту →

Google Forms

Результаты опроса можно просматривать в Google-формах или в привязанной Google-таблице. Ее можно создать автоматически, нажав на кнопку, или привязать к ответам уже существующий файл.

Google Forms

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

Google Forms

Обрабатывать результаты объемных опросов в таблице гораздо удобнее

Как вставить гугл форму на сайт

Google Формы можно отправлять по почте, отправить ссылкой или встроить сразу на сайте или лендинге, используя HTML-код.

Google Forms

Можно настроить ширину и высоту отображения формы по настройкам сайта.

Дополнения google форм

Изначально Гугл формы — простой и лаконичный инструмент с достаточным, но не обширным функционалом. Но вы всегда можете использовать дополнения.

Google Forms

С их помощью вы можете:

  • превратить тест в экзамен с выдачей сертификата;
  • ограничить или отследить время выполнения теста, включив таймер;
  • использовать дополнительные функции для тестирования: настройка внешнего вида и анимации и т. д.;
  • многое другое.

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

Бонус: 3 интересных дополнения Google Forms для онлайн-школ

1. Certify’em

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

Google Forms

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

Google Forms

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

2. Timer + Proctor

Дополнение специально для проверки знаний. Можно отслеживать время выполнения задания, ограничивать продолжительность тестирования и даже отслеживать действия студента во время теста: переключал ли пользователь вкладки, переговаривался ли с кем-то.

Google Forms

В настройках 3 вкладки. На главной вы выбираете, нужно ли включать таймер и отслеживание действий, количество попыток, класс, если вы работаете через Google Classroom.

Google Forms

На вкладке Timer вы можете ограничить продолжительность тестирования по времени и датам, когда тест будет доступен, на вкладке Proctor — выбрать, какие действия пользователя нужно отслеживать. После того как вы сохраните свои настройки, нужно скопировать получившуюся ссылку на вкладке Main — тестирование будет проходить на отдельной платформе.

3. Telegram Bot Notification

Бот присылает уведомление о новых ответах в Телеграм, что позволяет оперативнее реагировать на действия пользователей.

Google Forms

Может быть полезно, например, при регистрации пользователей на мероприятие.

Авторам онлайн-школ также будут интересны другие наши статьи:

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

Страницы Интернета

Устанавливаем и стилизуем Google Форму под свой сайт

Красивые Google Формы

Если вы уже оценили эффективность такого инструмента, как форма обратной связи на своем сайте — этот пост для вас. Сегодня мы расскажем как без особых усилий и знаний в вебдизайне и программировании сделать из обычной формы гугл — точную копию красивой формы на вашем сайте и собирать заявки, обращения, контакты и базу email — прямо в Google Таблицу!

  1. Учетная запись Google
  2. Доступ к коду вашего сайта
  3. 20 минут полной концентрации

Предположим все это у нас есть в наличии и приступим к делу — пошаговое руководство как изменить стиль формы гугл.

Создаем Google Форму

Идем в Google Диск и создаем нашу форму.

Для данного примера мы взяли простую форму обратной связи с такими полями:

  1. Имя (текстовое поле)
  2. Телефон (текстовое поле)
  3. Email (текстовое поле)

Как выглядит Google Форма

Как правильно будет замечено — мы не добавили проверку данных. Проверка данных — штука полезная, ибо позволит проследить, что вам не будет отправлено вместо email, например, словоtest. Проверка добавляется так:

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

После создания формы — нам надо убедиться, что она корректно привязана к таблице (или привязать заново). Таким образом мы удостоверимся, что все данные, которые будут вноситься в форму никуда не денутся, а будут попадать прямиком в таблицу. Для этого возвращаемся в редактор формы и из меню выбираем ОтветыСохранять ответы:

Можем приступать к следующему шагу.

Копируем код формы

И вот здесь для многих начинается хардкор. Но не спешите все бросать — мы с вами!
Итак — в редакторе форм нажимаем на кнопку .
В любом месте на странице с открывшейся формой нажимаем правой кнопкой мыши и выбираем:

  • Google Chrome — Проверить элемент
  • Mozilla Firefox — Исходный код страницы

Поздравляем — вы уже можете вставлять этот код на сайт и применять к нему свой CSS. Но и это еще не все — страница подтверждения отправки формы по-прежнему ссылается на стандартную от Google. Что-бы изменить страницу потверждения — нам необходимо изменить следующий код:
Заменив его на:

Все готово! Форма работает, данные заносятся в таблицу. Остался всего один трюк — маленький, но важный. Трюк этот называется — оповещения об изменениях в таблице.
Для настройки оповещений — открываем таблицу, куда заносятся данные из формы (мы настраивали ее в самом начале пути). В меню таблицы переходим по пути ИнструментыУведомления. В открывшемся диалоговом окне выбираем следующие пункты:

  • Уведомлять (ВАШ-АДРЕС-ЭЛЕКТРОННОЙ-ПОЧТЫ) о следующих действиях:выбираем Отправка формы
  • Способ уведомления. выбираем Сообщение электронной почты — мгновенное

Таким образом каждый раз, как кто-то заполнит и отправит форму — вы получите уведомление о том, что таблица изменена. Удобно? Безусловно!

Итоги

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

Напишите в комментариях как вы используете Google Формы на своем сайте и используете вообще.

Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.

Пошаговое руководство как изменить стиль формы гугл.

Как вставить Google forms на сайт

Как сделать из обычной формы гугл — точную копию красивой формы на вашем сайте и собирать заявки, обращения, контакты и базу email — прямо в Google Таблицу!

Для начала определим что нам нужно:

  1. • Учетная запись Google
  2. • Доступ к коду вашего сайта
  3. • 20 минут полной концентрации

Предположим все это у нас есть в наличии и приступим к делу —

Создаем Google Форму

Идем в Google Диск и создаем нашу форму. ссылка — как сделать Google forms

Для данного примера мы взяли простую форму обратной связи с такими полями:

  1. • Имя (текстовое поле)
  2. • Телефон (текстовое поле)
  3. • Email (текстовое поле)

Стилизовать форму (менять шрифты, цвета и добавлять картинки) пока не будем. Нас интересует только сама структура. По итогу форма должна выглядеть так:

Как выглядит Google Форма

Как правильно будет замечено — мы не добавили проверку данных. Проверка данных — штука полезная, ибо позволит проследить, что вам не будет отправлено вместо email, например, слово test. Проверка добавляется так:

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

После создания формы — нам надо убедиться, что она корректно привязана к таблице (или привязать заново). Таким образом мы удостоверимся, что все данные, которые будут вноситься в форму никуда не денутся, а будут попадать прямиком в таблицу. Для этого возвращаемся в редактор формы и из меню выбираем ОтветыСохранять ответы:

Можем приступать к следующему шагу.

Копируем код формы

Итак — в редакторе форм нажимаем на кнопку «ОТКРЫТЬ ФОРМУ».
В любом месте на странице с открывшейся формой нажимаем правой кнопкой мыши и выбираем:

  • Google Chrome — Проверить элемент
  • Mozilla Firefox — Исходный код страницы

Вашему взору откроется весь код формы.

Копируем весь код, который находится между тегами <form> и </form>. Самый простой способ это сделать — это, открыв исходный код страницы, нажать комбинацию клавиш Ctrl+F и введя в поле поиска необходимый тег. После этого — правой кнопкой по выделенному коду и Копировать.

Поздравляем — вы уже можете вставлять этот код на сайт и применять к нему свой CSS в отдельном файле.

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

При этом орма отправки отправляет данные человека на сервер google, где форма обрабатывается.

Но можно сделать так, что от гугла останется только дизайн. Страница подтверждения отправки формы по-прежнему ссылается на стандартную от Google. Что-бы изменить страницу подтверждения — нам необходимо изменить следующий код:

Все готово! Форма работает, данные заносятся в таблицу. Остался всего один трюк — маленький, но важный. Трюк этот называется

Оповещения об изменениях в таблице Google forms

Для настройки оповещений — открываем таблицу, куда заносятся данные из формы (мы настраивали ее в самом начале пути). В меню таблицы переходим по пути ИнструментыУведомления. В открывшемся диалоговом окне выбираем следующие пункты:

  • Уведомлять (ВАШ-АДРЕС-ЭЛЕКТРОННОЙ-ПОЧТЫ) о следующих действиях: выбираем Отправка формы
  • Способ уведомления. выбираем Сообщение электронной почты — мгновенное

Таким образом каждый раз, как кто-то заполнит и отправит форму — вы получите уведомление о том, что таблица изменена. Удобно? Безусловно!

Добавить комментарий

Ваш адрес email не будет опубликован.