Створюємо форму зворотного зв’язку за допомогою Google Forms

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

Розглянемо варіант з прикладу форми зворотний зв'язок:

  1. Ідемо до Google Drive і створюємо форму з полями
  2. Сторінка
  3. Ваше ім'я (текстове поле)
  4. Ваш email (текстове поле)
  5. Повідомлення (текстове поле)

  • Зберігаємо форму та відкриваємо документ у Google Drive. По-вкладці «Форма» переходимо до активної форми.
  • Робимо view source сторінці та копіюємо html код із тегом form.
  • Тепер html код можна вбудувати на сторінці, причому можна поміняти верстку, як завгодно, головне, щоб було валідно і залишилися атрибути id, name у полів форми, а також поля форми зі значенням hidden.

    • Усі поля мають id та name c однаковим значенням, де змінюється лише одна цифра починаючи з нуля. name="entry.0.single" біля першого поля name="entry.1.single" біля другого поля

    Перше поле «Сторінка» я зробив недарма, цьому полю ми робимо display: none; і в значення поля записуємо поточний URL сторінки.

    Але тепер при надсиланні форми користувач потраплятиме на сторінку Google з повідомленням про успішне надсилання форми, що трохи не відповідає очікуванням користувача, який надіслав форму на сайті. І тут мені на допомогу прийшов інший інструмент Google Search, для тега form додаємо 2 атрибути target, onsubmit та js з iframe.