23 июля 2012 в 22:05

Создаем форму обратной связи с помощью Google Forms

Привет, Хабр!

Данный пост посвящен прекрасному инструменту Google Forms, как за 10 минут сделать форму обратной связи на сайте или более полезные вещи.

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

Рассмотрим вариант на примере формы обратной связи:
  1. Идем в Google Drive и создаем форму с полями
    • Страница
    • Ваше имя (текстовое поле)
    • Ваш email (текстовое поле)
    • Сообщение (текстовое поле)

  2. Сохраняем форму и открываем документ в Google Drive. Во-вкладке «Форма» переходим к активной форме.
  3. Делаем view source странице и копируем html код с тегом form.
  4. Теперь html код можно встроить на странице, причем можно поменять верстку, как угодно, главное, чтобы было валидно и остался атрибут name у полей формы, а так же поля формы с значением hidden.

Все поля имеют name c одинаковым значением, где меняется только одна цифра начиная с нуля.
name="entry.0.single" у первого поля
name="entry.1.single" у второго поля

Первое поле «Страница» я сделал неспроста, этому полю мы делаем display: none; и в value поля записываем текущий URL страницы.

Но теперь при отправке формы пользователь будет попадать на страницу Google с сообщением об успешной отправке формы, что немного не соответствует ожиданиям пользователя, который отправил форму на сайте. И здесь мне на помощь пришел другой инструмент Google Search, для тега form добавляем 2 атрибута target, onsubmit и js с iframe.


<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://%MY_PAGE%';}">

<form action="%ACTION_URL_GOOGLE_FORM%" method="post"
target="hidden_iframe" onsubmit="submitted=true;">


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

Отправленные данные записываются в таблицу, при желании ее можно расшарить по постоянному url, как HTML, CVS, TXT, PDF, RSS, XLS, ODF.

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

Практическое применение может быть не только для формы обратной связи, в моем случае данная форма используется на статичной landing page для заказа обратного звонка. При отправке формы продавцы получают письмо о новой заявке, а уже в самом Google Drive продавцы могут редактировать документ и вписать свою фамилию напротив отработанной заявки.
Сейчас заявка на обратный звонок составляет 20% от общего числа звонков, что довольно ценно для бизнеса.

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

Материалы
www.morningcopy.com.au/tutorials/how-to-style-google-forms
Там же ссылка на платный сервис formexperts.com реализующий похожую функциональность.
Если вдруг стало интересно про получение данных из Google Drive в JSONP. Dynamic FAQ Section w/ jQuery, YQL & Google Docs
redigen @redigen
карма
12,0
рейтинг 0,0
Похожие публикации
Самое читаемое Разработка

Комментарии (13)

  • –14
    добавляю в избранное, может когда-нибудь пригодится))
  • +2
    > главное, чтобы было валидно и остались атрибуты id, name у полей формы

    Влияет только name, а id не имеет значения.
    • 0
      Спасибо, важное замечание, исправил
  • 0
    Использую всё то, о чём написанно, уже полгода вот тут: dot.with.in/ Ещё бы файл грузить можно было! А так, с файлом, система отпадает. Приходится вешать объявление «пошлите файл на емайл».
  • 0
    Возможно я чего-то не понял, но не проще ли Создать форму -> Действия -> Присоединить (Embed)
    будет предложен готовый код, вставив который на свою страницу получаем желанную форму + отправка не редиректит на гугл: результат отправления отображается на той же странице.
    • +1
      Google дает iframe внутри которого мы не можем поменять верстку, как нам нужно. А дизайнеры довольно часто кастомизируют формы.
      • 0
        Извиняюсь, упустил момент (:
  • 0
    Возможно кого-то заинтересует. Создал тестовый аккаунт на «Клиентской базе» и реализовал подобную внешнюю форму.

    Сама форма располагается по внешнему адресу:
    testform.clientbase.ru/questionare.php?id=1
    но может интегрироваться и в сайт, с настройкой стилей.

    Просматривать добавленные анкеты можно тут:
    testform.clientbase.ru/
    Логин: test
    Пароль: tets

    Поддерживает любые типы полей, включая поля типа «Связь» (из других таблиц базы) и поля типа «Файл» (о чем говорилось выше).

    Права пользователя настроены для только для просмотра. Кого заинтересует могу скинуть админский доступ. :)
    • 0
      Извиняюсь, пароль: test
  • 0
    гугл нас сожрёт
  • 0
    MyTaskHelper.ru также умеет создавать формы с файлами и связями, для теста логин и пароль test
  • 0
    Лучше создать форму обратной связи или любую другую на https://www.testograf.ru/ Там это можно сделать бесплатно, а функционал намного шире чем у Гугла.
    Вот подробный мануал, как там создать форму обратной связи.
    Кстати можно еще и уведомления на имейл настроить так, что бы с формы приходил непосредственно сам ответ.

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