Створення багатоетапної форми реєстрації в WordPress

13

Від автора: дуже часто стандартні форми авторизації, реєстрації і скидання пароля виділяються із загального дизайну. Раніше, коли WordPress б движком для блогів, це було нормально. З тих пір WordPress еволюціонував в систему управління контентом, і вимоги до форм авторизації, реєстрації і скидання пароля стали тільки рости. У цьому уроці ми дізнаємося, як створити багатоетапну форму реєстрації в WordPress за допомогою мого плагіна ProfilePress.

Нижче представлений дизайн покрокової форми реєстрації, який ми створимо до кінця цього уроку.

Якщо хочете відразу ж перестрибнути на демо, то можете подивитися, як воно працює сайту під управлінням WordPress. Без зайвих міркувань, почнемо.

Розбираємо код

У демо вище у вкладці SOCIAL PROFILES є поля для Facebook, Twitter і Google+, яких за замовчуванням WordPress немає. І як наслідок, нам необхідно самим створити контактні методи, які будуть зберігати введену в ці поля інформацію в профілі користувача.

Як додати контактні поля через файл functions.php

У мережі є безліч уроків, як додати поля з контактною інформацією в профіль користувача. Якщо коротко, то в цих уроках пояснюється наступне – якщо файл теми functions.php вставити код нижче, то в профіль користувача додається інформація по полях Facebook, Twitter і Google+.

function add_contact_methods( $user_contact ){
/* додаємо контактні методи користувача */
$user_contact[‘facebook’] = __(‘Facebook Username’);
$user_contact[‘twitter’] = __(‘Twitter Username’);
$user_contact[‘google’] = __(‘Google+ Profile’);
return $user_contact;
}
add_filter(‘user_contactmethods’, ‘add_contact_methods’);

Як додати контактні поля через плагін ProfilePress

В плагіні ProfilePress поля з контактною інформацією додаються через форму з парою ключ/значення (скріншот нижче). Форма розташована на сторінці налаштувань контактної інформації, де key це унікальне ім’я для внутрішнього використання в WordPress для розпізнання поля, а label – опис, який відображається користувачу.

Щоб побачити нові поля Facebook, Twitter і Google+ перейдіть у свій профіль.

Створення багатоетапної форми реєстрації в WordPress

Після додавання в профіль WordPress полів Facebook, Twitter і Google+ необхідно створити покрокову форму за допомогою функції melange.

Створюємо форму багатоетапну

Я не буду зупинятися і пояснювати, як покрокова форма створюється в HTML, CSS і JS. Можете подивитися исходники. Замість цього ми дізнаємося, як конвертувати дану форму в форму реєстрації WordPress.

Функція melange в моєму плагіні вміє конвертувати майже будь-які форми авторизації, реєстрації і скидання пароля, вона навіть може редагувати шаблон форми профілю так, щоб з’явився робочий еквівалент в WordPress (дана опція доступна тільки в преміум версії плагіна).

Після встановлення плагіну клікніть, як показано на скріншоті нижче на пункт Melange, а потім Add New для запуску процесу створення.

Створення багатоетапної форми реєстрації в WordPress

Вам буде показана форма. Заповніть поля, як сказано нижче. Назва форми введіть в поле Name. Назвемо її Stride Multistep Signup Form. Скопіюйте HTML-код нижче в розділ Melange Design в TinyMCE редактор і замініть инпуты їх шорткодами, як показано нижче:

  • Account Setup
  • Social Profiles
  • Personal Details

Create your account

This is step 1

[reg-username placeholder=»Username»]
[reg-email placeholder=»Email»]
[reg-password placeholder=»Password»]

Social Profiles

Your presence on social networks

[reg-cpf key=»twitter» type=»text» placeholder=»Twitter»]
[reg-cpf key=»facebook» type=»text» placeholder=»Facebook»]
[reg-cpf key=»google» type=»text» placeholder=»Google Plus»]

Personal Details

We will never sell it

[reg-first-name placeholder=»First Name»]
[reg-last-name placeholder=»Last Name»]
[reg-nickname placeholder=»Nickname»]
[reg-bio placeholder=»Biography»]
[reg-submit class=»submit action-button» value=»Submit»]

