Что нам понадобится
- Установленный плагин JetFormBuilder (бесплатный)
- Установленный плагин JetFormBuilder — User Login Action (скачать можно с сайта)
Желательно, чтобы был установлен плагин, изменяющий дефолтную страницу логина и регистрации. Тогда пользователи никогда не попадут на страницу /wp-admin, а всегда будут перенаправлены на фронтэнд страницу, сделанную вами с формой входа и регистрации. Я использую для этих целей настройки в Bricks Builder.
Что мы должны получить в итоге? Страница, на которой будет одновременно форма входа и регистрации. Пользователь заходит на страницу и видит форму входа под которой ссылка на регистрацию, нажав на которую подгружается форма регистрации без перехода на другую страницу, перезагрузки страницы. Используем функцию Rander State (Условия рендера).
Как это выглядит и работает можно посмотреть на этом сайте, страница входа.
Создаем новую форму
Переходим в JetFormBuilder -> Add new Form, нажимаем кнопку Start from scratch, ни один из предложенных шаблонов не подходит, поэтому начнем с чистой формы.
Дайте форме название и удалите все поля, созданные автоматически. Для этого кликните по трем точкам и в открывшемся меню выберите Delete (Удалить). Кнопку тоже нужно удалить. Так будет проще работать.
Теперь нужно добавить два блока Conditional Block (Блок условий). Первый блок будет для формы входа, второй для формы регистрации. Переключение между блоками будет осуществляться по кнопке триггеру Change render state.
Делаем форму входа
Здесь ничего сложного и необычного. Добавьте все необходимые поля: Логин, Пароль, Запомнить меня, Кнопка Войти. Все эти поля нужно добавить в первый Блок условий (Conditional block). Настройте поля в соответствии с их назначением.
- Добавьте текстовое поле Text field, задайте для него Field label — «Логин«, Form field name — «user_login«, Field description (не обязательно) — «Ваш Логин или Email«. Нажмите на звёздочку, чтобы сделать поле обязательным.
- Добавьте текстовое поле Text field, задайте для него Field label — «Пароль«, Form field name — «user_password«, Field description (не обязательно) — «Ваш пароль«. В разделе настроек Field -> Field type выберите Password. Нажмите на звёздочку, чтобы сделать поле обязательным.
- Добавьте поле Checkbox Field. Оставляем все пустым кроме Form field name — «user_remember«. Кликайте кнопук Manage items и добавляйте опцию. Заполните поля: Lable — «Запомнить меня«, Value — «1«. Жмем кнопку Update.
- Добавте кнопку Action button. Задайте Field label — «Войти«.
Поле Remember me не обязательное, но поможет сохранить авторизацию пользователя. Если поле не отмечено авторизация пользователя сохраняется 2 дня, если поле отмечено — 40 дней.
Совет: Добавьте заголовок в начало формы входа (внутри Conditional block). При переключении формы Пользователям будет понятнее что происходит.
Форма для входа готова. Кнопку переключения на форму регистрации добавим позже, а сейчас нужно добавить Render State (условие отображения) для Conditional block (Блока условий) входа.
Render State для блока входа
Чтобы добавить условие отображения блока выделите Conditional block и нажмите на кнопку со стрелочками, чтобы добавить новое условие. В открывшемся окне выберите поле Which function need execute? -> «Show if …» . Нажмите кнопку +Add Condition. Далее выберите поле Operator — > «Is render state«, поле Render state -> «DEFAULT.STATE«. Нажмите кнопку Update.
DEFAULT.STATE — это первоначальное условие для рендеринга (отображения) формы. Когда страница браузера загружается, то сначала рендерится форма в дефолтном состоянии. Соответственно, все поля, которые помещены в этом блоке, будут загружаться по-умолчанию при загрузке страницы. Переходим к блоку регистрации.
Делаем форму регистрации
Что касается формы регистрации, то тут возможно множество вариантов. Я, в качестве примера, покажу вам свой вариант, он не совсем традиционный. В нем присутствует всего три поля и отсутствует капча, но при этом спама нет. Возможно я напишу об этом отдельную статью.
Все поля добавляем во второй блок Conditional block.
- Добавьте текстовое поле Text Field. Это поле Логина. Задайте для него Field label -> «Логин«, Form field name -> «reg_login«, Field description -> «Только латинские буквы и цифры» (не обязательно). Теперь перейдите в раздел настроек поля Field. Включите переключатель Set input mask. Укажите в поле Input mask -> «*{3,20}«. Эта настройка не даст пользователям ввести в это поле никакие символы кроме букв и цифр, а длинна логина будет от 3 до 20 символов. Укажите в поле Mask visibility -> «Hover«. Теперь указатель маски будеть появляться только при наведении курсора на поле ввода.
- Добавьте текстовое поле Text field. Это поле для Email. Задайте для него Field label -> «Email«, Form field name -> «reg_email«, Field description -> «ВНИМАНИЕ! Указывайте действующий email. На него будет отправлен пароль.» (не обязательно). В разделе настроек Field укажите в поле Field type -> «Email«.
- Добавьте текстовое поле Text field. Это поле антиспам (мне так нравится). Задайте для него Field label -> «Антиспам«, Form field name -> «antispam«, Field description -> «Напишите правильный ответ.» В разделе настроек Field включите переключатель Set input mask. Укажите в поле Input mask -> «9«. Эта настройка позволит вводить только числа. Укажите в поле Mask visibility -> «Hover«. В разделе Validation выберите Advanced. Ниже нажмите кнопку +Add New. В открывшемся окне задайте в поле Rule type -> «Equals«, в поле Choose field -> «Custom value«, в поле Symbols -> «9«, в поле Error message -> «Ответ не верный«. Клик по кнопке Update.
- Добавьте поле «Запомнить меня» точно так же как в форме Вход (п. 3). Подсказка: его можно продублировать и перетащить в нужное место. Только не забудьте изменить Form field name -> «reg_remember«.
- Добавьте поле Hidden field. Это поле для автоматической генерации пароля. Выключаем переключатель Render in HTML. Выберите в поле Field value -> «Random string«. Я обычно снимаю галочку с Symbols и ставлю String length -> «8«.
- Добавте кнопку Action button. Задайте Field label — «Регистрация«.
Форма регистрации готова. Так она должна выглядеть в моем финальном варианте. Переходим к настройки условий отображения.
Render State для блока регистрации
Чтобы добавить условие отображения блока выделите Conditional block с формой регистрации и нажмите на кнопку со стрелочками, чтобы добавить новое условие. В открывшемся окне выберите поле Which function need execute? -> «Show if …» . Нажмите кнопку +Add Condition. Далее выберите поле Operator — > «Is render state«. В поле Render state нажмите на + . Откроется окно Register custom render state, где в поле введите Register. Нажмите кнопку Add. Теперь в поле появилось значение Render state -> «REGISTER«. Нажмите кнопку Update.
Теперь блок регистрации имеет свое собственное условие рендеринга (отображения). Если сейчас вывести форму на сайте, то пользователи увидят только форму входа, форма регистрации будет скрыта. Чтобы пользователи могли переключиться на форму регистрации нужно добавить кнопку изменения условий отобраения.
Делаем кнопку Change Render State (Изменение условий отображения)
Чтобы у пользователей была возможность переключаться между формой входа и регистрации добавьте кнопку Change Render State. Добавить кнопку нужно в Conditional block (Блок уловий) Вход под кнопкой Войти. Задайте в поле Field lable -> «Нет аккаунта? Зарегистрируйтесь.«, а в поле Switch state -> «REGISTER«.
Теперь обратное действие, переключение с формы регистрации на форму входа. Повторяем действия.
Выберите Conditional block (Блок условий) Регистрации. Под кнопкой Регистрации добавьте кнопку Change render state. Задайте в поле Field lable -> «Уже есть аккаунт? Войдите.«, а в поле Switch state -> «DEFAULT.STATE«.
Действия при отправке формы
Чтобы все заработало осталось добавить правила обработки формы входа и регистрации. Я вам показываю свой вариант обработки форм. Если с формой входа все стандартно, то после отправки формы регистрации я сразу логиню пользователя на сайте. И я не использую верификацию (проверку email). Это не значит, что так правильно, так делаю я. Вы делаете так, как вам нужно.
Перейдите на вкладку JetForm в раздел Post Submit Actions. Удалите экшн Save form record.
Нажмите кнопку +New Action.
В открывшемся окне выберите действие User Login (у вас должен быть установлен плагин). Теперь нужно разметить поля формы.
Задайте в поле User login field -> «Логин» (первое поле Логин из формы входа), в поле User password field -> «Пароль» (первое поле Логин из формы входа), в поле Remember field -> «user_remember». Оставляйте включённым Whether to use secure cookie. Включите Enable custom response errors, это сообщения об ошибках. Заполните на свой вкус.
Теперь нужно вернуться к Render state и добавить событие для экшена. Нажмите на стрелочки на только что созданном экшене User login.
В открывшемся окне переключитесь на вкладку Events match. Задайте в поле Add event -> «ON.DEFAULT.STATE«. Кликните по кнопке Update.
Нажмите кнопку +New Action, чтобы добавить правила отображения для формы регистрации. В открывшемся окне выберите действие Register User. Теперь нужно разметить поля формы.
Задайте в поле User login -> «Логин» (второе поле Логин из формы входа), в поле Email -> «Email«, в поле Password -> «random_string«, в поле Password confirm -> «random_string«, в поле User role -> «Subscriber«, включите переключатель Log In User after Register, в поле Remember me field -> «reg_remember». В разделе Messages settings заполните поля на свой вкус.
Теперь добавляем Render state для формы регистрации. Кликайте по двум стрелочкам на экшене Register User.
В открывшемся окне переключитесь на вкладку Events match. Задайте в поле Add event -> «ON.REGISTER«. Кликните по кнопке Update.
Добавить форму на сайт
На этом создание и настройки интерактивной формы входа и регистрации закончена. Осталось добавить форму на страницу сайта. Сделать это можно несколькими способами.
- С помощью шорткода. Этот способ позволяет вставить форму в любое место на сайте. Но этот способ не позволяет настроить стили отображение формы.
- С помощью виджетов. Если вы используете конструктор, например Elementor или Bricks builder, то можно использовать виджет.
Что ещё можно сделать?
Чтобы сделать форму и функции сайта более комфортными для пользователей стоит добавить правила редиректа и оповещение по email. Например, на какую страницу попадает пользователь после входа или регистрации? Не логично оставлять их на странице входа и регистрации, здесь больше не будет ничего интересного. Также не стоит забывать про форму регистрации, тем более мой вариант её исполнения, когда пользователь не задаёт пароль самостоятельно, а он генерируется ситемой автоматически. Как пользователь должен его узнать? Правильно, получить соответствующее письмо на почут (как вариант). Также не стоит забывать о вспомогательных страницах: восстановление пароля, смены пароля и тд.
Подводя итог: мне такой вариант взаимодействия с пользователями нравится больше всего, он достаточно универсальный и может использоваться практически на любом сайте. Конечно, еть куда улучшить, предлагайте свои варианты в комментариях.
