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

в 18:05, , рубрики: feedback, Google, Google Docs, google drive, Google Forms, lifehack, Веб-разработка, электронная коммерция, метки: , , , ,

Привет!

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

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

Рассмотрим вариант на примере формы обратной связи:

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

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

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

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

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

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

<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

P.S. Это мой первый пост, надеюсь данная информация пригодится.

Автор: redigen

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js