Як додати форму Google Forms на ваш сайт на WordPress

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

Але, перш ніж завантажувати черговий новий модний плагін, зверніть увагу на Google Форми, які ви можете легко інтегрувати з будь-яким сайтом WordPress.

Дивіться також:

• Огляд кращих плагінів контактних форм для WordPress
• Використання контактних форм у WordPress
• CaptainForm - новий безкоштовний плагін WordPress для створення різних веб-форм
• Додаємо красиву контактну форму у вигляді бокового слайду на сайті WordPress
• Contact Form 7 — WordPress плагін для контактної форми

Знайомство з Google Forms

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

Якщо у вас ще немає встановленого Google Drive, то ви без будь-яких труднощів зможете швидко та безкоштовно його завантажити. Якщо ж він уже встановлений, то перейдіть до Мій диск, клацніть на велику червону кнопку New, у вікні, наведіть курсор на опцію More і після цього, в самому низу ви побачите меню з Google Forms. Натисніть на нього та відкривайте нову сторінку для створення та редагування форми.

За допомогою Google Forms, ви можете:

• Створювати опитування, додатки, реєстрацію, анкети, вікторини і т.д.
• Форматувати ваші поля користувача як текст, абзаци, чекбокси або як будь-які інші елементи зі списку
• Зберігати email ваших передплатників для розсилки
• Завдяки drag&drop швидко міняти всі елементи місцями
• Додавати зображення та відео з YouTube
• Вибирати дизайн теми
• Працювати спільно з іншими користувачами Google Drive
• Використовувати розгалуження та аддони для створення більш складних форм
• Попередньо переглядати вашу форму
• Налаштовувати сторінку підтвердження
• Керувати відповідями та коментарями
• І багато-багато іншого!

Поділитися посиланням на форму не так вже й складно, але що, якщо вам потрібно розмістити форму на вашому сайті WordPress?

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

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

На щастя для вас існує спеціальний плагін, який зможе вирішити цю проблему.

плагін Google Форми

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

Давайте почнемо працювати з ним.

Після того, як ви встановили та активували плагін, на бічній панелі з'явиться нове посилання Google Форми. Наведіть курсор на неї і побачите три варіанти: Google Forms, Add New Google Form та Form Submission Log:

У вкладці Google Forms ви можете побачити всі ваші форми, подібно до того, як ви бачите список усіх постів або сторінок. Крім того, ви можете застосувати якісь масові дії для фільтрації, редагування та видалення форм.

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

Як ви помітили, вам потрібна форма, створена заздалегідь та безпосередньо її URL.

Для цього перейдіть до Google Drive і у вікні створення вашої форми натисніть велику блакитну кнопку Надіслати форму в верхньому правому кутку. Перед вами з'явиться вікно з різними елементами, серед яких ви знайдете і посилання, яке слід скопіювати.

Після цього вставте посилання у поле форма URL у самому плагіні.

Далі можна додати необов'язкову функцію підтвердження URL. Оскільки дефолтна сторінка підтвердження є дуже простою і не може нормально інтегруватися з вашим сайтом, ми пропонуємо заповнити це поле, щоб спростити весь процес.

Для атрибуту Спеціальний стиль сторінки підтвердження Ви можете вказати, як він буде представлений, вибравши варіант Redirect або AJAX. Майте на увазі, що якщо ви не оберете жодний з варіантів, то за умовчанням буде використовуватися Redirect.

Це три основні області, які вам обов'язково потрібно заповнити, щоби все працювало належним чином. Далі, давайте подивимося, як ще ви можете налаштувати та оформити форму на сайті WordPress.

Заповнення додаткових полів у плагіні Google Forms

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

• Оповіщення: Для того, щоб користувачі знали, що все пройшло успішно, ви можете додати функцію, яка буде виводити користувачеві на екран повідомлення типу "Дякую за реєстрацію!" після закінчення заповнення форми. Використовуватиметься JavaScript Alert.
• Клас: Якщо ви маєте намір серйозно настроювати CSS вашої форми, ви можете використовувати атрибут класу, щоб додати один або кілька класів CSS в DIV форми. Відокремлюйте класи, додаючи прогалини між ними.
• Електронна пошта: Налаштувавши цей параметр, ви можете увімкнути функцію, завдяки якій після кожного успішного заповнення форми вам буде надходити лист із оповіщенням. Лист буде включати URL форми, а також дату і час заповнення.
• Надіслати: Якщо ви вирішите увімкнути попередній варіант, то в цьому полі можете вказати конкретну адресу електронної пошти. Майте на увазі, що повідомлення завжди надсилатиметься і адміністратору через bcc.
• CSS форма: Це поле можна використовувати для введення будь-якого користувача CSS.
• форма Кешування: Ви можете увімкнути цю функцію, якщо хочете, щоб дані форми зберігалися на деякий час. Ви можете вказати конкретний час для кешування та подальшого перезавантаження форми.
• Google поля форми перевірки: Ця функція задається за замовчуванням, але після її включення буде додано спеціальну форму на основі JQuery від плагіну jQuery Validate. Ви можете використовувати її для перевірки всіх необхідних полів, не надаючи жодної інформації Google.
• Google Form Hidden Fields: Якщо у вашої форми є якісь приховані поля, які ви хотіли б налаштувати, ви можете зробити це за допомогою цього додаткового вікна. Ви повинні задати ім'я поля у формі Google. У цьому випадку можна використовувати тільки такі параметри, як значення, URL і timestamp.
• Google Форма поле Заполнитель: Для тих, хто хотів би включити функцію плейсхолдерів, плагін надає таку можливість Вам потрібно буде надати ім'я полю і задати його значення.
• Google Form Default Text Overrides: Це більш просунута функція, яка дозволяє настроїти оформлення тексту у вашій формі, якщо вам не подобається дефолтний варіант.

Налаштування параметрів плагіна в Google Form

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

• CAPTCHA на основі: Захищає вас від спам-ботів та створює додатковий рівень перевірки.
• Колони: форми Google відображаються лише в одній колонці за промовчанням. За допомогою цієї функції, можна розділити поля форми кілька колонок. Ви також можете вказати порядок стовпців, вибравши варіант ліворуч-праворуч або праворуч-ліворуч.
• E-mail для кінцевого користувача: Активуйте цю функцію, якщо хочете, щоб користувач отримав повідомлення на свою електронну пошту після заповнення форми.
• легальний: Стандартно завжди буде підпис “Powered by Google Docs”, який ви можете вимкнути у цьому вікні.
• Тільки для читання: Якщо ви хочете створити форму тільки для читання, ви можете вказати це тут.
• префікс CSS: Додавання префіксу на початок кожного імені класу у формі Google можна використовувати для індивідуального оформлення.
• CSS Суфікс: Якщо ви не використовуєте це в CSS, то ця функція зможе додати символьний рядок до кінця кожного лейбла.
• назва: Якщо ви не бажаєте, щоб назва вашої форми Google відображалася на сайті, можете встановити це тут.
• Map H1 to H2: Якщо ви хочете виводити назву, але не як елемент H1 (що встановлено за замовчуванням), ви можете використовувати цю функцію для того, щоб виводити його на екран як елемент Н2.
• Unite Theme Hack: Якщо ви не використовуєте тему Об'єднуватися від Paralleus вам не потрібно звертати увагу на це поле. В іншому випадку, обов'язково увімкніть цю функцію, оскільки без цього хаку функція не працюватиме належним чином.

Публікація вашої форми на сайті WordPress

Тепер, коли у вас є готова до використання Google форма, ви можете зберегти її як чернетку, переглянути, як вона буде виглядати, або відразу опублікувати її на сайті. Постійне посилання виглядатиме приблизно так: , але ви можете змінити назву, перш ніж ви все опублікуєте.

Після того, як ви опублікували форму, ви можете відправити її своїм користувачам або розмістити її на іншій сторінці, використовуючи її шорткод. Щоб отримати його, перейдіть до Google Forms і ви побачите його поряд з ім'ям вашої форми.

Ви можете переглянути сторінку, щоб побачити, як ваша форма виглядає на сайті та наскільки добре вона з ним поєднується. Ось як виглядає наша форма з темою Twenty Fifteen:

Журнал подій

Ви знайдете журнал усіх подій, перейшовши до меню Журнал подання форми. Ви побачите таймстемп та URL кожної дії, які зможете видалити у будь-який час.

Як альтернатива, ви можете перейти назад у вашу форму в Google Drive і переглянути відповіді там. У верхньому меню є опція Responses, що дозволяє побачити зведення ваших відповідей. До того ж під нею знаходиться ще один варіант View responses, який виведе усі відповіді у форматі електронних таблиць.

Висновок

З власного досвіду ми можемо сказати, що використовувати Google Forms дуже зручно. Так, можливо, це не найкрученіше і функціональне програмне забезпечення, але це абсолютно безкоштовний ресурс, так що його безперечно варто взяти на замітку.

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

Чи використовуєте ви Google Forms на вашому сайті? Якщо так, то навіщо саме? Обов'язково ділитесь з нами порадами та вашими враженнями у коментарях нижче.

Джерело: wpmudev.org