Як вбудувати Google Форму на свій вебсайт

Оновлено в липні 2026 · 9 хв читання

Надсилання відвідувачів на інший сайт для заповнення форми втрачає частину з них по дорозі. Вбудовування Google Форми безпосередньо на вашу сторінку утримує людей у контексті — корисно для контактних форм, реєстрації на події, віджетів зворотного зв'язку чи будь-чого, що ви хочете, щоб відчувалося частиною вашого сайту, а не переходом убік. Google безкоштовно вбудовує код для вбудовування — ось як користуватися ним правильно.

Отримання вбудованого коду для вбудовування

1. Відкрийте форму та натисніть Send у верхньому правому куті.
2. У діалоговому вікні натисніть іконку < > (embed HTML).
3. Google згенерує фрагмент iframe, схожий на цей:

<iframe src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true" width="640" height="921" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>

4. Натисніть Copy, потім вставте цей фрагмент туди, де ваш сайт приймає необроблений HTML.

Налаштування ширини та висоти

Стандартні розміри, які генерує Google, є розумним припущенням, але рідко точним. Відредагуйте два числа безпосередньо в коді:

• Width — встановіть відповідно до колонки контенту вашої сторінки. Поширений вибір — width="100%" у поєднанні з максимальною шириною на обгортковому контейнері, щоб форма масштабувалася разом зі сторінкою, а не залишалася фіксованого розміру в пікселях.
• Height — саме це спричиняє проблеми. Google Форми не змінюють розмір iframe автоматично, коли ви додаєте чи видаляєте запитання, тож якщо ваша форма довша за значення висоти, нижня частина обрізається, і відвідувачам доводиться прокручувати всередині крихітного блока, щоб знайти кнопку надсилання. Якщо сумніваєтеся, встановіть висоту помітно більшою, ніж вважаєте потрібним — зайві 200–300 пікселів порожнього простору під короткою формою — значно менша проблема, ніж обрізана кнопка надсилання в довгій.

Вбудовування на WordPress

Додайте блок Custom HTML (у редакторі блоків) або віджет Text у режимі HTML (класичний редактор) і вставте туди код iframe. WordPress відображає його як є — плагін не потрібен, хоча плагіни форм, що «імпортують» Google Форми, зайві для такого простого вбудовування.

Вбудовування на Squarespace

Додайте Code Block на сторінку (з меню блоків під час редагування сторінки), вставте HTML iframe і збережіть. Блоки коду Squarespace приймають такі необроблені вбудовування без обмежень, але перевірте налаштування ширини блоку відносно сітки вашої сторінки, щоб форма не виходила за межі своєї колонки.

Вбудовування на Wix

Wix вимагає використання елемента Embed > Embed a Widget (або «HTML iframe») з панелі Add, а потім вставки коду в панель налаштувань, що відкривається. На відміну від WordPress і Squarespace, Wix відображає вбудований HTML усередині власної обгортки iframe, тож вам може знадобитися підправити розмір елемента на полотні на додаток до редагування значення висоти в коді.

Вбудовування на звичайній HTML-сторінці

Якщо ви вручну пишете сторінку, вставте фрагмент iframe безпосередньо в body там, де хочете, щоб з'явилася форма — жодної особливої обробки не потрібно. Гарна ідея — обгорнути його в контейнерний div з максимальною шириною, щоб форма не розтягувалася від краю до краю на широких екранах.

Поширені проблеми

1. Форма обрізана знизу. Це майже завжди проблема висоти — див. примітку про налаштування вище. Збільшуйте значення висоти, доки вся форма, включно з кнопкою надсилання та будь-якими помилками «required», що можуть з'явитися, не вміститься без внутрішньої смуги прокручування.
2. Вбудована форма не виглядає адаптивною на мобільному. Фіксована ширина в пікселях не зменшується для малих екранів. Встановіть width="100%" в iframe і дозвольте CSS max-width на батьківському елементі контролювати верхню межу, щоб форма природно масштабувалася на телефонах.
3. Форма завантажується порожньою або показує помилку «refused to connect». Зазвичай це означає, що сторінка, на якій вона вбудована, обслуговується через мережу чи проксі CMS, який блокує сторонні iframe. Перевірте налаштування Content-Security-Policy свого сайту, якщо ви керуєте ними безпосередньо, оскільки обмежувальне правило frame-src може непомітно блокувати домен Google.
4. Форма блимає «Loading…» і ніколи не завершує завантаження. Переконайтеся, що налаштування спільного доступу форми дозволяє будь-кому з посиланням переглядати її — якщо доступ обмежений конкретними людьми чи лише вашою організацією, вбудований iframe на публічній сторінці не завантажиться для сторонніх відвідувачів так само, як не спрацювало б і пряме посилання.
5. Стилістика виглядає неузгодженою з рештою сторінки. Google Форми відображають власні шрифти та кольори всередині iframe і не успадковують CSS вашого сайту — немає підтримуваного способу переоформити внутрішній вигляд форми ззовні iframe, лише контейнер навколо неї.

Вбудовування та швидкість завантаження сторінки

Вбудована Google Форма завантажує власний вміст iframe окремо від решти вашої сторінки, що додає додатковий мережевий запит і невелику затримку перед появою самої форми — зазвичай непомітну, але варту знання, якщо ви перевіряєте швидкість сторінки. Якщо форма розташована нижче видимої області, розгляньте лінивe завантаження iframe (додавши loading="lazy" до тегу iframe), щоб вона не конкурувала за пропускну здатність із контентом, який відвідувачі бачать одразу. Це нативний атрибут HTML, підтримуваний усіма сучасними браузерами, і не потребує додаткового скрипту.

Міркування щодо доступності

Оскільки вміст форми міститься всередині власного iframe Google, її доступність — мітки для програм читання з екрана, навігація клавіатурою, порядок фокусу — визначається самими Google Формами, а не чимось, що ви контролюєте на своїй сторінці. Одна річ, яку ви можете покращити зі свого боку — це додати описовий атрибут title до тегу iframe (наприклад, title="Форма реєстрації на подію"), який програми читання з екрана оголошують перед переходом до вбудованого вмісту. Для ширшого огляду того, наскільки доступні Google Форми з коробки, перегляньте наш посібник із доступності Google Форм.

Вбудовування проти простого посилання

Вбудовування утримує відвідувачів на вашій сторінці, відповідає навколишньому дизайну вашого сайту та може зменшити відсів, що трапляється, коли когось перенаправляють на незнайомий домен. Це кращий вибір для коротких форм, розміщених на окремій сторінці — наприклад, контактної форми чи швидкого віджета зворотного зв'язку.

Посилання простіше в налаштуванні (не потрібне налаштування висоти), надає формі повний, необмежений макет і уникає відчуття прокручування всередині блока, яке можуть створювати довгі форми чи форми з кількома розділами в тісному iframe. Якщо ваша форма довга, має завантаження файлів чи використовує запитання-таблиці, пряме посилання на неї — див. наш посібник із поширення Google Форми — зазвичай зручніший досвід для респондентів.

Вбудовування для контактної форми

Вбудовування особливо популярне для перетворення Google Форми на безкоштовну контактну форму на бізнес-сайті чи сайті-портфоліо — без бекенду, без налаштування поштового сервера, а відповіді потрапляють прямо в Google Таблицю, яку можна перевірити будь-коли. Якщо це саме ваша мета, наш окремий посібник про використання Google Форм як контактної форми для вашого сайту охоплює вибір полів і налаштування зменшення спаму, варті додавання поверх базового вбудовування.

Часті запитання

Пов'язані посібники

• Як поділитися Google Формою
• Використання Google Форм як контактної форми
• Як створити Google Форму
• Детально про вбудовування Google Форми у WordPress
• Посібник із доступності Google Форм