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

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