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

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

Но, прежде чем скачивать очередной новый модный плагин, обратите внимание на Google Forms, которые вы сможете без проблем без труда интегрировать с любым веб-сайтом WordPress.


Как добавить форму Google Forms на веб-сайт на WordPress

Смотрите также:

  • Обзор лучших плагинов контактных форм для WordPress
  • Использование контактных форм в WordPress
  • CaptainForm — новый бесплатный плагин WordPress для создания различных веб-форм
  • Добавляем красивую контактную форму в виде бокового слайда на веб-сайте WordPress
  • Contact Form 7 — WordPress плагин для контактной формы

Знакомство с Google Forms

Google Forms — это универсальный и совершенно бесплатный инструмент от Google, который входит в состав Google Drive. Эта функцию настолько тщательно спрятана, что многие активные посетители Google даже не подозревают о ее существовании.

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

Как добавить форму Google Forms на веб-сайт на WordPress

При помощи Google Forms, вы можете легко:

  • Создавать опросы, приложения, регистрации, анкеты, викторины и т.д.
  • Форматировать пользовательские поля ввода как текст, абзацы, чекбоксы или как любые иные элементы из списка
  • Хранить email подписчиков для рассылки
  • Благодаря drag&drop быстро менять все элементы местами
  • Добавлять картинки и видео с YouTube
  • Выбирать дизайн темы
  • Работать совместно с иными посетителями Google Drive
  • Использовать разветвления и аддоны для создания более сложных форм
  • Предварительно просматривать форму
  • Настраивать страницу подтверждения
  • Управлять ответами и комментариями
  • И много-много иного!

Поделиться ссылкой на форму не так уж сложно, но что, если вам необходимо разместить форму на веб-сайте WordPress?

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

Самой основной проблемой этого способа будет то, что форма будет сохранять дефолтный стиль Google и может не гармонировать с дизайном веб-сайта. Форма не будет изменена при помощи CSS, к тому же на ней будет выводиться логотип Google и пару ссылок на дополнительную информацию от Google.

К счастью для вас, существует специальный плагин, который сможет решить эту проблему.

Плагин Google Forms


Как добавить форму Google Forms на веб-сайт на WordPress

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

Давайте приступим к работе с ним.

После того, как вы установили и активировали плагин, на боковой панели появится новая ссылка Google Forms. Наведите курсор на нее и увидите три варианта: Google Forms, Add New Google Form и Form Submission Log:

Как добавить форму Google Forms на веб-сайт на WordPress

Во вкладке Google Forms вы можете увидеть все формы, подобно тому, как вы видите список всех записей или страниц. Кроме того, вы можете без труда применить какие-то массовые действия для фильтрации, редактирования и удаления форм.

Если у вас ещё нет никаких форм, в данной вкладке вы ничего не увидите. В этом плагине вы не сможете без проблем самостоятельно создавать ваши формы, но вы можете добавлять существующие, просто нажав на Add New Google Form. Для примера, мы будем использовать простую форму для регистрации:

Как добавить форму Google Forms на веб-сайт на WordPress

Как вы заметили, вам нужна форма, созданная заранее и непосредственно ее URL.

Для этого, перейдите в Google Drive и в окне создания формы нажмите большую голубую кнопку Send Form в верхнем правом углу. Перед вами появится окно с различными элементами, среди которых вы найдете и необходимую ссылку, которую следует скопировать.

После этого вставьте ссылку в поле ввода Form URL в самом плагине.

Как добавить форму Google Forms на веб-сайт на WordPress

Далее, вы можете без проблем добавить необязательную возможность подтверждения URL. Так как дефолтная страница подтверждения простая и не может нормально интегрироваться с веб-сайтом, мы предлагаем заполнить это поле ввода, чтобы упростить весь процесс.

Для атрибута Custom Confirmation Page Style вы можете легко указать, как он будет представлен, выбрав вариант Redirect или AJAX. Имейте в виду, что если вы не выберите никакой из вариантов, то по умолчанию будет использоваться Redirect.

Это три основные области, которые вам обязательно необходимо заполнить, чтобы все работало должным образом. Далее, давайте посмотрим, как ещё вы можете без труда изменить и оформить форму на веб-сайте WordPress.

Заполнение дополнительных полей ввода в плагине Google Forms

Существует гораздо больше полей ввода, которые вы можете легко изменить, но скорее всего, вам никогда не потребуется настраивать их всех одновременно, особенно, если вы создаете не сложную форму. Но для общего развития и более подробного знакомства, давайте посмотрим какие ещё есть варианты.

  • Alert: Для того, чтобы посетители знали, что все прошло успешно, вы можете добавить возможность, которая будет отображать посетителю на экран сообщение типа «Спасибо за регистрацию!» по окончанию заполнения формы. Будет использоваться JavaScript Alert.
  • Class: Если вы намерены серьезно настраивать CSS формы, вы можете использовать атрибут класса, чтобы добавить один или пару классов CSS в DIV формы. Отделяйте классы, добавляя пробелы между ними.
  • E-mail: Настроив этот настройка, вы можете включить возможность, благодаря которой, после каждого успешного заполнения формы, вам будет приходить письмо с оповещением. Письмо будет включать в себя URL формы, а также дату и время заполнения.
  • Send To: Если вы решите включить предыдущий вариант, то в этом поле ввода можете указать конкретный адрес электронной почты. Имейте в виду, что сообщение будет отправляться и администратору через bcc.
  • Form CSS: Это поле ввода можно без проблем использовать для ввода любого пользовательского CSS.
  • Form Caching: Вы можете включить эту возможность, если планируете, чтобы данные из формы сохранялись на некоторое время. Вы можете указать конкретное время для кэширования и дальнейшей перезагрузки формы.
  • Google Form Field Validation: Эта функцию задается по умолчанию, но после ее включения будет добавлена специальная форма на основе JQuery от плагина jQuery Validate. Вы можете без проблем использовать ее для проверки всех необходимых полей ввода, не предоставляя никакую информацию Google.
  • Google Form Hidden Fields: Если у формы есть какие-либо скрытые поля ввода, которые вы хотели бы изменить, вы можете сделать это при помощи этого дополнительного окна. Вы должны будете задать имя поля ввода в форме Google. В данном случае вы можете использовать только такие настройки, как значение, URL и timestamp.
  • Google Form Field Placeholder: Для тех, кто хотел бы включить возможность плейсхолдеров, плагин предлагает такую функция. Вам необходимо будет присвоить имя полю ввода и задать его значение.
  • Google Form Default Text Overrides: Это более продвинутая функцию, которая может изменить оформление текста в форме, если вам не нравится дефолтный вариант.

Параметр настроек плагина в Google Form

Мы ещё не в полном объеме закончили с нашими параметрами. Не смотря на то, что все они не обязательны, некоторые из них могут отлично повлиять на оформление формы, задать необходимые настройки и т.д.

  • CAPTCHA: Защищает вас от спам-ботов и создает дополнительный уровень проверки.
  • Columns: формы Google выводятся только в одной колонке по умолчанию. При помощи данной возможности, вы можете без труда разделить поля ввода формы пару колонок. Вы также можете указать порядок столбцов, выбрав вариант слева-направо или справа-налево.
  • Email End User: Активируйте эту возможность, если хотели бы, чтобы посетитель получил уведомление на электронную почту, после заполнения формы.
  • Legal: Стандартно будет подпись “Powered by Google Docs”, которую вы можете без труда отключить в данном окне.
  • Read Only: Если вы планируете создать форму только для чтения, вы можете это указать здесь.
  • CSS Prefix: Добавление префикса к началу каждого имени класса в форме Google можно без труда использовать для индивидуального оформления.
  • CSS Suffix: Если вы не используете это в CSS, то данная функцию сможет добавить символьную строку к концу каждого лейбла.
  • Title: Если вы не хотели бы, чтобы название формы Google отображалось на веб-сайте, можете установить это здесь.
  • Map H1 to H2: Если вы планируете отображать название, но не в виде элемента H1(что установлено по умолчанию), вы можете использовать эту возможность для того, чтобы отображать его на экран, как элемент Н2.
  • Unite Theme Hack: Если вы не используете тему Unite от Paralleus, вам не необходимо обращать внимание на это поле ввода. В противном случае, обязательно включите эту возможность, так как без данного хака функцию не будет работать должным образом.

Публикация формы на веб-сайте WordPress

Сейчас, когда у вас есть готовая к использованию Google форма, вы можете сохранить ее, как черновик, просмотреть, как она будет выглядеть, или сразу же опубликовать ее на веб-сайте. Постоянная ссылка будет выглядеть примерно так: http://example.com/wpgforms/title/, но вы можете настроить название, до того, как вы все опубликуете.

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

Как добавить форму Google Forms на  веб-сайт на WordPress

Вы можете легко просмотреть страницу, чтобы увидеть, как форма смотрится на веб-сайте и насколько отлично она с ним сочетается. Вот как выглядит наша форма с темой Twenty Fifteen:

Как добавить форму Google Forms на  веб-сайт на WordPress

Журнал событий

Вы найдете журнал всех событий, перейдя в меню Form Submission Log. Вы увидите таймстемп и URL каждого действия, которые сможете без проблем удалить в любое время.

В виде альтернативы, вы можете перейти обратно в форму в Google Drive и просмотреть ответы там. В верхнем меню есть опция Responses, которая может увидеть сводку ответов. К тому же, под ней находится ещё один вариант View responses, который выведет все ответы в формате электронных таблиц.

Как добавить форму Google Forms на  веб-сайт на WordPress

Заключение

Из личного опыта мы может сказать, что использовать Google Forms удобно. Да, возможно, это не самое навороченное и функциональное программное обеспечение, но это абсолютно бесплатный ресурс, поэтому его определенно следует взять на заметку.

Если вы планируете в полном объеме контролировать оформление форм, то тогда следует скачать плагин Google Forms для WordPress. При правильных параметрах и дизайне посетители никогда не догадаются, что вы используете бесплатный сервис от Google.

Используете ли вы Google Forms на веб-сайте? Если да, то для чего? Обязательно делитесь с нами советами и впечатлениями в комментариях ниже.

Источник: wpmudev.org

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *