Как создать пользовательские формы регистрации и входа в WordPress

Как создавать пользовательские формы WordPress

Есть несколько плагинов, которые помогут вам создать регистрационную форму для вашего сайта WordPress. Но, основываясь на простоте использования и функциональности, мы пришли к выводу, что ProfilePress — лучший плагин для форм.

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

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

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

ProfilePress — это плагин премиум-класса, и для его использования вам необходимо приобрести лицензию, которая стоит 79 долларов США в год для одного сайта. Если вы хотите использовать его более чем для одного веб-сайта, подпишитесь на более высокие планы.

Давайте воспользуемся плагином для создания пользовательских форм WordPress.

Создание пользовательской регистрации

Установите и активируйте ProfilePress на своем веб-сайте WordPress.

Шаг 1: Чтобы убедиться, что вы можете использовать настраиваемые поля в своей форме, вам необходимо включить настраиваемые поля, выбрав ProfilePress > Addons > Custom Fields и переведя кнопку на .

Шаг 2: Теперь перейдите в ProfilePress> Формы и профили> Добавить новый> Регистрация .

Шаг 3: Далее у вас есть возможность отредактировать готовый шаблон или создать форму с нуля.

Создание формы с нуля требует знания программирования, и многие из вас, читающих эту статью, скорее всего, не знают, как кодировать. В этом случае выберите Drag & Drop Builder .

Шаг 4: На следующей странице вам нужно будет назвать форму и выбрать шаблон . Затем вы приступите к разработке формы с помощью конструктора перетаскивания.

Шаг 5: Создайте форму, используя следующие настраиваемые поля:

• Имя пользователя
• Адрес электронной почты
• подтвердить Email
• Пароль
• Подтвердить Пароль
• Надежность Пароля
• Интернет сайт
• Псевдоним
• Отображаемое имя
• Имя
• Фамилия
• Загрузить изображение профиля
• Загрузить обложку
• биография
• Выберите роль
• Пользовательский HTML
• reCAPTCHA

Шаг 6: Нажмите кнопку Live Preview , чтобы просмотреть форму перед сохранением изменений.

Шаг 7: Затем прокрутите вниз до настроек формы . Здесь вы можете изменить метки кнопок, цвет, заголовок и настройки регистрации.

Шаг 8: Когда вы будете готовы, нажмите кнопку « Сохранить изменения ». Вот и все. Ваша новая регистрационная форма готова.

ВАЖНО: Хотите добавить в форму Google reCAPTCHA, вход через социальные сети или двухфакторную аутентификацию? Плагин позволяет расширить и настроить функциональность вашего сайта. Учить больше

Далее вам нужно сделать две вещи:

1. Вам нужно будет опубликовать форму на новой странице или в посте
2. Затем сделайте новую форму регистрационной формой WordPress по умолчанию.

Мы рассмотрим оба учебника в двух разных разделах ниже. Но сначала давайте кратко рассмотрим, как создать пользовательскую форму входа в WordPress.

Создание пользовательской формы входа

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

Перейдите в ProfilePress > Формы и профили > Добавить новый > Конструктор перетаскивания. И вместо того, чтобы выбрать «Регистрация», выберите « Войти ».

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

Вот список настраиваемых полей, которые вы можете использовать в форме входа:

• Логин пользователя (имя пользователя или адрес электронной почты)
• Пароль
• Запомнить Логин
• Пользовательский HTML
• reCAPTCHA

Все остальное точно так же, как форма регистрации.

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

Как опубликовать новые формы на вашем сайте

Это просто.

Перейдите в ProfilePress > Формы и профили и выберите Войти или Регистрация . В правой части форм вы должны увидеть шорткод. Скопируйте шорткод формы, которую вы только что создали.

Затем создайте новую страницу, перейдя в « Страницы» > «Добавить новую » и вставьте шорткод. Назовите страницу и нажмите « Опубликовать ».

Ваша форма теперь доступна на вашем сайте.

Вот как выглядит регистрационная форма на нашем демо-сайте:

А вот как выглядит форма входа:

Следующий шаг — сделать новую форму формой входа или регистрации по умолчанию.

Как установить новые формы в качестве формы WordPress по умолчанию

Перейдите в ProfilePress> Настройки> Глобальные .

В опции « Страница входа » есть раскрывающееся меню. В раскрывающемся списке выберите новую страницу , на которой вы опубликовали форму входа.

И в опции « Страница регистрации » выберите новую страницу , на которой вы опубликовали регистрационную форму.

Вот и все. Всякий раз, когда кто-то пытается зарегистрироваться или войти на ваш сайт, он столкнется с новыми формами.

Как создавать пользовательские формы для WooCommerce

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

Активируйте и установите ProfilePress на свой сайт WooCommerce. Как мы уже говорили ранее, по нашему личному опыту, ProfilePress — лучший плагин, который вы можете использовать для создания форм, потому что он прост в использовании и предлагает массу функций.

Затем вам нужно включить интеграцию с WooCommerce, перейдя в ProfilePress > Addon > WooCommerce и переключив кнопку на .

Создание пользовательских форм регистрации и входа для WooCommerce

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

Когда формы будут готовы, опубликуйте их на двух отдельных страницах. Мы также рассмотрели это в разделе «Как опубликовать новые формы на вашем сайте».

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

Добавление настраиваемых полей в формы оформления заказа WooCommerce

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

Пользовательская форма входа в кассу

Хотите заменить стандартную форму входа в кассу пользовательской формой входа в кассу?

Давайте сначала создадим пользовательскую форму входа в кассу. Мы уже показали вам, как это сделать в предыдущем разделе. Пожалуйста, следуйте инструкциям в разделе «Создание пользовательской формы входа».

Готово? Теперь перейдите в ProfilePress > Настройки > Общие > WooCommerce .

Вы должны увидеть опцию под названием Checkout Login Form . Он поставляется с выпадающим меню. Выберите новую форму из выпадающего меню и сохраните настройки.

Ваши клиенты должны иметь возможность использовать новую форму для входа в систему во время оформления заказа.

Регистрационная форма для оформления заказа

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

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

Перейдите в WooCommerce > Настройки > Учетные записи и конфиденциальность и включите параметр « Разрешить клиентам создавать учетную запись во время оформления заказа ».

Затем перейдите в ProfilePress > Settings > Custom Fields > Add New . На следующей странице введите метку, ключ, описание и тип поля. Сохраните настройку.

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

Перейдите в ProfilePress> Настройки> Общие> WooCommerce> Поля регистрации Checkout , и поля, которые вы только что создали, должны появиться в виде раскрывающегося списка. Выберите их .

В следующем разделе (т. е. Обязательные поля регистрации) вы можете вставить настраиваемые поля, которые вы хотите сделать обязательными.

Пользовательские формы регистрации и входа в мою учетную запись

С ProfilePress у вас есть возможность установить пользовательскую форму регистрации и входа. Сначала вам нужно будет создать формы на вашем веб-сайте WordPress. Просто следуйте шагам, описанным в разделе «Как создавать пользовательские формы WordPress».

Затем перейдите в ProfilePress> Настройки> Общие> WooCommerce> Форма входа в мою учетную запись и выберите новую форму входа , которую вы только что создали.

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

Ниже приведен предварительный просмотр того, как это может выглядеть на странице «Моя учетная запись WooCommerce».

Вот и все, ребята. На этом мы подошли к концу этого урока.

Последние мысли

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

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