Автозаполнение поля «город» на основе почтового индекса
Если вы просите пользователя заполнить домашний адрес, то рассмотрите возможность автозаполнения города и области из введенного почтового индекса. В результате этого ваша форма будет эффективнее, так как пользователю не придется тратить время и силы на то, чтобы впечатывать свой город в поле или выбирать его из длинного выпадающего списка.
Не ставьте по умолчанию галочку в чекбоксе «подписаться на рассылку», предлагайте сначала посмотреть превью письма
Большинство веб-сайтов по умолчанию подписывают своих свежезарегистрированных посетителей в надежде получить побольше подписчиков своей корпоративной рассылки. Да, такой прием иногда срабатывает, однако подписка бессмысленна, если пользователь просто не заметил опцию ее отключения или не понял назначения этой опции.
Если пользователю неинтересно будет получать вашу рассылку, он все равно отпишется от нее, и в долгосрочной перспективе такой метод вам не поможет. А еще рассылка писем пользователям, не подозревавшим о наличии рассылки, легко может оттолкнуть их от вас.
Более эффективным подходом было бы продемонстрировать превью или отрывок письма из рассылки. В таком случае пользователи смогут наглядно представить что они потеряют, если не подпишутся. А еще вы будете спать спокойно, зная, что вашу рассылку получают только те, кто точно в ней заинтересован.
Что вам понадобится для выполнения этого руководства
Чтобы выполнить это руководство, вам понадобится:
Авторизируйте пользователя так, чтобы он оставался на той же странице
Авторизация на сайте — это важная функция, и пользователи захотят иметь возможность авторизоваться с любой странички на сайте. Так что не забудьте сделать так, чтобы после входа на сайт пользователь попал на ту же страничку, с которой он авторизовывался. Это сделает процесс проще и поможет пользователю сразу приступить к решению своей задачи на сайте.
Существует два пути реализации такого процесса: выпадающая форма и модальное окно.
Выпадающая форма открывается, не унося пользователя с текущей страницы. Она занимает только небольшую область на странице, что позволяет сделать форму в таком варианте быстрым и ненагруженным решением.
Модальное окно также не уносит пользователя с текущей страницы — оно разворачивается по центру страницы, концентрируя внимание полностью на форме авторизации. Этот вариант дает возможность разместить в форме дополнительную информацию.
Делайте кнопку «подтвердить» такой же ширины, что и поля ввода
Кнопка подтверждения создана не просто для того, чтобы сделать возможным действие — она еще показывает какое именно действие пользователь сейчас совершит. Маленький размер кнопки означает слабую подсказку к манипулированию, из-за чего пользователь может сомневаться в нужности данного действия.
Широкая кнопка придает уверенности, и её трудно не заметить. Название кнопки также становится заметнее, поэтому пользователь лучше понимает действие, которое собирается совершить.
15 плагинов для улучшения страницы авторизации в wordpress | wordpress в квадрате
Страница авторизации — это страница с формой ввода личных данных для авторизации в администраторскую часть сайта. Которая по умолчанию очень простая и выглядит одинаково на всех сайтах данного движка.
Если вы заботитесь о своем сайта, то вам нужно уделить особое внимание этой странице, потому что, с нее начинается более глубокая работа с сайтом и управление им. А именно, сделать ее более безопасной, защищённой от взлома, при этом обеспечить возможность легкой регистрации клиентов (если это нужно) и многое другое.
И в этой статье я подобрал для вас некоторые плагинов улучшения данной страницы и кастомизации ее под свои нужды.
WPForms — один из лучших плагинов для создания форм в WordPress и, в том числе, регистрационных. Плагин позволяет вам создавать свои собственные пользовательские регистрационные формы в несколько щелчков мыши. После создания вы сможете добавлять эти формы в любом месте вашего веб-сайта.
WPForms — это 100%-вое мобильное решение для резинового дизайна, поэтому все ваши формы всегда будут отлично смотреться на всех устройствах (мобильных, планшетах, ноутбуках и настольных компьютерах).
Social Login — бесплатный комплексный WordPress плагин, который предлагает простое решение входа и регистрации на сайт через социальные сети. Для него доступна авторизация через такие ведущие сайты, как Facebook, Twitter, Google, LinkedIn, PayPal, LiveJournal, Instagram, Yahoo, ВК и многие другие.
Вы хотите разрешить пользователям регистрироваться на вашем WordPress сайте, но не хотите, чтобы они попадали в область администрирования? Theme My Login — это популярный плагин, который позволяет создавать пользовательские страницы входа в WordPress. С ним вы сможете использовать любую страницу на своем сайте в качестве страницы входа или регистрации.
Хотите предоставить доступ разработчику вашего WordPress сайта только на некоторое время? Temporary Login Without Password поможет вам это сделать. Плагин временно пускает в админку для работы с сайтом, не создавая при этом учетную запись. С ним вы легко сможете установить дату истечения срока доступа, или указать время для входа в систему и когда его нужно закрыть.
По умолчанию WordPress не блокирует пользователей, если они несколько раз пытаются ввести неправильные данные для авторизации. А это позволяет хакерам узнать ваш пароль с помощью автоматических скриптов перебора паролей. Login Lockdown позволит вам ограничить количество неудачных попыток входа в систему. После чего он блокирует экран входа для этого пользователя в течение некоторого времени.
Хотите сделать авторизацию через Facebook на своем WordPress? Плагин Nextend Facebook Connect позволяет легко и быстро это реализовать на своем сайте. Данная возможность позволяет вашим пользователям быстрее входить в систему, без постоянного ввода логина и пароля.
Страница входа в WordPress по умолчанию выглядит довольно просто. Но вы можете изменить её различными способами, как с использованием дополнительных плагинов, так и собственноручного редактирования кода стилей. Плагин Custom Login Page Customizer позволяет вам создать свой собственный стиль страницы входа в систему, используя страницу настройки темы.
Плагин WP Security Questions позволяет добавлять вопросы безопасности на вашу форму входа в WordPress. С этим плагином пользователи должны будут вписывать не только свой логин и пароль, но и выбрать секретный вопрос, ответив правильно на него. Это добавляет вам определенный уровень безопасности в область администрирования WordPress.
По умолчанию WordPress позволяет вводить свое имя пользователя или адрес электронной почты для входа на сайт. Но некоторые пользователи вписывали при регистрации свой адрес электронной почты, который является общеизвестным. А это, в свою очередь, может облегчить кому-то попасть на вашу страницу, уже зная логин. Плагин No Login by Email Address позволяет отключить возможность авторизации по адресу электронной почты, а оставить только по имени пользователя.
Rename wp-login.php — очень легкий плагин, который позволяет легко и безопасно изменить адрес авторизации с wp-login.php на что угодно. Он не буквально переименовывает и не изменяет файлы в ядре. Он просто перехватывает запросы страниц и работает на любом сайте WordPress. Каталог wp-admin и страница wp-login.php становятся недоступными, поэтому вы должны добавить в закладки или запомнить URL, который вы придумаете сами. Деактивация этого плагина возвращает ваш сайт точно в то состояние, в котором он был раньше.
Вы хотите видеть, что делают авторизированные пользователи на вашем сайте WordPress? Плагин Simple History позволит вам легко отслеживать активность пользователей на вашем сайте, включая их частоту входа и их действия во время сеанса.
Вам нужно сделать ваш WordPress сайт закрытым и с доступом только по паролю? Плагин Password Protected позволит вам легко защитить ваш сайт от сторонних посещений. Для этого не нужно проводить регистрацию пользователей, просто ограничиваете сайт для просмотра по паролю и раздаете его своим будущим посетителям (например, с помощью электронной рассылки).
Хотите узнавать, когда ваши пользователи входили в систему? Это поможет вам узнавать их активность, и принять какие-то действия по отношению к ним. Например, вы сможете отправить им электронное письмо с напоминанием о себе, или удалить их учетную запись, если клиент давно не проявлял никакую активность. WP Last Login позволит вам быстро увидеть дату последнего входа каждого пользователя на странице «Пользователи».
Хотите перенаправить пользователей на разные страницы после входа? Плагин Peter’s Login Redirect позволит вам легко перенаправлять пользователей после входа на выбранную вами страницу. В настройкам можно будет задать разные страницы для разных ролей пользователей, а так же задать страницу после новой регистрации.
Данный плагин создан не улучшить страницу входа на ваш сайт, а закрыть его полностью на время обслуживания. Это очень полезно для ограничения сайта от посетителей, до официального релиза. Плагин Maintenance очень легко настраивается и хорошо выглядит на всех устройствах благодаря гибкой компоновке. На страницу вывода вы сможете добавить свой логотип, фоновое изображение, текст и выбрать желаемый цвет, чтобы сохранить фирменный стиль.
Я надеюсь, что эта статья помогла вам подобрать для себя полезные плагины для улучшения формы авторизации на WordPress сайте.
Автоматически устанавливайте курсор в первое поле формы
Как только пользователи увидят перед собой форму авторизации, они будут готовы к тому, чтобы войти на сайт. Вы можете облегчить им задачу, размещая курсор в первом поле ввода. Тогда пользователям не придется наводить мышку на поле и кликать по нему. Они смогут держать руки на клавиатуре и сразу же начать вводить необходимые данные.
Автоподстановка в поле «страна»
Обычно пользователя просят выбрать страну проживания из длинного выпадающего списка. Однако разумнее будет использовать автоподстановку названия страны по вводимым в поле символам — пользователь сможет выбрать свою страну, напечатав пару символов ее названия.
Боритесь со спамом, пряча при помощи javascript текстовое поле, вместо использования капчи
Если вы страдаете от обилия спама, вам совсем не обязательно использовать капчу. При использовании капчи в ее традиционном виде пользователю предлагается ввести в поле искаженные символы с картинки. Наличие капчи, к сожалению, негативно сказывается на конверсии, ведь ее заполнение — это дополнительное усилие, затрачиваемое пользователем.
Простой способ побороть спам, при этом не теряя в конверсии — использование скрытого обязательного поля ввода, создаваемого JavaScript на стороне клиента. Спамботы не могут взаимодействовать с объектами Javascript на стороне клиента, это может сделать только пользователь.
Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.
Используйте иконку вопроса в качестве ссылки для восстановления пароля
Пользователи не должны испытывть проблем с поиском ссылки восстановления пароля в форме. Вместо того, чтобы использовать слова «Забыли пароль?» в качестве ссылки, достаточно сделать ссылкой маленькую иконку в виде знака вопроса, которая не потеряется среди других ссылок и не занимает много места.
Настройка плагина
Для начала добавим описание плагина:
Позвольте пользователям видеть их пароли
Эта опция полезна при авторизации точно так же, как и при регистрации. Если пользователи не видят символов в поле, они легко могут опечататься, после чего им придется вводить пароль заново до тех пор, пока они не введут его правильно.
Проблема состоит в том, что пользователь не знает, какой именно символ он ввел неправильно, и не может исправить ошибку с первого раза. Это требует больше усилий, и замедляет пользователя. От этой проблемы можно избавиться, включив в форму чекбокс «показать пароль».
Позволяйте пользователям скопировать платежный адрес из адреса доставки
В США и других странах пользователь, желая приобрести что-то в сети, должен указать не только адрес доставки товара, но еще и так называемый адрес оплаты (по нему может быть доставлен чек). В большинстве случаев эти адреса совпадают, так почему бы не разрешить пользователям скопировать их из одного в другой?
Спрашивайте имя пользователя уже после регистрации
Во время заполнения формы регистрации от пользователя требуется придумать и ввести уникальное имя. И если пользователь придумывает и вводит уже кем-то занятое имя, ему приходится думать еще, он тратит свое время и терпение. Вместо того чтобы требовать у посетителей имя в процессе регистрации, вы вполне можете спросить его сразу после этого процесса.
Спрашивайте пароль только один раз
Многие формы регистрации предлагают пользователям ввести пароль в два поля. Причины этого вполне понятны — вводимый пароль в форме прячется за маской из соображений безопасности: так люди за спиной не смогут его увидеть. А два поля в этом случае помогают избежать опечаток.
Однако на практике это приводит к еще большему количеству ошибок, потому что пользователю приходится печатать больше. Он не видит, какие символы вводит, и каждый раз при вводе пароля не уверен в том, что печатает правильный пароль.
Более эффективным подходом было бы просить пользователя заполнить пароль только один раз, и включить в форму чекбокс, галочка в котором снимет маску с поля и позволит пользователю проверить правильность введенного пароля. Такой подход поможет уменьшить количество полей и избавит пользователя от лишней работы.
Стиль для логотипа
Логотип выше немного сплющен по длине. Я собираюсь изменить размер изображения. Отредактируйте код вашего плагина, чтобы он выглядел вот так:
Стиль кнопки
Завершающий элемент окна авторизация — кнопка Войти, которая все еще синего цвета. Давайте изменим это. Отредактируйте ваш код вот так:
Стиль ссылок
Весь текст на странице авторизации отображается в форме ссылок, так что вам нужно добавить именно стиль ссылок. Отредактируйте ваш код, чтобы он выглядел вот так:
Упрощаем форму регистрации
Цель любой веб-формы заключается в том, чтобы пользователь легко и правильно ее заполнил.
Если форма слишком длинная и сложная, то впечатление пользователя от сайта может быть испорчено. Ниже представлено несколько приемов, которые помогут сделать так, чтобы пользователи заполняли ваши формы легко и быстро.
Упрощаем формы входа на сайт
Задача любой формы авторизации — пустить пользователя в его аккаунт. Не смотря на такую простую задачу, одни формы авторизации решают ее лучше других. Вот вам несколько простых способов того, как помочь пользователям входить в свой аккаунт легче и быстрее.
Шаг 1. добавление собственного логотипа
Добавить ваш логотип или логотип вашего клиента на страницу авторизации и придать вашему WordPress-сайту профессиональный вид очень просто.
- Сначала создайте папку media внутри папки вашего плагина, загрузите в него ваш логотип.
- В файле плагина (или файле functions.php), добавьте следующую функцию, прикрепите ее к хуку login_enqueue_scripts:
Шаг 2. придайте стиль странице авторизации
Помимо добавления логотипа, вы также можете изменить его размер, добавить стиль для других элементов окна авторизации.
Заключение
Ваши формы регистрации и авторизации не должны усложнять жизнь пользователям, ведь заполнение форм — это то еще развлечение. Наши советы помогут вам сделать формы проще и эффективнее, так что путь ваших пользователей к содержимому сайта будет короче и приятней.
.PS от переводчиков:Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста 🙂