Как встроить Google Form в WordPress

О чём эта статья

• Быстрая настройка Google Form.
• Как получить HTML-код формы и вставить его в WordPress (Gutenberg, классический редактор и конструкторы).
• Устранение прокрутки, адаптивность и безопасности.
• Альтернативные подходы и проверки качества.

Важно: в статье используются примеры кода с шаблонным FORM_ID; замените его на идентификатор вашей формы при вставке.

Что такое Google Forms

Google Forms — это бесплатный онлайн-инструмент для создания опросов, анкет, регистрационных форм и тестов. Он хранит ответы в Google Forms и по желанию экспортирует их в Google Таблицы. Коротко: форма = интерфейс для ввода данных, ответы можно просматривать в панели или как таблицу.

Создание Google Form — пошагово

1. Перейдите на страницу Google Forms и нажмите «Перейти в Google Формы» или создайте новую форму в Google Диске.
2. Выберите шаблон из галереи или нажмите «Пустая форма», чтобы начать с нуля.

3. Дайте форме название и краткое описание — это помогает пользователям понять цель анкеты.

4. Добавляйте поля: вопрос, тип ответа (краткий ответ, абзац, множественный выбор, флажки, выпадающий список и т. д.), прикрепляйте изображения и видео. Google может предлагать подходящий тип поля автоматически.

5. Для добавления нового вопроса нажмите «+». Проверьте визуальный вид через предпросмотр.

Ограничение одной отправки на участника

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

После включения нажмите «Сохранить». Учтите: это ограничение удобно для контролируемых опросов, но снижает анонимность.

Как получить HTML-код для встраивания

1. Откройте форму в редакторе и нажмите кнопку «Отправить» в правом верхнем углу.

2. В появившемся окне выберите вкладку «<>» (Embed — встраивание). Там будет HTML-код iframe. Нажмите «Копировать».

Вы также можете отправить ссылку на форму по электронной почте или поделиться публичной ссылкой.

Как встроить форму в WordPress (Gutenberg)

1. Войдите в админ-панель WordPress и откройте пост или страницу для редактирования.

2. Нажмите «Добавить блок» и выберите блок «Пользовательский HTML» (Custom HTML).

3. Вставьте скопированный iframe-код в блок и сохраните страницу.

4. Опубликуйте страницу и проверьте отображение через «Просмотреть страницу».

Примечание: не забудьте задать уникальную постоянную ссылку (permalink) для страницы с формой.

Альтернативы вставке в Gutenberg

• Классический редактор: переключитесь на вкладку «Текст» и вставьте iframe.
• Elementor/Divi/Visual Composer: используйте HTML/Code элемент и вставьте iframe.
• Если сайт не на WordPress: вставьте тот же iframe в HTML-разметку страницы.

Совет для разработчиков: при использовании кеширования или плагинов безопасности убедитесь, что iframe не блокируется настройками Content Security Policy (CSP).

Пример стандартного iframe-кода для Google Form

Замените FORM_ID на реальный идентификатор формы (он есть в ссылке для отправки).

Как убрать полосу прокрутки и оптимизировать высоту

Если высота формы меньше, чем внутреннее содержимое, появится вертикальная полоса прокрутки. Есть несколько способов минимизировать или убрать её:

1. Увеличьте высоту iframe вручную в атрибуте height.
2. Установите адаптивную высоту через JavaScript (при контроле обоих доменов — работает только если документ в iframe и хост находятся на одном домене; у Google Forms — кроссдоменный, поэтому полноценный JS-движок высоты обычно не применим).
3. Используйте CSS, чтобы скрыть полосы прокрутки контейнера, но это может обрезать содержимое:

Важно: скрытие полос прокрутки не решает проблему обрезания контента. Увеличивайте высоту и тестируйте на мобильных устройствах.

Адаптивность: как сделать форму удобной на мобильных

• Установите width:100% для iframe.
• Для высоты используйте медиазапросы и установите разные значения height для мобильных и десктопов.
• Тестируйте на реальных устройствах или в режиме эмуляции браузера.

Как просмотреть ответы и экспортировать их

1. Откройте форму в Google Forms и перейдите на вкладку «Ответы».

2. Для сохранения ответов нажмите на значок Google Таблиц — это создаст или подключит существующую таблицу с ответами.

3. Также можно настроить уведомления по электронной почте при поступлении новых ответов.

Как получать уведомления на электронную почту

1. В редакторе форм откройте «Дополнения» (Add-ons).

2. Найдите и установите дополнение «Email Notifications for Google Forms» или аналогичное.

3. Подключите учётную запись Google и настройте правила уведомлений.

4. Создайте правило «Создать уведомление» и сохраните настройки.

5. Теперь вы будете получать письма при каждой новой отправке.

Интеграция с другими сервисами

• Zapier / Make (Integromat): отправка данных формы в CRM, Slack, Trello и т. п.
• Google Apps Script: автоматическая обработка ответов и кастомные уведомления.
• Плагины WordPress (WPForms, Ninja Forms и др.) могут собирать данные прямо в базу WordPress при необходимости более тесной интеграции.

Когда Google Forms — хорошее решение и когда нет

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

Руководство по внедрению (SOP) — шаги для команды

1. Создать форму в Google Forms и проверить все поля.
2. Протестировать визуальное представление в режиме предпросмотра.
3. Скопировать iframe-код через «Отправить» → вкладка «<>».
4. Вставить код в WordPress в блок Custom HTML (или в HTML виджет конструктора).
5. Опубликовать страницу и проверить на десктопе и мобильных.
6. Настроить уведомления и экспорт ответов в Google Таблицы.
7. Провести проверку безопасности и GDPR-соответствие.

Критерии приёмки:

• Форма открывается и отправляет ответы без ошибок.
• На мобильных экранах элементы видны и доступны.
• Нотификации приходят на почту по настройкам.
• Доступ по permalink работает и не конфликтует с другими страницами.

Ролевые контрольные списки

• Владелец сайта: утвердить содержание формы и политику конфиденциальности.
• Контент-редактор: проверить тексты вопросов, подтекстов и сообщений об успешной отправке.
• Разработчик: вставить iframe, настроить стили, проверить CSP и кеш.
• Менеджер по безопасности: подтвердить, что в форму не собираются излишние персональные данные и настроено соглашение о конфиденциальности.

Проверочные тесты и критерии

• Тест 1: отправить форму как незарегистрированный пользователь (если разрешено).
• Тест 2: отправить форму как тот, кто должен быть ограничен одним ответом.
• Тест 3: проверить, что ответ появляется в Google Таблицах.
• Тест 4: проверить адаптивность на 320px, 768px и 1200px.

Риски и рекомендации безопасности

• Риск: сбор персональных данных без согласия.
  Митигирование: добавьте чекбокс с согласием и ссылку на политику конфиденциальности.
• Риск: данные хранятся у третьей стороны (Google).
  Митигирование: при необходимости используйте корпоративный аккаунт Google Workspace и проверьте соглашения о данных.
• Риск: блокировка iframe политикой CSP.
  Митигирование: настройте CSP так, чтобы разрешить docs.google.com и related domains.

Альтернативные подходы

• Использовать плагин формы в WordPress (WPForms, Gravity Forms и др.) для полной интеграции в CMS.
• Использовать внешние сервисы (Typeform, JotForm) для улучшенного UX/аналитики.
• Для больших проектов переносить данные из Google Таблицы в свой бэкенд через API.

Совместимость и миграция

Таблица совместимости (обобщённо):

• Gutenberg: полная поддержка через Custom HTML.
• Классический редактор: вставка в текстовый режим.
• Elementor/Divi: HTML-блок.
• Wix/Squarespace: встроенный HTML/Embed элемент поддерживает iframe.
• Статические сайты: вставляете iframe в HTML-файл.

Если вы планируете миграцию сайта, убедитесь, что сохраняете permalink страницы с формой или перенаправляете старые URL на новые.

Юридические и GDPR заметки

• Если вы собираете персональные данные граждан ЕС, добавьте явное согласие и укажите цель обработки.
• Хранение данных у Google требует проверить договоры с Google как с обработчиком данных.
• Ограничьте доступ к таблицам с ответами и периодически очищайте старые записи, если это требуется политикой компании.

Важно: это общие рекомендации, не юридическая консультация.

Быстрое руководство по устранению проблем

• Форма не отображается: проверьте, не блокирует ли CSP домены Google.
• Полоса прокрутки и обрезание: увеличьте height и проверьте на мобильных.
• Нет уведомлений: проверьте настройки дополнения и разрешения подключения Gmail.

Пример решения для адаптивной высоты (ограниченное) — CSS + fallback

Минимальная матрица решений (когда что выбрать)

• Нужно быстро и бесплатно — Google Forms.
• Нужен брендовый дизайн и интеграция с WP — используйте плагин формы.
• Нужна автоматизация с CRM — настройте Zapier или Google Apps Script.

Часто задаваемые вопросы

Нужно ли пользователям иметь Google-аккаунт, чтобы отправлять форму?

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

Можно ли скрыть полосы прокрутки без обрезки содержимого?

Полностью корректного кроссдоменного решения для автоматической подгонки высоты iframe Google Forms нет. Лучший вариант — увеличить height и тестировать на типичных устройствах.

Как импортировать ответы в CRM?

Используйте связки Zapier/Make или Google Apps Script для переноса строк из Google Таблиц в CRM.

Решающее дерево выбора метода встраивания

graph TD
  A[Нужна форма на сайте?] --> B{Нужен брендинг и логика?}
  B -- Да --> C[Использовать плагин формы в WordPress]
  B -- Нет --> D{Нужно многоразовое размещение на разных платформах?}
  D -- Да --> E[Использовать Google Forms и iframe]
  D -- Нет --> C
  C --> F[Интеграция в базу данных сайта]
  E --> G[Встраивание iframe, экспорт в Таблицы, связки с Zapier]

Краткое резюме

• Google Forms быстро позволяет создать многоразовую форму и встроить её в WordPress через блок Custom HTML или конструктор страниц.
• Для лучшего UX настройте ширину и высоту iframe, проверьте адаптивность и настройте уведомления.
• Если нужны сложные интеграции или корпоративный контроль данных, рассмотрите плагины WordPress или автоматизацию с помощью Zapier/Google Apps Script.

Итоговые рекомендации: для простых задач используйте Google Forms; если требуются расширенные возможности и полный контроль, используйте WordPress-плагины или собственное решение.

Контакт и дополнительные ресурсы

Если нужна помощь с встраиванием или автоматизацией, обратитесь к разработчику сайта или специалисту по интеграциям.