встроить форму google на сайт
Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.
Пошаговое руководство как изменить стиль формы гугл.
Для начала определим что нам нужно:
Создаем Google Форму
Идем в Google Диск и создаем нашу форму. ссылка — как сделать Google forms
Для данного примера мы взяли простую форму обратной связи с такими полями:
Стилизовать форму (менять шрифты, цвета и добавлять картинки) пока не будем. Нас интересует только сама структура. По итогу форма должна выглядеть так:
Открываем форму и убеждаемся, что она рабочая. Для этого заполним тестовыми данными и нажмем Готово:
Можем приступать к следующему шагу.
Копируем код формы
Вашему взору откроется весь код формы.
Если мы на этом останавливаемся — то дизайн полностью можно менять используя классы, которые буду указаны в скопированной части формы, которую вы поставили на ваш сайт.
При этом орма отправки отправляет данные человека на сервер google, где форма обрабатывается.
Создаем форму обратной связи с помощью Google Forms
Данный пост посвящен прекрасному инструменту Google Forms, как за 10 минут сделать форму обратной связи на сайте или более полезные вещи.
Довольно давно я мечтал задействовать Google Forms в своей работе и вот наконец-то нашелся повод. Учитывая, что я не дружу с бэкэндом, данное решение для меня более простое и быстрое, более того удобное для клиента.
Первое поле «Страница» я сделал неспроста, этому полю мы делаем 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% от общего числа звонков, что довольно ценно для бизнеса.
Как встроить формы Google на веб-сайт
В этой статье вы узнаете, как настроить форму Google в соответствии с вашей темой и как встроить ее на любую страницу своего сайта.
Публиковать заполняемые формы на своем сайте не всегда просто. Существуют плагины WordPress для публикации форм, но они не всегда бесплатны. Они также обычно требуют небольшой настройки и некоторого обучения.
Прелесть Google Forms в том, что вы можете быстро создать простую форму, которую затем сможете встроить на свой веб-сайт. Вы также можете настроить форму с помощью цветов и стиля, которые соответствуют вашей общей теме.
В этой статье вы узнаете, как настроить форму Google в соответствии с вашей темой и как встроить ее на любую страницу вашего сайта.
Настройка вашей формы Google
В этом примере мы начнем с примера веб-сайта и пустой формы Google по умолчанию.
Для начала создайте новую страницу на своем сайте и внимательно изучите макет и тему. В частности, обратите внимание на основной и дополнительный цвета.
В этом примере тема — это белый фон с черными баннерами. Текст заголовка — темно-черный и жирный, а сам шрифт сайта — простой черный. На этой странице мы планируем встроить форму, позволяющую посетителям голосовать за понравившийся фильм из пяти вариантов и оставлять свои комментарии.
Затем вам нужно настроить свою форму Google в соответствии с макетом этой страницы.
Когда вы создаете пустую форму Google, вы заметите, что по умолчанию используется пурпурный фон с полужирным черным текстом и простой текст в форме. Граница баннера вверху темно-фиолетовая.
Очевидно, это не сработает на странице, на которую мы хотим встроить форму. Чтобы настроить форму, выберите значок цветовой палитры в правом верхнем углу окна редактора формы. Это позволит вам настроить тему, включая цветовую схему.
Откроется раскрывающийся список настроек. Если вы не видите цветовую схему, которая работает в разделе «Цвет темы», вы можете выбрать + значок, чтобы точно настроить цвет, на котором вы хотите создать форму.
Используйте цветовую палитру, чтобы выбрать точный цвет, который вы хотите для своей темы. В этом случае выбор черного цвета автоматически изменяет цвет фона на дополнительный цвет, который должен работать с черным. Вы можете изменить этот цвет под Фоновый цвет раздел.
Другие параметры на этой странице включают добавление изображения заголовка, а также изменение стиля шрифта формы. После того, как вы закончите настройку формы, есть еще несколько параметров, которые нужно настроить, прежде чем вы будете готовы встроить форму Google на свой веб-сайт.
Настройка параметров формы Google
Прежде чем встраивать форму Google в свой веб-сайт, необходимо настроить несколько параметров для размещения записей в веб-формах. Для этого щелкните значок шестеренки в правом верхнем углу формы. Откроется окно настроек с различными параметрами конфигурации.
Если вы не хотите сохранить анонимность результатов, вам следует включить Собирать адреса электронной почты, и предоставить Ответные квитанции.
Ответные квитанции будут автоматически отправляться по электронной почте с подтверждением, когда пользователь отправил свою запись. Таким образом, вам не нужно беспокоиться о программировании этого с самого вашего веб-сайта.
Вы можете не выбирать все остальные параметры, если не хотите ограничить количество ответов одним пользователем. В этом случае вы захотите включить Не более 1 ответа.
Выберите Презентация вкладку, чтобы увидеть дополнительные параметры.
Если ваша форма не очень длинная, вам, вероятно, не нужно включать Показать индикатор выполнения. В Перемешать вопрос Опция заказа хороша для опросов, в которых вы хотите предоставить каждому посетителю разный порядок вопросов. Обычно вы не включаете Покажи ссылку для другого отзыва поскольку для большинства опросов требуется только один ответ на пользователя. Это принудительно с использованием их адреса электронной почты.
Введите подтверждающее сообщение, которое вы хотите, чтобы пользователь увидел в Подтверждающее сообщение поле. Выбрать Сохранить в нижней части формы заявки, когда вы закончите.
После того как вы создали форму и готовы встроить ее на свой веб-сайт, выберите послать чтобы перейти к следующему шагу.
Как встроить форму Google на свой веб-сайт
После того, как вы выберете «Отправить», откроется окно с различными параметрами, чтобы поделиться вашей формой с любыми пользователями. Чтобы встроить в веб-сайт, вам нужно выбрать значок встраивания (двухкаратные символы).
в Вставить HTML вы можете увидеть код iframe, который можно использовать для встраивания формы.
Обязательно отрегулируйте Ширина а также Высота формы, чтобы она правильно помещалась на вашей веб-странице. После исправления этих настроек выберите и скопируйте весь код iframe из поля «Встроить HTML».
Если вы используете WordPress, вам нужно переключиться в режим редактора кода при редактировании страницы, в которую вы хотите встроить форму. Для этого отредактируйте страницу, а затем выберите три вертикальные точки в правом верхнем углу окна редактора WordPress. Выбрать Редактор кода в редактор раздел.
В окне редактора кода вставьте код внедрения iframe в поле содержимого.
Наконец, выберите Сохранить черновик а затем выберите Предварительный просмотр чтобы увидеть, как форма выглядит на вашей странице.
Если форма выглядит не совсем правильно, просто вернитесь в учетную запись Google Forms и немного подправьте дизайн. Затем повторите описанный выше процесс, чтобы повторно вставить новый код встраивания. Как только предварительный просмотр формы будет выглядеть правильно, вы готовы опубликовать страницу и начать сбор результатов формы!
Сбор результатов формы с веб-сайта
Все записи формы, которые вы получаете от посетителей веб-сайта, попадут в электронную таблицу Google Таблиц. Вы можете увидеть эти результаты, вернувшись к форме, созданной в Google Forms, и выбрав Ответы вверху страницы дизайна формы.
При сборе адресов электронной почты с помощью такой формы хорошо то, что вы также создаете список адресов электронной почты посетителей вашего веб-сайта. Вы можете использовать это для массовой рассылки новостей о вашем сайте или других обновлений, которые могут быть интересны вашим читателям.
В любом случае Google Forms — это мощный инструмент для встраивания форм на ваш сайт без каких-либо знаний в области программирования.
Как добавить Google форму на свой сайт
Если вы еще не знакомы с бесплатным, но мощным инструментом Google Формы (Google Forms), сейчас самое время для этого.
Google Формы – это быстрый и простой способ собирать информацию от ваших пользователей через онлайн-формы. Все, что нужно для их использования – это наличие электронной почты Google, а добавить их на сайт очень просто. Формы от Google можно использовать для создания простой контактной формы, формы опроса клиентов или чего-то более сложного. И в этой статье мы предоставим вам всю информацию, которая необходима, чтобы добавить Google форму на свой сайт.
Что такое Google Формы?
Google Формы – это один из множества бесплатных приложений от Google. Инструмент форм можно использовать для опроса, сбора контактной информации, проведения экзамена, приема заказов, передачи файлов и многое другое.
Результаты и информация из форм легко доступна, и она хранится в облаке как часть вашей учетной записи Google Диск. Для создания форм существует большой выбор готовых шаблонов, а их редактирование имеет интуитивно понятный интерфейс.
Если вам нужно собирать информацию в Интернете, например, вопросы клиентов, запросы технической поддержки или заказы товаров/услуг, Google Формы эффективно для этого подходят. Давайте создадим свою первую форму и добавим ее на свой сайт.
Как создать Google форму
Первым шагом в этом процессе станет создание аккаунта Google (если у вас его еще нет). После этого вы можете перейти непосредственно к Google Формам.
Вам сразу будет предоставлены готовые к работе шаблоны Google Форм, которые могут служить основой для вашей собственной формы. Если вы решите начать с пустой формы – просто нажмите на большом блоке с плюсиком (+).
Кроме типовых элементов форм, таких как поля и кнопки, вы можете легко добавить ряд других элементов в свои формы. Эти дополнительные элементы могут содержать видео с YouTube, изображения с Google Photos, вопросы и обычный текст.
Изменение вида Google формы
Вы можете просмотреть свою форму в любой момент, и можете легко изменить цветовую палитру дизайна. С помощью нескольких настроек вы можете настроить доступ к ней и то, как форма будет работать. Эти настройки включают возможность введения нескольких ответов от одного пользователя, порядок отображения вопросов, обязательность авторизации пользователя и сообщение о подтверждении.
Публикация Google формы
Как только вы будете довольны созданной формой, вы можете сделать ее доступной, нажав кнопку Отправить в верхнем правом углу экрана. Формой можно делиться через электронную почту, с помощью ссылки или через встраивание на странице сайта. Есть также возможность делиться формой в социальных сетях.
Просмотр результатов заполнения Google Формы
После того как вы сделаете вашу форму доступной для аудитории, или через ссылку, либо через ваш сайт, вы можете начать следить за результатами заполнения формы. Это происходит через вкладку «Ответы» в дизайнере формы.
Одной из замечательных функций Google Forms является та возможность, которая позволяет легко просматривать ответы в режиме реального времени, как отдельно, так и в виде резюме. Также вы можете посмотреть ответы в электронной таблице Google Таблицы, с помощью которой вы сможете фильтровать результаты многими различными способами.
Включение уведомлений по электронной почте при получении ответов формы является еще одной полезной функцией, которая поможет вам отслеживать взаимодействия пользователей.
Как добавить Google форму на сайт
Самым быстрым способом добавления формы Google на сайт является копирование и вставка кода iframe в код страницы на вашем сайте.
Примерный вид кода для вставки:
ID-ФОРМЫ для реальной формы будет заменен уникальным идентификатором.
После того как вы вставите в код страницы этот короткий код формы, на сайте он будет заменен на соответствующую Google форму, которая уже будет готова взаимодействовать с посетителями вашего сайта.
Как быстро создать опрос на вашем сайте с помощью форм Google?
Рано или поздно, практически все, у кого есть собственный сайт, сталкиваются с необходимостью создания форм обратной связи для сбора данных (проведения опросов) с посетителей сайта.
Это может быть форма в разделе контакты, через которую посетители сайта будут отправлять вам интересующие их вопросы, может быть форма сбора заявок от клиентов (например, заявки на обратный звонок или заявки на покупку товара), а может быть форма для проведения опроса или голосования по интересующей вас теме.
Есть несколько подходов в создании подобных форм:
• Формы можно сделать, используя теги HTML и завязать нажатие кнопки «Отправить» с отправкой введенных данных вам на email
• Можно сделать связку PHP+MySQL (или любой другой язык программирования и базу данных) и все введенные данные сохранять в базу данных для дальнейшей работы.
• Если ваш сайт сделан с использованием какой-нибудь популярной CMS (например, Joomla, Drupal или WordPress), то вы можете поискать в сети плагины, модули и компоненты, которые достаточно просто позволяют создавать формы
• А можно для создания форм обратной связи использовать бесплатные инструменты всем известного Google.Docs
И в этой статье я хотел бы показать как с помощью Google.Docs вы можете легко и быстро создавать всевозможные формы опроса для ваших сайтов.
Первое что вам необходимо сделать, это войти в ваш почтовый ящик в почтовом сервисе Gmail (в ваш аккаунт в сервисе google): https://accounts.google.com/
Далее, в верхнем вертикальном меню выберите пункт Диск.
На открывшейся странице в левом вертикальном меню наживаем кнопку «Создать» и из выпадающего списка выбираем пункт «Форма»
После чего мы оказываемся в бесплатном редакторе форм от Google.Docs, и именно в нем мы и будем создавать наши формы.
В первом же окне редактор форм от google нас запрашивает название нашей будущей формы и предлагает выбрать тему оформления из уже существующих тем.
После того как название введено и выбор темы оформления сделан, жмем кнопку «Ок», и мы попадаем на страницу редактирования нашей формы.
Обо всех возможностях и настройках редактора форм от Google я в этой статье рассказывать не буду, т.к. большинство вещей познаются «методом тыка», плюс ко всему, есть не самая плохая справка от Google: support.google.com/drive/bin/topic.py?hl=ru&topic=1360904&parent=2811744&ctx=topic. Здесь же хочу остановиться лишь на тех моментах, которые нужно знать, чтобы прямо сейчас создать свою первую форму.
Итак, перед вами интерфейс редактора форм от Google:
Сверху редактора есть небольшое горизонтальное меню, отвечающее за основные настройки формы. В нем вы можете сменить тему оформления, изменить настройки сохранения вводимых данных (сохранять в новую таблицу Google.Docs или в новую вкладку существующей таблицы), а также открыть созданную форму для просмотра, нажав на кнопку «Открыть форму»
Ремарка: Обязательно задайте настройки сохранения, нажав на кнопку «Сохранить ответы». Если вы выберите в настройках сохранения «Новая таблица», то Google автоматически создаст для вас новую таблицу, название которой будет совпадать с именем созданной вами формы и припиской (Ответы)
Чуть ниже находятся настройки видимости вашей формы. С помощью данных настроек вы можете разрешить просмотр формы для всех (снять все галочки) или наоборот сделать доступной форму только для пользователей данного домена и для её заполнения нужно будет пройти авторизацию.
С настройками видимости будьте внимательней. Хотя из всех настроек всего две галочки, но если вы в них ошибетесь, то все ваш опрос может провалиться, люди просто не получат доступ к форме.
Далее, находятся кнопки редактирования элемента добавленного в форму. Вы в любой момент можете изменить подпись к элементу формы, подсказку (пояснение), изменить тип элементе (Google предлагает нам на выбор 7 различных элементов, от простого тактового поля ввода данных, до целого двумерного массива элементов radiobutton), любой элемент можно сделать обязательным для заполнения и т.д.
В самом низу страницы с редактором находится блок «Изменение подтверждения». В нем вы можете разрешить повторно заполнять форму, сделать видимой ссылку на результаты проводимого опроса для всех желающих, разрешать респондентам изменять свои ответы после заполнения и изменить текст подтверждения, который будет выводиться всем респондентам заполнившим форму опроса.
Возможность изменения текста выводимого после заполнения формы, даст вам возможность не только более изыскано поблагодарить респондента прошедшего опрос, но и, например, дать ему ссылку на скачивания какого-нибудь подарка, в качестве вознаграждения за проделанный труд.
После того как все необходимые поля формы добавлены, в верхнем меню нажмите на кнопку «Открыть форму» и вы увидите свое детище со всеми элементами и полями ввода:
Далее вы можете отправить свою созданную форму опроса по почте, передать респонденту ссылку на данную форму или встроить в ваш сайт.
Встраивание в сайт элементарно. Вам нужно просто в верхнем меню редактора формы выбрать пункт «Файл->Встроить в веб-страницу…» и система сгенерит вам iframe для вставки в ваш сайт, блог и т.д.
Вот и все, наша новая форма опроса посетителей сайта готова!
Все данные заполняемые респондентами будут доступны для вас в таблицах Google.
Помимо этого, вы в любой момент сможете посмотреть общую статистику по динамике заполнения полей вашей новой формы в разделе верхнего горизонтального меню «Ответы->Сводка ответов»:
Как видите, подобный инструмент достаточно гибок в настройках и позволит вам за считанные минуты создать и провести опрос посетителей вашего сайта или же любой другой группы респондентов.
При этом вам не нужно самому верстать HTML-форму, не нужно организовывать взаимодействие с БД, не нужно заниматься поиском подходящих к используемой вами CMS плагинов, модулей и компонентов. А также не нужно кодить интерфейсы отображения статистики с отображением результатов опроса.
Плюс ко всему, если вы на подобную форму опроса кинете большой трафик, то с большой вероятностью Google сервера это выдержат!
Да и все введенные опрашиваемыми респондентами данные будут всегда доступны для вас в вашем аккаунте Google.