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

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

Учетная запись Google

Доступ к коду вашего сайта

20 минут полной концентрации

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

Имя (текстовое поле)

Телефон (текстовое поле)

Email (текстовое поле)

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

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

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

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

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

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

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

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

Вашему взору откроется весь код формы. Для неподготовленного человека - это кодовый ад с кучей непонятных и, на первый взгляд, ненужных строчек. Выдыхаем. Копируем весь код, который находится между тегами и . Самый простой способ это сделать - это, открыв исходный код страницы, нажать комбинацию клавиш Ctrl+F и введя в поле поиска необходимый тег. После этого - правой кнопкой по выделенному коду и Копировать .

Поздравляем - вы уже можете вставлять этот код на сайт и применять к нему свой CSS. Но и это еще не все - страница подтверждения отправки формы по-прежнему ссылается на стандартную от Google. Что-бы изменить страницу потверждения - нам необходимо изменить следующий код:
Заменив его на:
var submitted=false;
Все готово! Форма работает, данные заносятся в таблицу. Остался всего один трюк - маленький, но важный. Трюк этот называется - оповещения об изменениях в таблице .
Для настройки оповещений - открываем таблицу, куда заносятся данные из формы (мы настраивали ее в самом начале пути). В меню таблицы переходим по пути Инструменты -- Уведомления . В открывшемся диалоговом окне выбираем следующие пункты:

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

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

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

Кстати - мы подготовили демонстрацию работы, просто нажмите на кнопку.

Надо провести какой-нибудь опрос или хотите разместить анкету для заполнения заявки на вакансию? Раньше, чтобы сделать что-то подобное, создавались отдельные сайты, это делают и сейчас. Но нет смысла создавать отдельный проект ради какого-то опроса, к тому же уйдёт немало времени и денег. И сейчас есть простое решение, упрощающее разработку такого проекта — формы от Гугла. Благодаря ему вы сэкономите кучу времени, своих ресурсов и нервов. Изначально мы разберём функционал форм, а затем создадим свой тест на базе этой платформы. Раз это часть вселенной Гугла, то для старта потребуется Google-аккаунт, почты достаточно.

Что будем делать в формах?

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

Создание формы.

Для создания формы потребуется зайти в Google Drive (он же Гугл диск). Следом щёлкните по кнопке создать, ещё, Google формы, после чего в новой вкладке откроется страница создания новой формы. Это можно сделать ещё быстрее с помощью сочетания клавиш Shift + o.

Страница 1. Основная информация.

Итак, на 1 странице создадим текстовый элемент, дату и выбор одного ответа из предоставленных.
Создаём текстовое поле.

Создание текстового поля

Заполнение поля вводом имени

Текстовое поле нужно для заполнения поля в произвольной форме. Мы же создадим инпут, в котором юзер должен будет ввести своё имя. Заполним поле вопрос: впишем туда “Введите своё имя”, чтобы человек понял, что ему ввести в этой графе. Пояснение можно оставить пустым, тип вопроса — текст. Рекомендуется сделать поле обязательным, поставив галочку на этой строке.

Работа с датой

Для добавления следующего элемента щёлкните “Добавить элемент”, а если вы уже определились, какое поле будет далее — можете кликнуть по дропбоксу, и вам выпадет список, в котором можно выбрать тип следующего поля. Нам надо, чтобы пользователь ввёл свою дату рождения. Для этого выбираем тип элемента дата. В графе вопроса пишем “Дата рождения”, в пояснении можно вписать “Введите дату вашего рождения” или же оставить его пустым.

Элементы выбора ответов

Задать варианты выбора ответов

В Гугл формах есть два вида выбора ответов: радиокнопки и чекбоксы — выбор одного или нескольких ответов. Создадим элемент выбора ответа из предоставленных, это будет выбор наличия опыта работы: есть или отсутствует. Добавляем элемент с типом “Один из списка”. Заполняем вопрос “Опыт работы”, пояснение: “Укажите наличие опыта работы в этой сфере”, а варианты ответа: “Да” и “Нет”. Добавим текстовое поле, в котором человек сможет указать, сколько лет он проработал редактором.

Информация о себе

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

Страница 2. Опыт работы

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

Флэшбэк. Редирект на следующую страницу.

Вернёмся к выбору ответов о наличии опыта работы и редактируем этот элемент. Рядом с типом вопроса ставим галочку на переходе на следующую страницу. Возле 1 ответа, положительного, ставим переход на 2 страницу (Опыт работы), возле отрицательного: отправка формы, поскольку не следует спрашивать человека о том, чего у него нет.

Насыщаем элементами 2 страницу

Здесь ничего разжёвывать не требуется, поскольку принцип тот же, что и в 1 странице: текстовое поле, дата и элементы выбора. В первом юзер должен будет рассказать о своём опыте, во втором — указать период работы в компании, в третьем — более или менее 5 лет.

Каркас формы

Готовая анкета в Google Forms

Можно избавиться от дефолтного минимализма формы, выбрав красивое оформление из предоставленных Гуглом. Для этого в верхнем меню кликните по кнопке “Сменить тему”, и справа выпадет блок с готовым дизайном. Выбрать его можно одним кликом по нужной теме, закрыть — кликом на кнопку “Изменить вопросы”. Также можно настроить выбранную тему (шрифты, фон формы и фон страницы), щёлкнув на “Настройка”.

Дополнительные настройки в Google Forms

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

Работа с ответами

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

Добрый день, уважаемые ИП!

И первым роликом как раз станет видео про сервис Google Формы. Можете посмотреть небольшое шестиминутное видео, или прочитать обычную текстовую версию ниже.

Итак, начнем. Прежде всего, необходимо завести аккаунт в Google:

Если уже есть почта в Gmail, то можете сразу приступать к созданию первого опроса. Для этого нужно зайти в Google Disk

И сразу создаем опрос через меню “Создать”

Заполняем название формы и варианты ответов:

Ничего сложного здесь нет, быстро разберетесь. Чтобы добавить еще один вопрос в вашем опросном листе достаточно нажать на значок со знаком “+” (см. выше).

Чтобы изменить цветовое оформление меняем цветовую палитру как на рисунке ниже:

Но прежде чем публиковать опрос в общем доступе, нужно сделать еще несколько настроек:

“Собирать адреса электронной почты” — не рекомендую выставлять эту настройку, так как это отпугнет ваших респондентов. С какой стати они должны “светить” свои емайл-адрес?

“Отправлять форму не более одного раза” – тоже не нужно, так как в этом случае опрос смогут пройти только те люди, у которых есть учетная запись в Google. А в России она есть далеко не у всех. Да и не хотят люди раздавать свои email направо и налево.

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

“Посмотреть другие ответы и сводные диаграммы” – не рекомендую, особенно для коммерческих важных опросов. Таким образом вы просто сольете ценные маркетинговые данные своим конкурентам. Я бы такую возможность просмотра ответов оставил исключительно для незначимых опросов. Например, для опроса из серии “Какая порода кошек вам нравится?”

И последняя значимая настройка в Google Формы, которую необходимо сделать:

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

Убедитесь, что настройки доступа выставлены как на рисунке вше и нажмите на кнопку “Сохранить изменения”

Как опубликовать опрос? Какую ссылку использовать?

Нажимаем вот на этот значок в правом верхнем углу:

И видим наш первый простейший опрос:

Можете убедиться, что он работает и даже ответить на вопросы . Как только вы ответите, мне придет уведомление на почту. Волшебство, да и только =)

Как посмотреть ответы? Где статистика? Как получить ответы на почту?

Просто откройте вкладку “Ответы”, чтобы полюбоваться на красивые диаграммы, которые весьма помогают при принятии решений.

И последнее по настройкам опроса:

Для того, чтобы не забыть про свой же опрос =) Настройте оповещения о новых ответах на свою электронную почту. Для этого нужно нажать на неприметный значок с тремя точками:

И включить уведомления на электронную почту:

Для обработки в Excel можно будет скачать ответы в формате CSV. Но эта опция будет полезна уже для кудесников Excel и любителей красивых презентаций.

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

Предельно ясные вопросы и ответы. Не нужно писать вопросы в стиле писем МинФина =) Никто даже читать не будет слишком длинные или заумные формулировки.

Перед тем как отправить респондента на опрос по ссылке, объясните людям ЗАЧЕМ он нужен вашей аудитории. Обрисуйте проблему и что даст это респонденту. Это важный момент, о котором часто забывают. Не нужно писать, что это нужно ВАМ. Никого вообще не волнует, чего хотите вы. Но думаю, что большинство ИП и так это знают, так как уже прошли неплохую школу выживания =)

Необходимо сделать подводку для опроса. Это может быть письмо, статья на сайте, в которой вы обращаетесь к коллективному разуму. Если просто разместить кнопку на сайте или в соцсетях “Пройдите мой опрос”, то эффект будет скорее всего нулевым.

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

Обязательно сообщите, что опрос анонимный. Понятно, что он на самом деле должен быть анонимным.

Что-то статья слишком большая получилась, пора закругляться, иначе я долго на эту тему могу писать. Если у вас есть что дополнить, то можете написать об этом в комментариях.

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

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

Опрос, как вы уже догадались, проводится будет с помощью Google Forms

Шаг первый. Создание формы опроса

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

1 Создание формы

После чего нам сразу отрывается новая форма:

Не забываем дать красивое и понятное название.

2 Формируем вопросы

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

Текст — можно настроить на то чтобы содержал число, e-mail или URL, первое в обработке использовать удобно остальное в основном для идентификации и связи с респондентом, нам не интересно.

Текст (абзац) — для автоматической обработки не самый удобный тип вопроса

Один из списка — хороший вариант для однозначного ответа (главное не добавлять вариант "другое")

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

Выпадающий список — по сути аналогичен одному из списка

Шкала — удобный способ получить некую оценку, так же легко обрабатывается

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

Дата — очень удобный способ получить дату или дату+время, легко обрабатывается

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

Исходя из того на сколько вы знакомы с методами обработки данных (особенно текстовых) и следует формировать перечень вопросов и их соответствие типам.

Если вы хотите встроить опрос непосредственно в страницу сайта, то воспользуйтеть Файл --> Встроить в веб-страницу

Ширину и высоту можно указывать в процентах, ниже встроена с шириной 95%

Для гуру HTML, желающим интегрировать форму опроса конкретно в свой сайт, можно со страницы формы скопировать тег со всем содержимым и самостоятельно настраивать стили.

Шаг второй. Сбор ответов и их анализ

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

Откроется таблица с ответами.

Но это нас нас не очень интересует, так как нам надо визуализировать данные.

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

1. Обрабатываем числовые данные по всем вопросам Обработка чисел по всей таблице не составляет большой проблемы, так как делается она стандартными формулами табличного редактора.
Например:
Средний возраст: = AVERAGE ("Ответы на форму (1)"!B:B )
Медиана возраста: = MEDIAN ("Ответы на форму (1)"!B:B )
Полный список функций можно найти их там громадное количество.2. Подсчитываем число текстовых ответов В нашем случаем интересно будет подсчитать количество респондентов по странам:
= COUNTIF ("Ответы на форму (1)"!C:C ; "=Россия" )
И так для каждого варианта ответа.
3. Получаем часть таблицы

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

Для этого воспользуемся более мощным инструментом, приближающим таблицы Google к полноценным базам данных — SQL запросам.

QUERY ()

Рассмотреть тут все варианты запросов нереально, но рассмотрим самый основной.

Проблема с форматированными ячейками: данные из ячеек с форматами отличными от чисел и текста не всегда воспринимает: принудительно установите на исходной таблице формат "Обычный текст"

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

ВНИМАНИЕ! В полученной в результате запроса таблице нельзя вносить изменения, также нельзя чтобы таблица попадала на заполненные ячейки.

Обработать полученные данные можно так же как и в пункте 1 и 2

Шаг третий. Визуализация

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

Диаграммы, для порядка, лучше держать на отдельных листах