четверг, 16 июня 2016 г.

Устанавливаем и стилизуем Google Форму под свой сайт


Красивые Google Формы

Если вы уже оценили эффективность такого инструмента, как форма обратной связи на своем сайте - этот пост для вас. Сегодня мы расскажем как без особых усилий и знаний в вебдизайне и программировании сделать из обычной формы гугл - точную копию красивой формы на вашем сайте и собирать заявки, обращения, контакты и базу email - прямо в Google Таблицу!


Для начала определим что нам нужно:
  1. Учетная запись Google
  2. Доступ к коду вашего сайта
  3. 20 минут полной концентрации
Предположим все это у нас есть в наличии и приступим к делу - пошаговое руководство как изменить стиль формы гугл.

Создаем Google Форму

Идем в Google Диск и создаем нашу форму.

Делаем первую Google Форму


Для данного примера мы взяли простую форму обратной связи с такими полями:
  1. Имя (текстовое поле)
  2. Телефон (текстовое поле)
  3. Email (текстовое поле)
Стилизовать форму (менять шрифты, цвета и доавлять картинки) пока не будем. Нас интересует только сама структура. По итогу форма должна выглядеть так: 

Как выглядит Google Форма

Как правильно будет замечено - мы не добавили проверку данных. Проверка данных - штука полезная, ибо позволит проследить, что вам не будет отправлено вместо email, например, словоtest. Проверка добавляется так:


Открываем форму и убеждаемся, что она рабочая. Для этого заполним тестовыми данными и нажмем Готово:


После создания формы - нам надо убедиться, что она корректно привязана к таблице (или привязать заново). Таким образом мы удостоверимся, что все данные, которые будут вноситься в форму никуда не денутся, а будут попадать прямиком в таблицу. Для этого возвращаемся в редактор формы и из меню выбираем Ответы -- Сохранять ответы:


Можем приступать к следующему шагу.

Копируем код формы

И вот здесь для многих начинается хардкор. Но не спешите все бросать - мы с вами!
Итак - в редакторе форм нажимаем на кнопку .
В любом месте на странице с открывшейся формой нажимаем правой кнопкой мыши и выбираем:

  • Google Chrome - Проверить элемент
  • Mozilla Firefox - Исходный код страницы

Вашему взору откроется весь код формы. Для неподготовленного человека - это кодовый ад с кучей непонятных и, на первый взгляд, ненужных строчек. Выдыхаем. Копируем весь код, который находится между тегами <form> и </form>. Самый простой способ это сделать - это, открыв исходный код страницы, нажать комбинацию клавиш Ctrl+F и введя в поле поиска необходимый тег. После этого - правой кнопкой по выделенному коду и Копировать.


Поздравляем - вы уже можете вставлять этот код на сайт и применять к нему свой CSS. Но и это еще не все - страница подтверждения отправки формы по-прежнему ссылается на стандартную от Google. Что-бы изменить страницу потверждения - нам необходимо изменить следующий код:
<form action="ВАША-ССЫЛКА-НА-ФОРМУ" method="POST">
Заменив его на:
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"
style="display:none;" onload="if(submitted)
{window.location='http://АДРЕС-ВАШЕЙ-СТРАНИЦЫ-ПОДТВЕРЖДЕНИЯ';}"></iframe>
<form action="ВАША-ССЫЛКА-НА-ФОРМУ" method="post"
target="hidden_iframe" onsubmit="submitted=true;">

Все готово! Форма работает, данные заносятся в таблицу. Остался всего один трюк - маленький, но важный. Трюк этот называется - оповещения об изменениях в таблице.
Для настройки оповещений - открываем таблицу, куда заносятся данные из формы (мы настраивали ее в самом начале пути). В меню таблицы переходим по пути Инструменты -- Уведомления. В открывшемся диалоговом окне выбираем следующие пункты:

  • Уведомлять (ВАШ-АДРЕС-ЭЛЕКТРОННОЙ-ПОЧТЫ) о следующих действиях:выбираем Отправка формы
  • Способ уведомления... выбираем Сообщение электронной почты - мгновенное


