Привет, Хабр!
Данный пост посвящен прекрасному инструменту Google Forms, как за 10 минут сделать форму обратной связи на сайте или более полезные вещи.
Довольно давно я мечтал задействовать Google Forms в своей работе и вот наконец-то нашелся повод. Учитывая, что я не дружу с бэкэндом, данное решение для меня более простое и быстрое, более того удобное для клиента.
Рассмотрим вариант на примере формы обратной связи:
Все поля имеют name c одинаковым значением, где меняется только одна цифра начиная с нуля.
Первое поле «Страница» я сделал неспроста, этому полю мы делаем 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% от общего числа звонков, что довольно ценно для бизнеса.
Если таблицу расшарить в формате 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
Данный пост посвящен прекрасному инструменту Google Forms, как за 10 минут сделать форму обратной связи на сайте или более полезные вещи.
Довольно давно я мечтал задействовать Google Forms в своей работе и вот наконец-то нашелся повод. Учитывая, что я не дружу с бэкэндом, данное решение для меня более простое и быстрое, более того удобное для клиента.
Рассмотрим вариант на примере формы обратной связи:
- Идем в Google Drive и создаем форму с полями
- Страница
- Ваше имя (текстовое поле)
- Ваш email (текстовое поле)
- Сообщение (текстовое поле)
- Сохраняем форму и открываем документ в Google Drive. Во-вкладке «Форма» переходим к активной форме.
- Делаем view source странице и копируем html код с тегом form.
- Теперь 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
