Создание этой формы и послужило поводом написать эту статью. Хочу рассказать вам, как можно делать такие формы для своего сайта или блога. Идею я почерпнула у Михаила Шакина, он давно пользуется подобной формой для своего блогшоу.
Прежде, чем вы начнете читать дальше, я признаюсь в том, что я лоханулась. Я не нашла настроек (пора на отдых, вчера RSS ленту не нашла, сегодня это), чтобы переключить документы гугл на русский язык. А такая настройка есть. В верхнем правом углу экрана Settings, а дальше разберетесь. Так что статья написана из расчета, что все на английском:)
Итак, чтобы создать форму для своего блога, нужен сервис Документы Google и желание. Желание должно быть сильным, так как данный сервис Google пока не переведен на русский язык. Но зато сколько потом будет удовольствия и гордости за себя. Весь сервис описывать я не буду, там много всяких настроек и возможностей, и во всех я пока не разбиралась, но что касается формы а-ля обратная связь мы разберем практически полностью.
Тем, кто так же, как и я, плохо владеет английским языком, я рекомендую воспользоваться браузером Google Chrome, если у вас есть возможность его установить. Лично я всегда пользуюсь этим браузером, если мне нужен автоматический перевод всех страниц, на которые я захожу, особенно если я нахожусь на закрытых страницах, требующих авторизации, этот браузер верный помощник. Можно, конечно установить переводчик и на другой браузер, но не все из них переводят автоматически (только по нажатии на кнопку), и не все имеют возможность перевести страницу из разделов “личного кабинета”. А так же не всегда нужно, что бы вообще переводилось, поэтому я и выбрала для подобных целей отдельный браузер. Но приступим к делу.
Итак, через свой аккаунт Google заходим в Документы. Бррр. Все на английском, но будем разбираться. Мы решили сделать форму, даже не так важно, для чего она будет служить, будет ли это обычная форма обратной связи или что-то другое, но нам именно нужна форма. Поэтому находим в верхнем левом углу кнопку Create new
А из списка выбираем Form. Открывается новая страница создания формы. Выглядит она так:
Пробежимся по основным пунктам, а остальное разберем в деле.
- Добавляет элемент к форме. Раскрывается списком и можно выбрать нужные элементы
- Можно применить красивый дизайн к форме, но это целесообразно делать только в том случае, если форма будет не в самом блоге, а с блога будет всего лишь ссылка на форму. Вот пример нашей будущей формы.
- Созданную форму можно отправить любому пользователю. А так же на свою почту, что бы получить на нее ссылку, для вставки, как в пункте 2 этого списка.
- Команда перехода просмотра формы в виде таблицы или в виде графиков. Когда форма будет создана, мы воспользуемся просмотром.
- Дополнительные действия. В раскрывающемся списке команда “вставить” – выводит код формы, который можно вставить на страницу блога или сайта и команда “изменить подтверждение” – можно ввести свой текст, который увидит пользователь после отправки формы, типа “Спасибо, пишите ещё”.
- Название формы нужно вписывать обязательно, иначе остается текст по умолчанию Untitled form
- Если поставить галочку в этом пункте, это будет означать, что поле обязательно для заполнения, если не выделять, то поле будет необязательным
- Сохранение данного элемента формы
- Сопровождающий текст – не обязательно
- Рабочее поле создания формы – сейчас будем в нем работать
Как правило, форма начинается с поля Введите Ваше имя, вот его то мы сейчас и создадим.
В целом все должно быть понятно, кроме одного пункта Question Type – Text – означает, что элемент формы должен быть рассчитан на ввод небольшого текста, и относится, как раз к таким разделам, как Имя, адрес электронной почты и подобное. После нажатия кнопки Done, смотрим на результат:
После этого, я думаю вы сможете самостоятельно создать элемент формы для ввода e-mail. Это как самостоятельная работа, закрепляем пройденный материал.
Теперь мы хотим больше узнать о человеке, который нам пишет, поэтому устроим ему небольшой опрос. Зададим наш первый вопрос, какое у него семейное положение. Как вы понимаете, вариант ответа может быть только один. Жмем вверху на кнопку Add item и из списка выбираем Multiple choice – возможность выбора.
В рабочем поле появляются новые элементы. Уже привычные для нас поля заголовка, поясняющего текста, только в поле Question Type появилось Multiple choice, а рядом предложение Go to page based on answer – перейти на страницу ответов. С этим пунктом я пока не разбиралась, в нашем случае он вообще не нужен, оставляем без внимания. Заполняем первое поле с выбором. Чтобы появилось следующее, достаточно нажать Enter или стрелку “вниз” на клавиатуре. В этом примере, я думаю, поля “другое” быть не может, поэтому ссылку add Other не нажимаем. Так же, не забудьте выбрать пункт Make this…. если ответ обязательный.
Жмем Done и любуемся уже 2-мя созданными полями:
Кстати, если у вас появилось вот такое поле
не волнуйтесь, его можно просто удалить или изменить, нажав на карандашек справа, и сделать то, что нужно.
Мы такие любопытные, мы хотим узнать, какие цвета любит наш посетитель, поэтому мы спрашиваем об этом, и даем воможность выбрать несколько вариантов. Для этого жмем на уже полюбившуюся кнопку Add item и выбираем пункт Checkboxes.
Уже не буду описывать подробно, понятно, что порядок действий такой же, как и в предыдущем пункте, только в этом примере я нажала вконце на ссылку add Other , и к форме автоматически добавилось поле “Другое”. вот как это выглядит после сохранения:
Мне кажется, не плохо получается? А вам как? Ну продолжим. Аппетит приходит во время еды, поэтому в следующем пункте мы интересуемся, когда у нашего пользователя день рождения.
Для этого пункта выбираем Choose from a list – выбрать из выпадающего списка. Пункт сам по себе не сложный, и во многом повторяет предыдущие, но достаточно хлопотный, если мы действительно захотим узнать день рождение таким способом, ведь для этого нам необходимо будет указать все месяцы, максимальное количество дней – 31, и широкий диапазон лет, и все это вручную. Конечно, этому пункту можно придумать и другое применение, просто когда я его увидела, дата рождения первой пришла в голову, поэтому вот так создаются поля:
Естественно тут я обрезала картинку. И вот как это выглядит в готовом виде:
Выпадающий список из которого нужно выбрать одно, будь то месяц, день или год и что-то другое, что вы захотите придумать.
А сейчас когда мы многое выяснили о нашем читателе, пришло время дать ему возможность высказаться. Для этого выбираем пропущенный нами пункт Paragraph text, это там, где мы выбираем, какое поле хотим добавить в форму, кнопка Add item. И после прочтения этой статьи, у вас не должно возникнуть никаких вопросов, как создать поле, для отправки полноценного письма. Не подумайте, что я как-то комкаю статью, просто с этим пунктом ну вообще не должно возникнуть вопросов.
После того, как наша форма полностью готова, сохраняем форму, нажав на кнопку Save в правом верхнем углу. Далее жмем на кнопку More actions и выбираем Embes. Появится окно с кодом, который необходимо будет вставить на страницу блога. Копируем и вставляем в сообщение, только заметьте, вставлять нужно на вкладке Изменить HTML. Но тут у вас возникнет такая проблема, что края формы будут вылезать за пределы границ статьи. Для этого находим в коде это width="760" и уменьшаем цифры до нужных нам размеров. Теперь, можно протестировать нашу форму. Тестируем и переходим на главную страницу документов от гугл, если необходимо обновите ее.
Теперь у вас в документах появился новый документ, который называется так, как вы назвали свою форму. В моем примере “Давайте знакомиться”
Кликаем по ней, и переходим на страницу, очень напоминающую Excel. Если вы перед этим тестировали свою форму, то в таблице должны отображаться данные, которые вы вводили в форму.
Сообщения из формы появляются мгновенно. И вы всегда можете быть в курсе всех событий, при условии, если посетители вашего блога захотят вам написать.
Вообще подобная форма создается за пару минут, главное не бояться неизвестного языка, проявлять любопытство, пробовать, экспериментировать.
Спасибо за статью. В настройках документов Google можно выбрать язык. Русский там тоже есть.
Спасибо, большое. Даже после Ваших слов не сразу нашла. Это ж надо было так спрятать настройки языка.
Посмотрел по диагонали… Пост невероятно полезный. Я с такой формой за свою жизнь встречался один единственный раз. Она была представлена одним руководителем одного отдела одной лидирующей компании занимающейся SEO. Я было подумал: «хорошо бы знать, как это делается, хоть я и не знаю пока зачем мне это нужно…» — и тут, о чудо, Ваш пост, Екатерина. Спасибо-приспасибо! :)))
да, я и не думал о таком функционале, что он есть, спасибо, как раз для моего нового блога — создание программ 🙂
у вас каждая новая статья лучше предыдущей 🙂
Читала, читала и поняла только одно, что мне нужно поменять браузер.
Интересная статья, спасибо. Гуглом пользуюсь давно, а вот формами в их документах еще ни разу. Попробую на досуге.
Всегда пожалуйста, Юрий:)
Рада, что моя статья оказалась вовремя. Спасибо.
На самом деле, если есть сложности с языком, то лично я, лучше отдельного браузера в виде гугл хром, ничего не нашла. Именно для этих целей использую, когда нужен автоматический перевод всего.
Вещь очень интересная, обязательно попробуйте.
Недавно открыл для себя Документы Google и влюбляюсь в них всё больше и больше. Лучший сервис из всех, которыми я пользовался. Вы открыл мне ещё одну грань Документов.
Форма простенькая есть у меня на блоге. Подумаю, может тоже новую сделаю.
Я сама каждый день открываю для себя что-то новое в обычных вещах. И это здорово:)
Здравствуйте, Екатерина! нарвалась, так сказать на Ваш блог, случайно. И он, действительно чудо)) по донному посту у меня вопрос, если позволите, а точнее несколько.
1. как избавится вот от этого: http://clip2net.com/clip/m39721/1287316496-clip-9kb.png ? (ссылка на картинку)
2. возможно ли, что бы форма приходила уведомлением на эл. почту?
Буде благодарна за ответы, а если ни туда пишу с вопросом — «пошлите» в правильном направлении)))))))))))
Здравствуйте, Юлия, спасибо за отзыв о моем блоге:)
1. Если бы я увидела непосредственно саму форму, то смогла бы более точно ответить. Если вы вставляете форму на блог, то в коде формы есть значения width (ширины) и height (высоты), поиграйте с этими величинами.
2. Зайдите в саму таблицу формы, в меню найдите Инструменты — правила оповещений, появится окно Настройка правил оповещения, дальше, думаю, разберетесь
Плин, не подписалась на комментарии, теперь еле нашла свой коммент и ответ на него)). С шириной играла — там изменяется общая ширина шаблона, а ползунок внутри него остается. Пока необходимость в подобной форме отпала, но все-таки она мне понадобится, наверное как припрет конкретно — буду разбираться.
А блог действительно классный)
Екатерина, спасибо тебе ОГРОМНОЕ. Чтобы я без тебя делала, умничка. Откуда ты все это знаешь, просто диву даюсь.
С уважением твоя ПОКЛОННИЦА Лилия Мальцева.
Спасибо за теплые слова. Буду стараться всегда быть полезной:)
Полезность! Особенно когда на сайте много посетителей.
Не знаю, как количество посетителей связано с документами гугл… Но спасибо:)
Добрый день, Екатерина, спасибо за новую полезную информацию.
Скажите, а Вы не знаете, как убрать внизу эти ссылки: сообщить о нарушении, условия предоставления услуг…
Эти ссылки удалить невозможно, они подгружаются во фрейме. Фрейм — это отдельная страница в странице. Мы не можем изменить фрейм, т.к. не имеем доступа к его исходному коду.
Спасибо. А можно ли несколько таких форм добавить в один блог? Только разных. Мне надо, например, две: для связи с клиентами и для связи с читателями (они разную цель преследуют).
Конечно, можно.
Спасибо, а вот ещё что хотел спросить: как поменять надпись «Ваш ответ принят», которая появляется после заполнения формы и нажатия «Готово», на свою какую-нибудь?
Там на каком-то шаге это можно изменить, когда составляете форму. просто я сейчас не вспомню, где именно.
Здравствуйте, Катюша!
Большое спасибо за статью и новые знания. Очень полезно и интересно, только один вопрос. Возможно ли фон белый заменить на прозрачный? Я создала форму для сообщения, вставила (но т.к у меня бежевый фон в шаблоне), сама форма получилась с белым фоном, не красиво получилось. Можно было бы это как-то настроить?
Нет, к сожалению, фон невозможно сделать другого цвета. У меня в этом блоге предыдущий дизайн тоже был что-то вроде бежевого, так я так и не нашла, как изменить цвет.
Добрый день, Катюша!
Поздравляю Вас с прошедшим праздником. Счастья, крепкого здоровья, успехов в работе, читателей и всех благ Вам. Очень жаль… будем искать другой выход :0).
Спасибо, Алина. И вас с прошедшим:).
Катя, здравствуйте. Наконец-то я набрела и на эту статью. Я отправила Вам вопрос, но, раз уж есть тема, то повторяю тут. Уже кто-то спрашивал до меня про полосу прокрутки, которая появляется, если менять ширину формы. Как, все-таки, справиться с этой проблемой? Как ее убрать, чтобы вид был такой же, как в Вашей форме? Спасибо.
Я уже разобралась самостоятельно
Получилось исправить?
Да, все исправила. Теперь, спасибо Вам, я вспомнила о документах Гугл, люблю его все больше.
Спасибо вам огромное,за 30 мин научилась делать форму!только не знаю как на форуме сделать как у вас просто слово а под ним ссылка
это опять я …хочу задать вам вопрос-я на форуме разместила сылку для открытия формы,но она у меня на пол страницы!возможно ли как-то для форума сделать размер фона на полный экран? сохранила оригинал ссылки .а в форуме пользуюсь только этой ссылкой https://spreadsheets.google.com/embeddedform?formkey=dEdEUFBIalY3QkpDZER6aW92aWo0WXc6MQ
зарание спасибо за ответ!
Елена, логичней было бы, если бы я могла посмотреть, как у вас на форуме. Ведь проблема именно там, а не в форме, ссылку на которую вы мне дали? Или я не так поняла вопрос?
Что значит «просто слово, а под ним ссылка»? Что вы имеете ввиду?
Скажите, Екатерина, а как насчёт спамеров, не мучают? Каптчи то в этой форме нет.
Ни одного спамного сообщения ни разу не получила.
Просто я пользуюсь формой contact.me, а она почему-то не всегда погружается.
Всё откладывала сделать такую форму себе в блог, а вчера пришлось спешно делать. Сервис, о котором я упоминала выше, по непонятной мне причине, сутки уже не работает:(. Спасибо, Екатерина, за идею! Посмотрим как будет работать.
Уверена, будет отлично работать.
Спасибо! Теперь наконец-то опробую ее )))
А Скажите пж, как я могу получать новые ответы на имейл? Все время заглядывать в табличку как-то не очень удобно (
похоже нашел, в настройках в самом документе )
Всё отлично работает! Только почему-то в одной из анкет не могу настроить уведомление на почту о получении ответа. Интерфейс сейчас поменялся. Как это сделать?
В меню: Инструменты — Правила оповещений.
Нашла уже, спасибо!