Таким образом каждый раз, как кто-то заполнит и отправит форму - вы получите уведомление о том, что таблица изменена. Удобно? Безусловно!

Итоги

Не лишним будет напомнить, что такой способ позволяет не просто использовать форму для контактов с клиентами/партнерами/подписчиками, но еще и эффективно собирать базу подписчиков, структурировать ее, автоматизировать процесс ее создания. Просто посчитайте сколько времени уходит у вас на перенос контактов, пришедших вам с формы обратной связи в базу контактов! При этом, наверняка, многие контакты теряются. Наш способ позволит вам сократить потери контактов (или вообще их исключить).

Напишите в комментариях как вы используете Google Формы на своем сайте и используете вообще.

Кстати - мы подготовили демонстрацию работы, просто нажмите на кнопку:

Создаем форму обратной связи с помощью 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

How to create a form and make it email its content to your mailbox


Did you want to place a form on your web page, but couldn't because you didn't have CGI-BIN access or couldn't find or install a CGI script to handle your form?
Here's an easy to implement method that will simply email the content of a form to the address you specify. The good news is that it does not require any CGI scripts, so you can use it on any web page residing in any web server. The bad news is that not all browsers support this method, however, most recent browsers with email support (with the ability to handle mailto protocols in forms) are likely to work. This method is only suggested in cases where you're not able to use a CGI script. A form handler CGI script is required to support browsers that do not support mailto as a form action. If you're using a supported browser, clicking on the "Email This Form" button will email the content of the form to the test address "dummy1@chamisplace.com"
Your Name:


Your Comment:


The trick is to use "mailto:dummy1@chamisplace.com" (dummy1@chamisplace.com being the email address for sending form data) as the "action" (where you would have otherwise placed the address to a CGI script) in your form. For example, let's take a look at the HTML tags used in the above example:
<form 
  action="mailto:dummy1@chamisplace.com"
  method="POST"
  enctype="multipart/form-data"
  name="EmailTestForm">

Your Name:<br>
<input type="text" size="20" name="VisitorName"><br><br>

Your Comment:<br>
<textarea name="VisitorComment" rows="4" cols="20">
</textarea><br><br>

<input type="submit" value="Email This Form">

</form>
So, go ahead... create your next online form using your favorite HTML editor and simply type "mailto:" (without quotes) followed by your email address for the "action" tag to get yourself a functional online form.
 
To share this: BlinkBits | BlinkList | Blogmarks | Co.mments | Connotea | Del.icio.us |Digg | Facebook | FrankIt | Furl | Ma.gnolia | Newsvine | Reddit | Yahoo
 
Applicable Keywords : HTMLInternetNetscape NavigatorNavigator 3.xWorld Wide Web

среда, 8 июня 2016 г.

Как использовать старый смартфон


Как использовать старый смартфон
Бывает, приобретаешь новый смартфон до того, как сломался старый. Причины могут быть разные – техномания, прибавка на работе, «давно хотел хорошую камеру», «папа, у меня же день рождения»… Вопрос в другом: куда деть старый? Сдать на переработку? Продать? Подарить кому-нибудь?

Сразу оговорим, что выбрасывать телефон в любом случае не следует: пожалейте окружающую среду, внутренности мобильника и пластик для нее от. Мы предлагаем вам список технологичных, забавных и странных идей, как использовать старый смартфон с пользой.

Игровая консоль

Телефон на Android несложно подключить к телевизору с помощью потокового сервисаChromecast или через кабель-переходник USB-HDMI. Скачайте эмулятор с подборкой любимых классических консольных игр и наслаждайтесь! Приложения существуют для чего угодно – от «Супер Нитендо» до «Сега Генезис». В качестве джойстика подойдет любой, работающий по Bluetooth, например, от PS3.
Для тренировок

Старый смартфон можно продолжать использовать в тренажерном зале или на пробежке. Удалите все ненужные приложения, а лучше сделайте откат на заводские настройки и установите нужные заново. Вытащите sim-карту и ни в коем случае не залогинивайтесь через Facebook или «Вконтакте» - и вас никто не будет отвлекать. Скачайте хорошие программы для тренировок и аудиоплеер, загрузите любимую музыку. И выходите на пробежку.
Настольный компьютер

