Як користуватися google на 100% встановлюємо і стилізуємо google форму під свій сайт
Якщо ви вже оцінили ефективність такого інструменту, як форма зворотного зв'язку на своєму сайті - цей пост для вас. Сьогодні ми розповімо як без особливих зусиль і знань в вебдизайне і програмуванні зробити зі звичайної форми гугл - точну копію гарної форми на вашому сайті і збирати заявки, звернення, контакти і базу email - прямо в Google Таблицю!
Припустимо все це у нас є в наявності і приступимо до справи - покрокове керівництво як змінити стиль форми гугл.
Створюємо Google Форму
Йдемо в Google Диск і створюємо нашу форму.
Для даного прикладу ми взяли просту форму зворотного зв'язку з такими полями:
Стилізувати форму (міняти шрифти, кольори і доавлять картинки) поки не будемо. Нас цікавить тільки сама структура. За підсумком форма повинна виглядати так:
Як правильно буде помічено - ми не додали перевірку даних. Перевірка даних - штука корисна, бо дозволить простежити, що вам не буде відправлено замість email, наприклад, слово test. Перевірка додається так:
Відкриваємо форму і переконуємося, що вона робоча. Для цього заповнимо тестовими даними й натиснемо Готово:
Чи можемо приступати до наступного кроку.
Копіюємо код форми
- Google Chrome - Перевірити елемент
- Mozilla Firefox - Вихідний код сторінки
Вашому погляду відкриється весь код форми. Для непідготовленої людини - це кодовий пекло з купою незрозумілих і, на перший погляд, непотрібних рядків. Видихаємо. Копіюємо весь код, який знаходиться між тегами . Найпростіший спосіб це зробити - це, відкривши вихідний код сторінки, натиснути комбінацію клавіш Ctrl + F і ввівши в поле пошуку необхідний тег. Після цього - правою кнопкою по виділеному коду і Копіювати.
Вітаємо - ви вже можете вставляти цей код на сайт і застосовувати до нього свій CSS. Але і це ще не все - сторінка підтвердження відправки форми як і раніше посилається на стандартну від Google. Що-б змінити сторінку потвержденія - нам необхідно змінити наступний код:
Замінивши його на:
Все готово! Форма працює, дані заносяться в таблицю. Залишився всього один трюк - маленький, але важливий. Трюк цей називається - оповіщення про зміни в таблиці.
Для настройки сповіщень - відкриваємо таблицю, куди заносяться дані з форми (ми налаштовували її на самому початку шляху). В меню таблиці переходимо по шляху Інструменти - Повідомлення. У діалоговому вікні вибираємо такі пункти:
Таким чином кожен раз, як хтось заповнить і надішле форму - ви отримаєте повідомлення про те, що таблиця змінена. Зручно? Безумовно!
Не зайвим буде нагадати, що такий спосіб дозволяє не просто використовувати форму для контактів з клієнтами / партнерами / передплатниками, але ще і ефективно збирати базу передплатників, структурувати її, автоматизувати процес її створення. Просто порахуйте скільки часу йде у вас на перенесення контактів, які прийшли вам з форми зворотного зв'язку в базу контактів! При цьому, напевно, багато контактів губляться. Наш спосіб дозволить вам скоротити втрати контактів (або взагалі їх виключити).
До речі - ми підготували демонстрацію роботи, просто натисніть на кнопку: