как вставить гугл форму на сайт гугл
Создаем форму обратной связи с помощью Google Forms
Данный пост посвящен прекрасному инструменту Google Forms, как за 10 минут сделать форму обратной связи на сайте или более полезные вещи.
Довольно давно я мечтал задействовать Google Forms в своей работе и вот наконец-то нашелся повод. Учитывая, что я не дружу с бэкэндом, данное решение для меня более простое и быстрое, более того удобное для клиента.
Первое поле «Страница» я сделал неспроста, этому полю мы делаем display: none; и в value поля записываем текущий URL страницы.
Но теперь при отправке формы пользователь будет попадать на страницу Google с сообщением об успешной отправке формы, что немного не соответствует ожиданиям пользователя, который отправил форму на сайте. И здесь мне на помощь пришел другой инструмент Google Search, для тега form добавляем 2 атрибута target, onsubmit и js с iframe.
Теперь мы можем открыть любую страницу пользователю после отправки формы.
Отправленные данные записываются в таблицу, при желании ее можно расшарить по постоянному url, как HTML, CVS, TXT, PDF, RSS, XLS, ODF.
Понятно дело, что при таком подходе данные могут валидироваться только на клиентской стороне с помощью js, если нужно.
Практическое применение может быть не только для формы обратной связи, в моем случае данная форма используется на статичной landing page для заказа обратного звонка. При отправке формы продавцы получают письмо о новой заявке, а уже в самом Google Drive продавцы могут редактировать документ и вписать свою фамилию напротив отработанной заявки.
Сейчас заявка на обратный звонок составляет 20% от общего числа звонков, что довольно ценно для бизнеса.
Как добавить Google форму на свой сайт
Если вы еще не знакомы с бесплатным, но мощным инструментом Google Формы (Google Forms), сейчас самое время для этого.
Google Формы – это быстрый и простой способ собирать информацию от ваших пользователей через онлайн-формы. Все, что нужно для их использования – это наличие электронной почты Google, а добавить их на сайт очень просто. Формы от Google можно использовать для создания простой контактной формы, формы опроса клиентов или чего-то более сложного. И в этой статье мы предоставим вам всю информацию, которая необходима, чтобы добавить Google форму на свой сайт.
Что такое Google Формы?
Google Формы – это один из множества бесплатных приложений от Google. Инструмент форм можно использовать для опроса, сбора контактной информации, проведения экзамена, приема заказов, передачи файлов и многое другое.
Результаты и информация из форм легко доступна, и она хранится в облаке как часть вашей учетной записи Google Диск. Для создания форм существует большой выбор готовых шаблонов, а их редактирование имеет интуитивно понятный интерфейс.
Если вам нужно собирать информацию в Интернете, например, вопросы клиентов, запросы технической поддержки или заказы товаров/услуг, Google Формы эффективно для этого подходят. Давайте создадим свою первую форму и добавим ее на свой сайт.
Как создать Google форму
Первым шагом в этом процессе станет создание аккаунта Google (если у вас его еще нет). После этого вы можете перейти непосредственно к Google Формам.
Вам сразу будет предоставлены готовые к работе шаблоны Google Форм, которые могут служить основой для вашей собственной формы. Если вы решите начать с пустой формы – просто нажмите на большом блоке с плюсиком (+).
Кроме типовых элементов форм, таких как поля и кнопки, вы можете легко добавить ряд других элементов в свои формы. Эти дополнительные элементы могут содержать видео с YouTube, изображения с Google Photos, вопросы и обычный текст.
Изменение вида Google формы
Вы можете просмотреть свою форму в любой момент, и можете легко изменить цветовую палитру дизайна. С помощью нескольких настроек вы можете настроить доступ к ней и то, как форма будет работать. Эти настройки включают возможность введения нескольких ответов от одного пользователя, порядок отображения вопросов, обязательность авторизации пользователя и сообщение о подтверждении.
Публикация Google формы
Как только вы будете довольны созданной формой, вы можете сделать ее доступной, нажав кнопку Отправить в верхнем правом углу экрана. Формой можно делиться через электронную почту, с помощью ссылки или через встраивание на странице сайта. Есть также возможность делиться формой в социальных сетях.
Просмотр результатов заполнения Google Формы
После того как вы сделаете вашу форму доступной для аудитории, или через ссылку, либо через ваш сайт, вы можете начать следить за результатами заполнения формы. Это происходит через вкладку «Ответы» в дизайнере формы.
Одной из замечательных функций Google Forms является та возможность, которая позволяет легко просматривать ответы в режиме реального времени, как отдельно, так и в виде резюме. Также вы можете посмотреть ответы в электронной таблице Google Таблицы, с помощью которой вы сможете фильтровать результаты многими различными способами.
Включение уведомлений по электронной почте при получении ответов формы является еще одной полезной функцией, которая поможет вам отслеживать взаимодействия пользователей.
Как добавить Google форму на сайт
Самым быстрым способом добавления формы Google на сайт является копирование и вставка кода iframe в код страницы на вашем сайте.
Примерный вид кода для вставки:
ID-ФОРМЫ для реальной формы будет заменен уникальным идентификатором.
После того как вы вставите в код страницы этот короткий код формы, на сайте он будет заменен на соответствующую Google форму, которая уже будет готова взаимодействовать с посетителями вашего сайта.
[Инструкция] Создание гугл-тестов (гугл-форм)
Спасибо пользователям Exosphere и Yuriy_krd за помощь и конструктивную критику
Иногда кажется, что создать что-то по конструктору весьма быстро и просто: хоть сайт, хоть опрос, хоть таблицы. Однако часто упускаешь из внимания какие-то обидные мелочи, из-за которых время уходит впустую и приходится переделывать работу из-за обидного пустяка. Согласитесь, неприятно. Я решил пройти все процессы за вас и предупредить о возможных неприятных мелочах, а также помочь новичкам.
В этой статье мы с вами сделаем гугл-форму, с помощью которой можно собирать данные, опрашивать сотрудников, клиентов, проводить тестирования гипотез и проч. Кстати, крайне актуальная информация в условиях удалённой работы.
Для создания тестов у вас должен быть активный гугл-аккаунт. Если у вас его нет — обратитесь к инструкции “Создание гугл-аккаунта и работа с Гугл-диском”.
Итак, создаем Форму (тестирование).
Входящая задача
Нам нужно создать тестирование, которое будет собирать набор информации.
Шаг 1 — создание теста (формы)
Переходим в гугл-диск. Для этого нажмите кнопку с точками на панели сверху справа, перейдя по ссылке https://www.google.com/ или https://www.google.ru/ Далее выберите Гугл-диск (далее по тексту Диск).
Шаг 2. Создание Теста (формы)
Как и в любом документе в Гугл-диске, начало работы начинается с кнопки “Создать+” в верхней левой части экрана. Этой кнопкой создаются папки на Диске, создаются все документы.
Нажав кнопку Создать, вы увидите меню. В нем нужно выбрать пункт “Еще”.
Создать форму можно несколькими способами:
1. Создание пустой формы:
Мы создали пустую форму (тестирование).
Шаг 3. Элементы управления
Первое, что нужно сделать — создать имя файла для формы. Это имя внутреннее, под ним форма будет храниться на Диске.
Имя создается, если щелкнуть по словосочетанию “Новая форма” в верхней левой части экрана.
В центре экрана находится поле с названием теста (формы). Его будут видеть тестируемые при выполнении. Изменим его на нужное.
Там же заполним описание к тесту (форме).
Далее автоматически создается первый блок вопроса.
В поле “Вопрос без заголовка” вам нужно вписать свой вопрос. Ниже переименовать Вариант 1 ответа на нужный. Если нужно добавить еще один вопрос — нужно нажать ниже “Добавить вопрос”. Также можно добавить вариант “Другое”, тогда в тесте появится текстовое поле, куда пользователь может внести любой иной ответ в произвольной форме.
Выпадающий список позволяет выбрать вид вопроса. В нашем случае автоматически создан вопрос с одним вариантом ответа. Если выпадающий список раскрыть, то можно выбрать иную форму вопроса.
Внизу блока есть кнопки:
Элемент управления “Настройки”
Закладка Общие и Презентация не должны вызвать каких-то вопросов. Важная вкладка “Тесты” — в ней вы можете настроить балльную оценку для каждого вопроса в форме. Для этого активируйте сдвижной переключатель “Тест” и Ваша форма перейдет в разряд теста. После активации этой кнопки вы можете назначать в списке вопросов правильные ответы и количество баллов за правильный ответ.
После активации переключателя, нажмите кнопку “Сохранить” и перейдите к вопросам. Внизу блока вопроса появиться кнопка “Ответы”:
Нажав на нее, вы перейдете в режим установки верных ответов и начисления баллов за правильный ответ.
Итак, давайте начнем выполнение поставленной в начале задачи.
Шаг 4. Создаем тест
Активируем переключатель “Обязательный вопрос”. Теперь пользователь обязан ввести Фамилию и Имя, чтобы продолжить прохождение теста.
Добавляем второй вопрос нажав на верхнюю кнопку в правой вертикальной панеле элементов управления.
Сделаем этот вопрос необязательным не активируя переключатель внизу справа блока. Даже не ответив на этот вопрос, пользователь продолжит и сможет закончить тестирование.
Создаем еще один блок с единственным вариантом ответа
Добавляем блок с несколькими вариантами ответов
Тут мы также добавили вариант ответа “Другое”.
Теперь настраиваем баллы для правильных ответов. Переходим в пункт настройки в верхней правой части элементов управления (значок шестеренки). Переходим на закладку “Тест” и активируем переключатель. Нажимаем кнопку Сохранить и возвращаемся к списку наших вопросов.
Нажав на любое пустое место блока вопроса, активируем его. Слева внизу активируем блок ответов. Выбираем нужный нам ответ верным и назначаем количество баллов.
Нажимаем кнопку готово. Баллы назначены.
Теперь нам нужно настроить регулярность вопросов и сбор адресов электронной почты.
Опять переходим в пункт “Настройки” в верхней части элементов управления. Активируем нужные нам элементы настроек.
Переходим сразу в закладку “Презентации” и проверяем, что активирован пункт “Показывать ссылку для повторного заполнения формы”. Нажимаем кнопку “Сохранить”
Шаг 4. Отправка теста (формы)
Отправка теста (формы) осуществляется путем нажатии кнопки “Отправить”. В открывшемся окне можно выбрать разные варианты отправки.
Отправка по электронной почте:
В поле “Кому” введите адреса получателей. В этом случае в закладке ответы, Вы будете видеть кто проголосовал, а кто еще не ответил на вопросы формы.
Так же форму можно сразу включить в тело письма.
Следующая закладка — отправить ссылку. В этом случае вы можете отправлять ее не только почтой, но и любым иным способом, в том числе через Мессенджер. Однако в этом случае вы будете вынуждены отслеживать ответивших самостоятельно.
Третий вариант — вставка на сайт. Это для более продвинутых пользователей. Позволяет встроить код с формой сразу в шаблон сайта.
Вы закончили создание формы.
Ссылка на тестовую форму, созданную при написании инструкции.
Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.
Пошаговое руководство как изменить стиль формы гугл.
Для начала определим что нам нужно:
Создаем Google Форму
Идем в Google Диск и создаем нашу форму. ссылка — как сделать Google forms
Для данного примера мы взяли простую форму обратной связи с такими полями:
Стилизовать форму (менять шрифты, цвета и добавлять картинки) пока не будем. Нас интересует только сама структура. По итогу форма должна выглядеть так:
Открываем форму и убеждаемся, что она рабочая. Для этого заполним тестовыми данными и нажмем Готово:
Можем приступать к следующему шагу.
Копируем код формы
Вашему взору откроется весь код формы.
Если мы на этом останавливаемся — то дизайн полностью можно менять используя классы, которые буду указаны в скопированной части формы, которую вы поставили на ваш сайт.
При этом орма отправки отправляет данные человека на сервер google, где форма обрабатывается.
Все возможности Google Forms
Елена Соловьева, менеджер проектов в Лаборатории Касперского, специально для блога Нетологии написала статью о том, как использовать Google Forms по максимуму.
Google Формы — онлайн-сервис для создания форм обратной связи, онлайн-тестирований и опросов. Инструмент популярный, но весь спектр его возможностей используется редко. В статье я расскажу, когда и для чего пригодятся Google Формы и как максимально эффективно их применять.
Польза Google Форм
Каждая форма в Google Формах представляет собой веб-страницу, на которой размещается анкета или квиз. Все, что нужно для работы с формами, — это иметь аккаунт в Google.
Что можно сделать с помощью Google Форм
Чем удобны Google Формы
Как правильно настроить этот инструмент, чтобы извлечь из него максимум? Я подготовила несколько пошаговых рекомендаций.
Настройте форму
Начните с основных настроек, которые задают параметры и технические характеристики формы.
С помощью верхней панели настраивается поведение формы:
Дополнения. Кликните левой кнопкой мыши по иконке. Здесь появятся дополнения к форме, которые вы настроите. Отсюда же дополнения запускаются:
Внешний вид. Вы можете выбрать однотонную заливку формы или воспользоваться каталогом тем. Чтобы открыть каталог, кликните левой кнопкой мыши на иконку иллюстрации. Выберете любую (некоторые анимированы) или загрузите свою. Тема задает шапку формы и фон.
Предпросмотр. Кликните левой кнопкой мыши на иконку глаза, чтобы посмотреть, как ваши адресаты увидят форму. Эта кнопка пригодится в конце формирования опроса.
Настройка. Кликните левой кнопкой мыши на иконку шестеренки и задайте параметры формы.
Чтобы собирать адреса электронной почты тестируемых, отметьте параметр «Собирать адреса электронной почты». Его активация автоматически добавляет обязательное поле «Электронный адрес» в начале формы.
Кнопка «Отправить». Нажав на нее, вы можете выбрать способ и параметры отправки. Форма отправляется по почте, ссылкой на форму, через встраиваемый код или соцсети. При отправке по почте есть возможность включить форму в тело сообщения. Ваш адресат сможет заполнить опрос не переходя по внешним ссылкам сразу из письма. К сожалению, такая опция хорошо работает только с Gmail. С другими почтовыми сервисами эта функция работает некорректно.
Действия с формой. Кликните левой кнопкой мыши на иконку после кнопки отправки, чтобы раскрыть меню действий с формой. Форму можно удалить, копировать, распечатать. Это же меню позволяет создать из формы предзаполненный шаблон, подключить дополнения и настроить доступ.
курс
Контент-
стратег
Создайте форму
После того, как вы определились с форматом, настройкой и поведением опроса, раздали права доступа и задали дизайн, можно переходить к созданию самой формы. Сначала продумайте структуру опроса на бумаге, чтобы потом не запутаться в логике в конструкторе.
Конструктор
Первые два поля появились по умолчанию: заголовок формы и электронный адрес (обязательное поле по умолчанию, если вы активировали параметр «Собирать адреса электронной почты»).
Начнем создавать новые поля. Если в продуманной вами логике тест получился очень длинным, разбейте его на разделы и добавьте иллюстрации.
Переходим в панель конструктора справа. Для добавления раздела кликните на нижнюю иконку. Чтобы вставить дополнительный материал, например картинки, видео или текстовое описание, кликните на соответствующую иконку.
Google Формы разрешают загружать картинки прямо с устройства, Google диска, Google поиска, через ссылку или с камеры. Видео подтягиваются из Ютуба.
Чтобы вставить вопрос нажмите на «+» в верху панели. Введите название вопроса (это может быть картинка — кликните на иконку иллюстрации, чтобы ее вставить) и выберете тип вопроса из раскрывающегося меню справа.
Типы вопросов:
Текст (строка). Этот тип вопроса предполагает короткий ответ. Его удобно использовать, когда вы хотите получить email, имя, адрес, цифровое значение, ссылку. В этом типе вопроса доступны функции:
Если вы хотите, чтобы в строку было введено число, выберете из выпадающего меню параметр «Число» вместо «Длина» и установите нужные характеристики:
Таким же образом можно выбрать и настроить параметр «Текст» и «Регулярное выражение»:
Текст (абзац). Этот тип вопроса предполагает развернутый ответ. Его удобно использовать при запросе развернутого фидбека. Все функции и настройки совпадают с типом вопроса «Текст (строка)»:
Один из списка. Этот тип вопроса предполагает выбор одного варианта из предложенных. Его удобно использовать в качестве разводящего по логике формы — в зависимости от выбранного варианта тестируемого перебрасывают на другие разделы или в конец формы. Рассмотрим, как это сделать.
Здесь доступны функции:
Несколько из списка. Этот тип вопроса предполагает выбор нескольких вариантов ответа из предложенных.