Почему бы и нет? Современные смартфоны ощутимо производительнее, чем компьютеры десяти-пятнадцатилетней давности. По сути, начинка не особенно отличается. На смартфон можно установить операционную систему из семейства Linux, подключить монитор, клавиатуру и мышку (через Bluetooth или разветвитель USB), и ваш компьютер готов. Подарить его бабушке, отдать на растерзание ребенку или просто поставить в качестве резервного – уже ваше дело.

Для заинтересовавшихся прилагаем инструкцию по установке Linux на смартфон.
Навигатор

А вот и способ сэкономить: вам не нужно покупать GPS-навигатор, если у вас есть старый смартфон. Просто поставьте подходящее приложение или несколько – MAPS.ME для оффлайновых карт, Яндекс.Карты – для случаев, когда есть интернет… Заодно такой навигатор может выполнять функцию автомагнитолы.
Виртуальная реальность

Слышали про Google Cardbord? Это очки виртуальной реальности, которые рассчитаны на использованием со смартфоном в качестве экрана и стоят всего 20$. Ну, или полчаса возни с ненужной картонной коробкой. Конечно, большинство приложений виртуальной реальности еще сыроваты. Но это все равно очень интересно. И вы точно обойдете в «гонке технологий» большую часть друзей!

Маленькое примечание: чтобы приложения работали корректно, нужен хороший гироскоп. Или хотя бы какой-нибудь гироскоп. Перед тем, как зарезать любимую коробку от ноутбука, убедитесь, что в вашем старом телефоне он есть.
Будильник

Серьезно, кто в наше время еще пользуется аналоговыми часами? А для смартфонов существует почти бесконечное множество приложений с разнообразными часами и будильниками. Просто добавьте дешевую док-станцию.
WIFI-ретранслятор

Сигнал от стоящего в комнате роутера плохо доходит до кухни? Используйте старый телефон в качестве ретранслятора. Понадобится установить специальное приложение, например, fqrouter2и root-права.
Видеонаблюдение

Смартфон – это не только слот для сим-карты, но еще и камера! Как насчет авторской системы безопасности для дома? Понадобится WIFI, некоторая доля терпения и какое-нибудь приложение, например, IP Webcam или iCamSpy. Кстати, второе приложение оснащено детектором движения и умеет, заметив подозрительное шевеление, сбрасывать вам фотографии на email.
Электронная фоторамка

Чтобы превартить смартфон в самолистающийся фотоальбом, установите приложение, например, Dayframe, и поставьте его куда-нибудь на выгодное место. Плохо работает на смартфонах с маленькими экранами. Прибивать такую фоторамку гвоздями категорически не рекомендуем.
Мозг для робота

То, что каждый смартфон в душе компьютер, мы уже решили. А «мозг» робота – тоже компьютер! Так что если вы в детстве были фанатом Азимова, или вам не дают покоя лавры безумных изобретателей с YouTube, у вас есть прекрасный простор для экспериментов. Кстати,готовые наборы тоже продаются, но ведь это не так интересно!

Радионяня

Кстати, с помощью старого смартфона можно наблюдать не только за домом во время своего отсутствия, но и за маленьким ребенком. Программ-радионянь, опять же, немало. Baby Monitor, например, умеет транслировать видео и аудио, и содержит инструкцию по применению ребенка. Единственная проблема - в отличие от обычных радионянь, смартфононяня не является ударопрочной и плохо переносит попытки ее погрызть, так что закрепите телефон так, чтобы дитя до него не добралось.
На всякий случай

Заведите какую-нибудь сим-карту с тарифом «только для звонков», положите туда гривен пятьдесят и засуньте телефон вместе с запасным аккумулятором в бардачок и забудьте про него. Периодически подзаряжайте аккумулятор. Прекрасное запасное средство связи на случай, если что-то пошло не так или бензин закончился одновременно с деньгами на основном телефоне.
Пожертвуйте благотворительным организациям

В любом городе есть организации, которые собирают одежду и прочие полезные вещи для детей из детских домов. Смартфон в категорию «полезных вещей» вполне попадает.