как подключить гугл форму к сайту
Разработка и ведение стартапов, изготовление сайтов, дизайн печатной и сувенирной продукции, продвижение.
Пошаговое руководство как изменить стиль формы гугл.
Для начала определим что нам нужно:
Создаем 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 форму на WordPress сайт
Google Формы — это универсальный веб-инструмент, с помощью которого вы можете создавать различные онлайн-формы, опросы и голосования. А самая крутая вещь заключается в том, что вставить эту форму можно на любом сайте в любом месте.
Принцип работы простой: вы создаете форму на сайте Google Forms под своей учетной записью Google, эта форма сохраняется для вашего аккаунта, что позволяет ее легко редактировать потом с другого компьютера.
И если вы хотите вставить эту форму на свой сайт, вы генерируете код вставки, нажав на 1 кнопку, и вставляете полученный код на свой сайт WordPress.
В этом небольшом уроке разберемся более подробно, как вставить Google форму на свой WordPress сайт.
Google Формы или WordPress Form Builders?
У вас может возникнуть вопрос: зачем использовать Google формы, когда для WordPress есть куча готовых плагинов для построения онлайн-форм, например: WPForms, CaptainForm, ProfilePress, WordPress Form Maker и так далее?
И правда, ведь готовые строители форм для WordPress проще использовать, они всегда находятся под рукой, в консоли вашего WordPress сайта. С их помощью можно даже создавать кастомные формы для регистрации и авторизации пользователей.
Но у Google формы есть одно важное преимущество. Иногда вы хотите разместить свою форму на нескольких сайтах, чтобы собрать больше отзывов и мнений, и получить общий отчет со всех собранных форм в одном едином месте.
В таком случае вам пригодятся Google формы. Ими очень легко делиться, размещать на нескольких сайтах сразу, они оптимизированы для мобильных устройств и они выглядят просто и стильно. И самое главное — вся собранная информация с форм хранится у вас на Google Drive.
Как вставить Google форму на WordPress
Создавать новую форму в Google Forms очень просто. В первую очередь задайте название форме, краткое описание и затем добавляйте нужные поля для формы.
Умный Google AI автоматически предлагает соответствующее поле формы в зависимости от вопроса, который вы добавляете. Но вы в любой момент можете вручную выбрать другое поле на свое усмотрение.
Вы можете нажать на кнопку Добавить в меню, чтобы выбрать любое другое поле для формы. Таким же образом можно добавлять картинки и видео в форму.
Когда вы закончили с составлением формы, нажмите на кнопку Send (Отправить), чтобы получить код вставки формы:
После этого появится всплывающее окно, где нужно нажать на значок Вставки (Embed). Просто скопируйте полученный код формы:
Теперь пора вернуться на свой WordPress сайт. Откройте любую запись или страницу, для которой вы ходите вставить форму. В редакторе переключитесь на режим Текст:
Вставьте скопированный код формы с новой строки после любого абзаца или предложения и не забудьте сохранить изменения, нажав на кнопку Обновить в редакторе.
Теперь вы можете перейти к просмотрю этой записи и убедиться, что ваша Google форма загрузилась и отображается правильно:
Надеемся, этот урок помог вам разобраться, как создавать Google формы и вставлять их на свой WordPress сайт.
[Инструкция] Создание гугл-тестов (гугл-форм)
Спасибо пользователям Exosphere и Yuriy_krd за помощь и конструктивную критику
Иногда кажется, что создать что-то по конструктору весьма быстро и просто: хоть сайт, хоть опрос, хоть таблицы. Однако часто упускаешь из внимания какие-то обидные мелочи, из-за которых время уходит впустую и приходится переделывать работу из-за обидного пустяка. Согласитесь, неприятно. Я решил пройти все процессы за вас и предупредить о возможных неприятных мелочах, а также помочь новичкам.
В этой статье мы с вами сделаем гугл-форму, с помощью которой можно собирать данные, опрашивать сотрудников, клиентов, проводить тестирования гипотез и проч. Кстати, крайне актуальная информация в условиях удалённой работы.
Для создания тестов у вас должен быть активный гугл-аккаунт. Если у вас его нет — обратитесь к инструкции “Создание гугл-аккаунта и работа с Гугл-диском”.
Итак, создаем Форму (тестирование).
Входящая задача
Нам нужно создать тестирование, которое будет собирать набор информации.
Шаг 1 — создание теста (формы)
Переходим в гугл-диск. Для этого нажмите кнопку с точками на панели сверху справа, перейдя по ссылке https://www.google.com/ или https://www.google.ru/ Далее выберите Гугл-диск (далее по тексту Диск).
Шаг 2. Создание Теста (формы)
Как и в любом документе в Гугл-диске, начало работы начинается с кнопки “Создать+” в верхней левой части экрана. Этой кнопкой создаются папки на Диске, создаются все документы.
Нажав кнопку Создать, вы увидите меню. В нем нужно выбрать пункт “Еще”.
Создать форму можно несколькими способами:
1. Создание пустой формы:
Мы создали пустую форму (тестирование).
Шаг 3. Элементы управления
Первое, что нужно сделать — создать имя файла для формы. Это имя внутреннее, под ним форма будет храниться на Диске.
Имя создается, если щелкнуть по словосочетанию “Новая форма” в верхней левой части экрана.
В центре экрана находится поле с названием теста (формы). Его будут видеть тестируемые при выполнении. Изменим его на нужное.
Там же заполним описание к тесту (форме).
Далее автоматически создается первый блок вопроса.
В поле “Вопрос без заголовка” вам нужно вписать свой вопрос. Ниже переименовать Вариант 1 ответа на нужный. Если нужно добавить еще один вопрос — нужно нажать ниже “Добавить вопрос”. Также можно добавить вариант “Другое”, тогда в тесте появится текстовое поле, куда пользователь может внести любой иной ответ в произвольной форме.
Выпадающий список позволяет выбрать вид вопроса. В нашем случае автоматически создан вопрос с одним вариантом ответа. Если выпадающий список раскрыть, то можно выбрать иную форму вопроса.
Внизу блока есть кнопки:
Элемент управления “Настройки”
Закладка Общие и Презентация не должны вызвать каких-то вопросов. Важная вкладка “Тесты” — в ней вы можете настроить балльную оценку для каждого вопроса в форме. Для этого активируйте сдвижной переключатель “Тест” и Ваша форма перейдет в разряд теста. После активации этой кнопки вы можете назначать в списке вопросов правильные ответы и количество баллов за правильный ответ.
После активации переключателя, нажмите кнопку “Сохранить” и перейдите к вопросам. Внизу блока вопроса появиться кнопка “Ответы”:
Нажав на нее, вы перейдете в режим установки верных ответов и начисления баллов за правильный ответ.
Итак, давайте начнем выполнение поставленной в начале задачи.
Шаг 4. Создаем тест
Активируем переключатель “Обязательный вопрос”. Теперь пользователь обязан ввести Фамилию и Имя, чтобы продолжить прохождение теста.
Добавляем второй вопрос нажав на верхнюю кнопку в правой вертикальной панеле элементов управления.
Сделаем этот вопрос необязательным не активируя переключатель внизу справа блока. Даже не ответив на этот вопрос, пользователь продолжит и сможет закончить тестирование.
Создаем еще один блок с единственным вариантом ответа
Добавляем блок с несколькими вариантами ответов
Тут мы также добавили вариант ответа “Другое”.
Теперь настраиваем баллы для правильных ответов. Переходим в пункт настройки в верхней правой части элементов управления (значок шестеренки). Переходим на закладку “Тест” и активируем переключатель. Нажимаем кнопку Сохранить и возвращаемся к списку наших вопросов.
Нажав на любое пустое место блока вопроса, активируем его. Слева внизу активируем блок ответов. Выбираем нужный нам ответ верным и назначаем количество баллов.
Нажимаем кнопку готово. Баллы назначены.
Теперь нам нужно настроить регулярность вопросов и сбор адресов электронной почты.
Опять переходим в пункт “Настройки” в верхней части элементов управления. Активируем нужные нам элементы настроек.
Переходим сразу в закладку “Презентации” и проверяем, что активирован пункт “Показывать ссылку для повторного заполнения формы”. Нажимаем кнопку “Сохранить”
Шаг 4. Отправка теста (формы)
Отправка теста (формы) осуществляется путем нажатии кнопки “Отправить”. В открывшемся окне можно выбрать разные варианты отправки.
Отправка по электронной почте:
В поле “Кому” введите адреса получателей. В этом случае в закладке ответы, Вы будете видеть кто проголосовал, а кто еще не ответил на вопросы формы.
Так же форму можно сразу включить в тело письма.
Следующая закладка — отправить ссылку. В этом случае вы можете отправлять ее не только почтой, но и любым иным способом, в том числе через Мессенджер. Однако в этом случае вы будете вынуждены отслеживать ответивших самостоятельно.
Третий вариант — вставка на сайт. Это для более продвинутых пользователей. Позволяет встроить код с формой сразу в шаблон сайта.
Вы закончили создание формы.
Ссылка на тестовую форму, созданную при написании инструкции.