Ми могли б і залишити звичайні поля у формі, не замінюючи їх на шорткоди плагіна ProfilePress. Але з шорткодами ми точно будемо знати, що значення атрибута name правильне. Якщо ви самі можете задати атрибут name для полів, ви можете використовувати шорткоди (наприклад, для поля ім’я користувача атрибут зі значенням reg_username).

В плагіні ProfilePress немає текстових полів для вставки PHP коду, значить JavaScript код піде в поле Melange Design відразу ж після HTML-коду форми. Зверніть увагу: атрибут novalidate додано в тег form, щоб не з’являлася дратує помилка «An invalid form control with name= is not focusable» blink браузерах, які захищають форму відправлення (Chrome і Opera).

//jQuery
(function ($) {
var current_fs, next_fs, previous_fs; //набір полів
var left, opacity, scale; //властивості які будемо анімувати
var animating; //прапор щоб запобігти множинні натискання
$(«.next»).click(function () {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//активуємо наступний етап на прогрес барі з допомогою індексу next_fs
$(«#progressbar li»).eq($(«fieldset»).index(next_fs)).addClass(«active»);
//показуємо наступний набір полів
next_fs.show();
//ховаємо поточний набір стилів зі стилями
current_fs.animate({
opacity: 0
}, {
step: function (now, mx) {
//так як прозорість current_fs зменшується до 0 — зберігається в «now»
//1. зменшуємо current_fs до 80%
scale = 1 — (1 — now) * 0.2;
//2. Витягуємо праворуч (50%) next_fs
left = (now * 50) + «%»;
//3. Підвищуємо прозорість next_fs до 1 т. к. поля виїжджають
opacity = 1 — now;
current_fs.css({
‘transform’: ‘scale(‘ + scale + ‘)’
});
next_fs.css({
‘left’: left,
‘непрозорість’: opacity
});
},
duration: 800,
complete: function () {
current_fs.hide();
animating = false;
},
//ця функція анімації написана мною
easing: ‘easeInOutBack’
});
});
$(«.previous»).click(function () {
if (animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//вимикаємо на прогрес барі поточний етап
$(«#progressbar li»).eq($(«fieldset»).index(current_fs)).removeClass(«active»);
//показуємо попередні поля
previous_fs.show();
//ховаємо поточні поля зі стилями
current_fs.animate({
opacity: 0
}, {
step: function (now, mx) {
// так як прозорість current_fs зменшується до 0 — зберігається в «now»
//1. збільшуємо previous_fs з 80% до 100%
scale = 0.8 + (1 — now) * 0.2;
//2. прибираємо current_fs вправо(50%) – з 0%
left = ((1 — now) * 50) + «%»;
//3. підвищуємо прозорість previous_fs до одного, т. к. він виїжджає
opacity = 1 — now;
current_fs.css({
‘left’: left
});
previous_fs.css({
‘transform’: ‘scale(‘ + scale + ‘)’,
‘непрозорість’: opacity
});
},
duration: 800,
complete: function () {
current_fs.hide();
animating = false;
},
//функція анімації написана мною
easing: ‘easeInOutBack’
});
});
})(jQuery);

Пояснення коду: спочатку ми підключили відкладений виклик jQuery Easing library. Це було зроблено для того, щоб додати ефект анімації в форму відразу після JavaScript коду, який обробляє перехід між етапами. Вставте CSS-код в поле CSS Stylesheet.

Створення багатоетапної форми реєстрації в WordPress

Зверніть увагу: помилки форм реєстрації під керуванням плагіна ProfilePress загортаються у DIV з класом profilepress-reg-status, сам клас можна знайти в стилях. У полі Registration Success вбийте код нижче для налаштування повідомлення про успішну реєстрацію користувача.

Створення багатоетапної форми реєстрації в WordPress

Збережіть форму і вийдіть назад в каталог melange.

Створення багатоетапної форми реєстрації в WordPress

Скопіюйте згенерований шорткод і вставте його на вашу WordPress сторінку. Збережіть сторінку і можете подивитися покрокову реєстрацію в дії.

Висновок

У цьому уроці ми навчилися створювати багатоступеневу форму реєстрації в WordPress за допомогою мого плагіна ProfilePress. Плагін бере на себе серверну PHP валідацію, аутентифікацію і авторизацію форм авторизації, реєстрації і front-end форми редагування профілю. Якщо у вас виникли запитання, пропозиції або ви хочете мені допомогти, пишіть про це в коментарях.