Веб-формы для сайтов на WordPress. Руководство по веб формам.

веб формы

Если вы всерьез задумались зарабатывать деньги с помощью вашего блога или сайта, то вам обязательно понадобятся формы. Тем, кто уже имеет какой-то опыт в сфере веб-технологий и разработке на HTML и CSS, термин «форма» должен быть знаком, но я решил, что было бы очень полезно объяснить значение этого термина тем, кто с ним не знаком.

Что такое формы?

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

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

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

Элементы веб-формы:

В зависимости от назначения и сложности, веб-форма может содержать один или несколько элементов, приведенных ниже:

  • Текстовое поле: текстовое поле представляет пользователям текстовый блок, в который можно вписывать буквенно-цифровую информацию. Устанавливая ширину текстового поля, мы можем указать такой размер данного элемента, чтобы вводимая информация была видна пользователю. Если в качестве типа текстового поля мы выберем форму ввода пароля, то вводимая информация будет отображаться в виде астерисков (*).
  • Чекбокс: чекбоксы позволяют пользователям выбирать один или несколько вариантов из представленных опций. Каждый чекбокс должен быть обозначен именем и значением.
  • Радио-кнопки: радио-кнопки позволяют выбрать только один вариант из нескольких представленных.
  • Выпадающие списки: этот элемент позволяет пользователям выбрать пункт из списка, который открывается при наведении или клике мышью. Пользователю можно представить возможность выбрать только один вариант, либо несколько из представленных. В зависимости от пунктов списка, список может быть оформлен полосой прокрутки, если сумма количества пунктов превышает высоту окна просмотра. Также список можно обозначить значением по умолчанию.
  • Поле изображения: данное поле позволяет вам вставлять изображение.
  • Поле файла: данное поле позволяет пользователям загружать файл на сервер. При нажатии по данному полю, перед пользователем отображается обзор файлов на жестком диске, и после того, как файл будет выбран, будет произведена его загрузка.
  • Fieldset (группа полей): это не поле ввода и не поле для произведения какого-то действия, это элемент группирования нескольких полей схожего назначения.
  • Label (ярлык): у каждого поля есть ярлык. Ярлык можно расценивать как название конкретного поля.
  • ID: у каждого элемента есть уникальный id.
  • Button (кнопка): каждая форма имеет кнопку, при нажатии по которой запускается скрипт, будь то сброс введенных данных или подтверждение формы и т.д.

Это одни из основных элементов формы. Так как веб-технологии развиваются, мы наблюдаем появление усовершенствованных формы, в работе которых используется Ajax и Javascript, которые позволяют сократить уровень взаимодействия с пользователем и повышают уровень удобства использования.

web-form

Как создавать веб-формы, которые действительно работают:

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

обратная связь

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

Валидируйте формы: это следует учитывать всем веб-дизайнерам. Валидация формы подразумевает проверку конкретных элементов на наличие введенных данных, а также на то, соответствуют ли эти данные требуемому формату и т.д. К примеру, если текстовое поле предназначено для ввода имени пользователя, значит ее следует проверять на наличие текста, а также на предмет того, не были ли в нее введены цифры или специальные символы. Так же и в случае с полем ввода адреса электронной почты: нужно проверить, в правильном ли формате был введен email-адрес. Это все упрощает как для вас, так и для пользователя, потому что требуемые данные будут храниться в нужном формате. Валидация формы может быть выполнена динамическим образом в момент ввода данных, либо на момент подтверждения формы. В большинстве случаев, гораздо эффективнее проверять вводимые данные прямо в момент заполнения формы – это ускоряет процесс.

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

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

Давайте четкое обозначение всех обязательных полей: как часто вы попадали в ситуацию, когда при вводе формы вы, вроде бы, вводите все необходимые данные и подтверждаете, а оказывается так, что какие-то обязательные поля были заполнены неправильно? Чтобы избежать этого, оповестите пользователей о наличии обязательных полей, а также, по возможности, предоставьте им пример того, в каком формате данные должны быть введены. При разработке формы для собственного сайта, убедитесь, что все обязательные поля отмечены соответствующей надписью или хотя бы знаком астериска (*).

Сократите количество полей: это прекрасно, что каждому отделу вашей компании нужны какие-то конкретные данные, и все хотят вытянуть как можно больше информации из посетителей, но здесь суть заключается в том, что слишком длинные формы могут лишь только навредить вашей статистике – зачастую многие пользователи просто ленятся заполнять такие, и проходят мимо. А это значит, что вы вообще не получите никакой информации. Существуют исследования и мнения экспертов, в которых говорится, что показатели количества заполненных форм уменьшается равно-пропорционально тому, как в форму добавляются новые поля. Поэтому, старайтесь сократить количество полей до минимума. Чем меньше действий требуется от вашего посетителя – тем охотнее он делает все остальное. Например, при создании формы подписки на рассылку, некоторые владельцы веб-сайтов спрашивают имя, фамилию, email; некоторые спрашивают имя и email; некоторым требуется только email-адрес посетителя. Даже такое простое поле как ввод фамилии может существенно отрицательно сказаться на количестве подписок. Суть заключается в том, чтобы сокращать количество полей, где это возможно – ведь зачем вам знать фамилию человека, который просто получает вашу рассылку?

Используйте радио-кнопки, когда хотите получить лишь один ответ от пользователя: часто можно встретить кучу чекбоксов, где от посетителя требуется лишь один ответ. Это может слегка смутить посетителя, и к тому же вы можете получить не совсем достоверные данные. Когда вам нужно, чтобы пользователь выбрал лишь один вариант, то используйте радио-кнопки. Это также означает, что если вам нужно получить несколько вариантов, то вместо радио-кнопок следует использовать чекбоксы.

Всегда указывайте ответ по умолчанию, если это возможно: это помогает вашим посетителям быстрее заполнять формы, и положительно сказываться на показателях количества заполненных длинных форм. Например, если большинство ваших посетителей из США, то сделайте эту опцию ответом по умолчанию данных о доставке товара, купленного в вашем интернет-магазине – это позволит покупателю уделить больше внимания и времени другим полям.

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

Лучшие WordPress-плагины для создания форм:

конструктор форм

Кроме самого известного плагина для создания форм в WordPress, Contact Form 7, существуют и другие, не менее хорошие плагины, предоставляющие функционал и свойства для реализации хороших форм. Сегодня мы хочу представить вам небольшой список некоторых самых популярных WordPress-плагинов для создания форм:

Breezing Forms: если вам нужен многофункциональный и гибкий конструктор, то плагин Breezing Form точно подойдет вам. Он позволит вам создавать комплексные адаптивные формы, которые умеют адаптироваться под разрешение экрана, а значит будут отлично отображаться на экранах настольных ПК, планшетов или мобильных устройств. Вам нужно просто один раз настроить этот плагин, и забыть все беды, потому что у вас в руках будет готовый вариант для всех размеров экранов. Существует как бесплатная версия, так и версия про. Я думаю, не стоит объяснять, что версия про даст вам более расширенный функционал и дополнительные инструменты.

Formidable Pro: это drag’n’drop-плагин для создания форм в WordPress, который позволит даже новичкам без труда создавать комплексные формы. Не знакомы с HTML, CSS и техническим аспектом разработки? Не проблема — Formidable Pro позволяет вам создавать такие, где вы сможете определять права доступа к контенту вашего сайта. Вы можете использовать Formidable Pro для создания FAQ, перечней, опросов и многого другого. Все что вам останется сделать, это поместить шорткод в то место, где должна быть отображена форма.

Gravity Forms: данный плагин позволяет вам публиковать невероятно привлекательные формы буквально за пару минут. Просто выберите необходимые вам поля, настройте внешний вид и встройте форму в сайт. Встроенные инструменты позволят вам сделать это без особого труда.

Form Maker: этот современный и продвинутый инструмент для создания форм в WordPress обеспечит вам полный контроль над дизайном – от шрифтов до цветов и структуры полей. Здесь весь внешний вид настраивается прямо внутри плагина, а значит вы сможете подстроить дизайн формы под общий шаблон сайта. Вам не нужно быть прославленным дизайном или быть подкованным в языках для разработки, так как Form Maker генерирует весь необходимый код для комплексных. Существует как бесплатная, так и коммерческая версии. Коммерческая версия позволяет вам добавлять функционал карт от Google в формы, а также множество других дополнительных свойств.

Fast Secure Contact Form: как видно из названия плагина, владелец сайта сможет добавлять защищенные формы контакта. Данный плагин позволит пользователям высылать email администратору сайта, а также запрос на телефонный разговор или видеочат. Консоль администратора позволяет владельцу сайта следить за поступившими запросами и сообщениями, а также создавать новые.

В завершение

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

Если у вас есть какие-то замечания по статье или пожелания, пожалуйста, расскажите об этом в комментариях.

11
Июн

Вверх