Як використовувати Google Форми як контактну форму сайту

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

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

Крок 1: Створіть контактну форму

Створіть нову форму на forms.google.com і додайте ці питання. Тримайте список коротким — кожне додаткове обов'язкове поле в публічній контактній формі помірно знижує кількість відвідувачів, які завершують подачу, тож утримайтесь від бажання запитувати номер телефону чи назву компанії, якщо ваш процес подальшої комунікації справді цього не потребує:

• Ім'я — Коротка відповідь, обов'язково.
• Електронна адреса — Коротка відповідь, обов'язково.
• Тема — Випадаючий список з кількома попередньо визначеними категоріями, такими як «Загальне питання», «Підтримка», «Партнерство», «Інше». Випадаючий список тримає вхідні повідомлення сортованими замість покладання на теми вільного тексту.
• Повідомлення — Абзац, обов'язково.

Крок 2: Валідуйте поле електронної адреси

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

Крок 3: Вбудуйте її на свій сайт

Натисніть Send вгорі редактора форми, потім оберіть іконку <> (вбудувати). Google Форми генерують фрагмент iframe з встановленою шириною і висотою — скопіюйте його і вставте безпосередньо в HTML вашого сайту там, де хочете, щоб з'явилась форма. Якщо вам незручно редагувати HTML безпосередньо, наш повний посібник з вбудовування Google Форми на сайт також охоплює конструктори сторінок і CMS-платформи.

Кілька речей, які варто знати про вбудовану версію: вона відображається всередині рамки фіксованого розміру, тож на вузьких мобільних екранах вам може знадобитись налаштувати атрибути ширини/висоти iframe або обгорнути її в адаптивний контейнер. Вона також несе власне оформлення Google, яке не буде автоматично відповідати шрифтам чи кольорам вашого сайту.

Крок 4: Налаштуйте сповіщення (це частина, яку люди роблять неправильно)

Поширене припущення полягає в тому, що Google Форми надсилають вам лист у момент, коли хтось подає форму. Це не так за замовчуванням. З коробки Форми просто записують відповідь — нічого не надсилається у вашу поштову скриньку. У вас є два реалістичні варіанти:

• Встановіть додаток сповіщень. У редакторі форми натисніть іконку додатків у вигляді пазла і знайдіть у Google Workspace Marketplace інструмент сповіщень, наприклад «Form Notifications». Ці додатки відстежують нові подачі і надсилають вам (чи списку розсилки) лист автоматично. Перегляньте дозволи перед встановленням, оскільки додатки працюють всередині вашого облікового запису Google.
• Перевіряйте вручну. Періодично відкривайте вкладку Відповіді, або перевіряйте пов'язану Google Таблицю, яка оновлюється в реальному часі, коли надходять повідомлення. Це добре працює для сайтів з низьким трафіком, але непрактично, якщо вам потрібно швидко відповідати на запити.

Конфіденційність і збір даних у публічній контактній формі

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

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

Для повнішого розгляду формулювання згоди, зберігання даних і того, що вимагає GDPR конкретно для відвідувачів з ЄС, дивіться наш посібник з Google Форм і GDPR.

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

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

Оформлення вбудованої форми, щоб вона менше відчувалась «гугловською»

З коробки вбудована форма несе стандартний вигляд Google, що читається як помітно відмінне від решти брендованого сайту. Кілька коригувань допомагають їй менше відчуватись як відхилення:

• Встановіть колір теми. Натисніть іконку валика в редакторі і виберіть колір, близький до акцентного кольору вашого сайту. Це змінює колір верхньої панелі і кнопок всередині iframe.
• Оберіть відповідний стиль шрифту. Та сама панель теми пропонує невеликий набір поєднань шрифтів — оберіть те, що найближче читається до типографіки вашого сайту.
• Приберіть надлишковість заголовка/опису. Якщо ваша контактна сторінка вже має заголовок на кшталт «Зв'яжіться з нами», розгляньте залишення власного заголовка форми порожнім чи мінімальним, щоб не повторювати той самий заголовок двічі.
• Свідомо визначте розмір iframe. Стандартний код для вбудовування має фіксовану ширину і висоту; обгорніть його в адаптивний контейнер (width: 100%, висоту у відсотках, або min-height з прокручуванням), щоб він не виглядав тісним чи не залишав зайвий пробіл на різних розмірах екрана.

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

Google Форми проти посилання mailto:

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

Створення самої контактної форми поза комп'ютером

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

Усунення поширених проблем із вбудовуванням контактної форми

1. Iframe показує порожній білий блок. Переконайтесь, що обмін/видимість форми не обмежено до «конкретних людей» — публічна контактна форма потребує встановленого доступу «Будь-хто з посиланням», щоб вбудовування завантажувалось для відвідувачів сайту.
2. Вбудована форма виглядає обрізаною чи має смугу прокручування всередині. Висота вбудовування за замовчуванням — фіксоване значення в пікселях; збільште атрибут height у коді iframe, або встановіть його щедро і дозвольте зайвому пробілу бути компромісом.
3. Подачі не з'являються в пов'язаній Таблиці. Переконайтесь, що Таблиця дійсно пов'язана з вкладки Відповіді — поки ви не пов'яжете її, відповіді живуть лише всередині самого інтерфейсу Форм, а не в таблиці.
4. Вас не сповіщають про нові повідомлення, і ви пропустили запит. Це найпоширеніша скарга щодо Форм як контактної форми — встановіть додаток сповіщень, а не покладайтесь на пам'ять про ручну перевірку.

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

Схожі посібники

• Як вбудувати Google Форму на сайт
• Посібник з валідації відповідей Google Форм
• Порівняння найкращих застосунків для створення форм
• Google Форми для малого бізнесу
• Вбудовування Google Форми на WordPress
• Власні повідомлення підтвердження в Google Формах