В этой статье мы рассмотрим пошаговую регистрацию с использованием jQuery .
Если регистрация на вашем сайте предусматривает заполнение нескольких десятков полей, очень не рационально размещать их на одной странице. Ведь пользователь существо очень ленивое и не захочет заполнять, увидев все эти поля.
Альтернативный вариант - разбить регистрацию на несколько шагов. Это порождает сразу много позитивных откликов - ведь начиная выполнять шаги у пользователя чаще всего появляется желание закончить их выполнение.
Так же логично разбивать регистрацию на логические блоки - контактная информация, адрес, личные данные и так далее.
Для пошаговой регистрации совсем не зачем создавать несколько форм и отдельно посылать данные на сервер. Гораздо удобнее все поместить в одну форму, но каждый шаг показывать пользователю лишь определенную часть формы. Именно такой и будет логика в нашем примере.
По мимо логики стоит учитывать, что вначале видна только ссылка "Вперед" /"Следующий шаг" , а на последнем шаге её не видно, но видно "Назад" и "Регистрация" .
Рассмотрим сам пример:
Страница
Шаг 1
Логин:
E-mail:
Пароль:
Шаг 2
Имя:
Фамилия:
Возраст:
Шаг 3
Страна:
Город:
Улица:
body { margin:0; } /* Общие стили закончилась */ form { width:30%; margin:0 auto; } form div.step { display:none; } form div.step p.step{ text-align:center; font-size:28px; } form div.step p{ } form div.step p input{ float:right; } a.back { display:none; } form input { display:none; } a { color:#006600; text-decoration:none; } form p.talign{ text-align:center; }
Скрипт отвечающий за переключение шагов поместим в js/steps_registration.js , не забываем так же подключить библиотеку jQuery :
$(document).ready(function() { // Ждём загрузки страницы var steps = $("form").children(".step"); // находим все шаги формы $(steps).show(); // показываем первый шаг var current_step = 0; // задаем текущий шаг $("a.next").click(function(){ // Событие клика на ссылку "Следующий шаг" if (current_step == steps.length-2) { // проверяем, будет ли следующий шаг последним $(this).hide(); // скрываем ссылку "Следующий шаг" $("form input").show(); // показываем кнопку "Регистрация" } $("a.back").show(); // показываем ссылку "Назад" current_step++; // увеличиваем счетчик текущего слайда changeStep(current_step); // меняем шаг }); $("a.back").click(function(){ // Событие клика на маленькое изображение if (current_step == 1) { // проверяем, будет ли предыдущий шаг первым $(this).hide(); // скрываем ссылку "Назад" } $("form input").hide(); // скрываем кнопку "Регистрация" $("a.next").show(); // показываем ссылку "Следующий шаг" current_step--; // уменьшаем счетчик текущего слайда changeStep(current_step);// меняем шаг }); function changeStep(i) { // функция смены шага $(steps).hide(); // скрываем все шаги $(steps[i]).show(); // показываем текущий } });
Код php-отправки писать сюда не будем, так как это не совсем относится к этому уроку. Стоит лишь отметить, что письмо отправяется на адрес указанный в первом шаге формы. В любом случае вы можете скачать файлы демонстрации и посмотреть сами.
Адаптивное c функциями форм входа и регистрации, с возможностью динамичного переключения, без перезагрузки страницы. После появления окна, пользователь может легко переключаться из одной в другую, и при необходимости, выбрать опцию изменения пароля.
Сегодня мы рассмотрим как всё это можно реализовать с помощью связки небольшого, но очень функционального плагина jQuery и новых стандартов CSS3.
Данный метод будет полезен, если вы захотите сделать так, чтобы формы входа и регистрации были доступны для пользователей на каждой странице вашего сайта. При входе на сайт или регистрации, пользователи не будут перенаправлены на другую страницу, и смогут выполнять все необходимые действия «не отходя от кассы», всё на одной странице.
Оформление внешнего вида всплывающих форм реализовано с помощью CSS3, общий вес плагина совсем не большой, отклик и загрузка модального окна, происходит практически без задержек.
Стопроцентно адаптивный макет, высота и ширина модального окна с формами, автоматически устанавливаются в соответствии с размерами экранов пользовательских устройств.
Пример посмотрели, теперь давайте, разберём в деталях все основные компоненты модального окна и форм, для того что бы научиться использовать их у себя на сайте.
Работа всплывающего окна с формами входа и регистрации, выстроена на популярной библиотеке javascript, исполняемом плагине jQuey и сформированных стилях CSS. Все эти инструменты необходимо подключить к вашему сайту. Последнюю актуальную версию библиотеки jQuey можно подключить напрямую с Google, сам файл плагина main.js и готовый набор сформированных стилей style.css найдёте в архиве.
Javascript прописываем перед закрывающим тегом , стили CSS можно скопировать и добавить в файл стилей.css вашего сайта.
HTML Структура:
Базовый контейнер модальных окон на затемнённом фоне и встроенные формы с элементами управления, размещаем в теле страницы. Для большего понимания, разграничил сектора и добавил комментарии. Все элементы конструкции, прочно связаны с CSS через определённые классы, так что изменить дизайн форм в соответствии с общим дизайном ваших сайтов, не составит особого труда.
| < div class = "cd-user-modal" > < div class = "cd-user-modal-container" > < ul class = "cd-switcher" > < li>< a href= "#0" > Вход < li>< a href= "#0" > Регистрация < div id= "cd-login" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "signin-email" > E- mail < input class = id= "signin-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signin-password" > Пароль < input class = "full-width has-padding has-border" id= "signin-password" type= "text" placeholder= "Пароль" > < a href= "#0" class = "hide-password" > Скрыть < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input type= "checkbox" id= "remember-me" checked> < label for = "remember-me" > Запомнить меня < p class = "fieldset" > < input class = "full-width" type= "submit" value= "Войти" > < p class = "cd-form-bottom-message" >< a href= "#0" > Забыли свой пароль? < div id= "cd-signup" > < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-username" for = "signup-username" > Имя пользователя < input class = "full-width has-padding has-border" id= "signup-username" type= "text" placeholder= "Имя пользователя" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-email" for = "signup-email" > E- mail < input class = "full-width has-padding has-border" id= "signup-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < label class = "image-replace cd-password" for = "signup-password" > Пароль < input class = "full-width has-padding has-border" id= "signup-password" type= "text" placeholder= "Пароль" > < a href= "#0" class = "hide-password" > Скрыть < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input type= "checkbox" id= "accept-terms" > < label for = "accept-terms" > Я согласен с < a href= "#0" > Условиями < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Создать аккаунт" > < div id= "cd-reset-password" > < p class = "cd-form-message" > Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль. < form class = "cd-form" > < p class = "fieldset" > < label class = "image-replace cd-email" for = "reset-email" > E- mail < input class = "full-width has-padding has-border" id= "reset-email" type= "email" placeholder= "E-mail" > < span class = "cd-error-message" > Здесь сообщение об ошибке! < p class = "fieldset" > < input class = "full-width has-padding" type= "submit" value= "Восстановить пароль" > < p class = "cd-form-bottom-message" >< a href= "#0" > Вернуться к входу < a href= "#0" class = "cd-close-form" > Закрыть |
E-mail Здесь сообщение об ошибке!
Пароль Здесь сообщение об ошибке!
Запомнить меня
Имя пользователя Здесь сообщение об ошибке!
E-mail Здесь сообщение об ошибке!
Пароль Здесь сообщение об ошибке!
Я согласен с Условиями
Забыли пароль? Пожалуйста, введите адрес своей электронной почты. Вы получите ссылку, чтобы создать новый пароль.
E-mail Здесь сообщение об ошибке!
Закрыть
Базовый шаблон и элементы управления форм, автор выполнил в популярном, плоском стиле (Flat), с явным упором на минимализм. Ничего лишнего, в меру прозрачный фон затемнения, лёгкие для восприятия цвета, хорошо подобранный шрифт и иконки, для обозначения полей ввода. С помощью свойств CSS, вы легко сможете видоизменить любой элемент форм.
| .cd-user-modal { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; background : rgba (52 , 54 , 66 , 0.9 ) ; z-index : 3 ; overflow-y : auto ; cursor : pointer ; visibility : hidden ; opacity : 0 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0.3s ; -moz-transition: opacity 0.3s 0 , visibility 0 0.3s ; transition : opacity 0.3s 0 , visibility 0 0.3s ; } .cd-user-modal .is-visible { visibility : visible ; opacity : 1 ; -webkit-transition: opacity 0.3s 0 , visibility 0 0 ; -moz-transition: opacity 0.3s 0 , visibility 0 0 ; transition : opacity 0.3s 0 , visibility 0 0 ; } .cd-user-modal .is-visible .cd-user-modal-container { -webkit-transform: translateY(0 ) ; -moz-transform: translateY(0 ) ; -ms-transform: translateY(0 ) ; -o-transform: translateY(0 ) ; transform : translateY(0 ) ; } .cd-user-modal-container { position : relative ; width : 90% ; max-width : 600px ; background : #FFF ; margin : 3em auto 4em ; cursor : auto ; border-radius : 0.25em ; -webkit-transform: translateY(-30px ) ; -moz-transform: translateY(-30px ) ; -ms-transform: translateY(-30px ) ; -o-transform: translateY(-30px ) ; transform : translateY(-30px ) ; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property : transform; -webkit-transition-duration: 0.3s ; -moz-transition-duration: 0.3s ; transition-duration : 0.3s ; } .cd-user-modal-container .cd-switcher : after { content : "" ; display : table ; clear : both ; } .cd-user-modal-container .cd-switcher li { width : 50% ; float : left ; text-align : center ; } .cd-user-modal-container .cd-switcher li: first-child a { border-radius : .25em 0 0 0 ; } .cd-user-modal-container .cd-switcher li: last-child a { border-radius : 0 .25em 0 0 ; } .cd-user-modal-container .cd-switcher a { display : block ; width : 100% ; height : 50px ; line-height : 50px ; background : #d2d8d8 ; color : #809191 ; } .cd-user-modal-container .cd-switcher a.selected { background : #FFF ; color : #505260 ; } @media only screen and (min-width : 600px ) { .cd-user-modal-container { margin : 4em auto ; } .cd-user-modal-container .cd-switcher a { height : 70px ; line-height : 70px ; } } .cd-form { padding : 1.4em ; } .cd-form .fieldset { position : relative ; margin : 1.4em 0 ; } .cd-form .fieldset : first-child { margin-top : 0 ; } .cd-form .fieldset : last-child { margin-bottom : 0 ; } .cd-form label { font-size : 14px ; font-size : 0.875rem ; } .cd-form label.image-replace { /* заменить текст с иконой */ display : inline-block ; position : absolute ; left : 15px ; top : 50% ; bottom : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; -o-transform: translateY(-50% ) ; transform : translateY(-50% ) ; height : 20px ; width : 20px ; overflow : hidden ; text-indent : 100% ; white-space : nowrap ; color : transparent ; text-shadow : none ; background-repeat : no-repeat ; background-position : 50% 0 ; } /* Иконки полей ввода */ .cd-form label.cd-username { background-image : url ("../img/cd-icon-username.svg" ) ; } .cd-form label.cd-email { background-image : url ("../img/cd-icon-email.svg" ) ; } .cd-form label.cd-password { background-image : url ("../img/cd-icon-password.svg" ) ; } .cd-form input { margin : 0 ; padding : 0 ; border-radius : 0.25em ; } .cd-form input.full-width { width : 100% ; } .cd-form input.has-padding { padding : 12px 20px 12px 50px ; } .cd-form input.has-border { border : 1px solid #d2d8d8 ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none ; -o-appearance: none ; appearance: none ; } .cd-form input.has-border : focus { border-color : #343642 ; box-shadow : 0 0 5px rgba (52 , 54 , 66 , 0.1 ) ; outline : none ; } .cd-form input.has-error { border : 1px solid #d76666 ; } .cd-form input[ type= password] { /* пространство для кнопки Скрыть */ padding-right : 65px ; } .cd-form input[ type= submit] { padding : 16px 0 ; cursor : pointer ; background : #2f889a ; color : #FFF ; font-weight : bold ; border : none ; -webkit-appearance: none ; -moz-appearance: none ; -ms-appearance: none ; -o-appearance: none ; appearance: none ; } .no-touch .cd-form input[ type= submit] : hover , .no-touch .cd-form input[ type= submit] : focus { background : #3599ae ; outline : none ; } .cd-form .hide-password { display : inline-block ; position : absolute ; right : 0 ; top : 0 ; padding : 6px 15px ; border-left : 1px solid #d2d8d8 ; top : 50% ; bottom : auto ; -webkit-transform: translateY(-50% ) ; -moz-transform: translateY(-50% ) ; -ms-transform: translateY(-50% ) ; -o-transform: translateY(-50% ) ; transform : translateY(-50% ) ; font-size : 14px ; font-size : 0.875rem ; color : #343642 ; } .cd-form .cd-error-message { display : inline-block ; position : absolute ; left : -5px ; bottom : -35px ; background : rgba (215 , 102 , 102 , 0.9 ) ; padding : .8em ; z-index : 2 ; color : #FFF ; font-size : 13px ; font-size : 0.8125rem ; border-radius : 0.25em ; /* предотвращения кликов и прикосновения */ pointer-events : none ; visibility : hidden ; opacity : 0 ; -webkit-transition: opacity 0.2s 0 , visibility 0 0.2s ; -moz-transition: opacity 0.2s 0 , visibility 0 0.2s ; transition : opacity 0.2s 0 , visibility 0 0.2s ; } .cd-form .cd-error-message :: after { /* уголок сообщения об ошибке */ content : "" ; position : absolute ; left : 22px ; bottom : 100% ; height : 0 ; width : 0 ; border-left : 8px solid transparent ; border-right : 8px solid transparent ; border-bottom : 8px solid rgba (215 , 102 , 102 , 0.9 ) ; } .cd-form .cd-error-message .is-visible { opacity : 1 ; visibility : visible ; -webkit-transition: opacity 0.2s 0 , visibility 0 0 ; -moz-transition: opacity 0.2s 0 , visibility 0 0 ; transition : opacity 0.2s 0 , visibility 0 0 ; } @media only screen and (min-width : 600px ) { .cd-form { padding : 2em ; } .cd-form .fieldset { margin : 2em 0 ; } .cd-form .fieldset : first-child { margin-top : 0 ; } .cd-form .fieldset : last-child { margin-bottom : 0 ; } .cd-form input.has-padding { padding : 16px 20px 16px 50px ; } .cd-form input[ type= submit] { padding : 16px 0 ; } } .cd-form-message { padding : 1.4em 1.4em 0 ; font-size : 14px ; font-size : 0.875rem ; line-height : 1.4 ; text-align : center ; } @media only screen and (min-width : 600px ) { .cd-form-message { padding : 2em 2em 0 ; } } .cd-form-bottom-message { position : absolute ; width : 100% ; left : 0 ; bottom : -30px ; text-align : center ; font-size : 14px ; font-size : 0.875rem ; } .cd-form-bottom-message a { color : #FFF ; text-decoration : underline ; } .cd-close-form { /* стиль X кнопки вверху справа */ display : block ; position : absolute ; width : 40px ; height : 40px ; right : 0 ; top : -40px ; background : url ("../img/cd-icon-close.svg" ) no-repeat center center ; text-indent : 100% ; white-space : nowrap ; overflow : hidden ; } @media only screen and (min-width : 1170px ) { .cd-close-form { display : none ; } } #cd-login , #cd-signup , #cd-reset-password { display : none ; } #cd-login .is-selected , #cd-signup .is-selected , #cd-reset-password .is-selected { display : block ; } |
Cd-user-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 54, 66, 0.9); z-index: 3; overflow-y: auto; cursor: pointer; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s 0, visibility 0 0.3s; -moz-transition: opacity 0.3s 0, visibility 0 0.3s; transition: opacity 0.3s 0, visibility 0 0.3s; } .cd-user-modal.is-visible { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s 0, visibility 0 0; -moz-transition: opacity 0.3s 0, visibility 0 0; transition: opacity 0.3s 0, visibility 0 0; } .cd-user-modal.is-visible .cd-user-modal-container { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-user-modal-container { position: relative; width: 90%; max-width: 600px; background: #FFF; margin: 3em auto 4em; cursor: auto; border-radius: 0.25em; -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .cd-user-modal-container .cd-switcher:after { content: ""; display: table; clear: both; } .cd-user-modal-container .cd-switcher li { width: 50%; float: left; text-align: center; } .cd-user-modal-container .cd-switcher li:first-child a { border-radius: .25em 0 0 0; } .cd-user-modal-container .cd-switcher li:last-child a { border-radius: 0 .25em 0 0; } .cd-user-modal-container .cd-switcher a { display: block; width: 100%; height: 50px; line-height: 50px; background: #d2d8d8; color: #809191; } .cd-user-modal-container .cd-switcher a.selected { background: #FFF; color: #505260; } @media only screen and (min-width: 600px) { .cd-user-modal-container { margin: 4em auto; } .cd-user-modal-container .cd-switcher a { height: 70px; line-height: 70px; } } .cd-form { padding: 1.4em; } .cd-form .fieldset { position: relative; margin: 1.4em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form label { font-size: 14px; font-size: 0.875rem; } .cd-form label.image-replace { /* заменить текст с иконой */ display: inline-block; position: absolute; left: 15px; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 20px; width: 20px; overflow: hidden; text-indent: 100%; white-space: nowrap; color: transparent; text-shadow: none; background-repeat: no-repeat; background-position: 50% 0; } /* Иконки полей ввода */ .cd-form label.cd-username { background-image: url("../img/cd-icon-username.svg"); } .cd-form label.cd-email { background-image: url("../img/cd-icon-email.svg"); } .cd-form label.cd-password { background-image: url("../img/cd-icon-password.svg"); } .cd-form input { margin: 0; padding: 0; border-radius: 0.25em; } .cd-form input.full-width { width: 100%; } .cd-form input.has-padding { padding: 12px 20px 12px 50px; } .cd-form input.has-border { border: 1px solid #d2d8d8; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .cd-form input.has-border:focus { border-color: #343642; box-shadow: 0 0 5px rgba(52, 54, 66, 0.1); outline: none; } .cd-form input.has-error { border: 1px solid #d76666; } .cd-form input { /* пространство для кнопки Скрыть */ padding-right: 65px; } .cd-form input { padding: 16px 0; cursor: pointer; background: #2f889a; color: #FFF; font-weight: bold; border: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } .no-touch .cd-form input:hover, .no-touch .cd-form input:focus { background: #3599ae; outline: none; } .cd-form .hide-password { display: inline-block; position: absolute; right: 0; top: 0; padding: 6px 15px; border-left: 1px solid #d2d8d8; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; font-size: 0.875rem; color: #343642; } .cd-form .cd-error-message { display: inline-block; position: absolute; left: -5px; bottom: -35px; background: rgba(215, 102, 102, 0.9); padding: .8em; z-index: 2; color: #FFF; font-size: 13px; font-size: 0.8125rem; border-radius: 0.25em; /* предотвращения кликов и прикосновения */ pointer-events: none; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s 0, visibility 0 0.2s; -moz-transition: opacity 0.2s 0, visibility 0 0.2s; transition: opacity 0.2s 0, visibility 0 0.2s; } .cd-form .cd-error-message::after { /* уголок сообщения об ошибке */ content: ""; position: absolute; left: 22px; bottom: 100%; height: 0; width: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid rgba(215, 102, 102, 0.9); } .cd-form .cd-error-message.is-visible { opacity: 1; visibility: visible; -webkit-transition: opacity 0.2s 0, visibility 0 0; -moz-transition: opacity 0.2s 0, visibility 0 0; transition: opacity 0.2s 0, visibility 0 0; } @media only screen and (min-width: 600px) { .cd-form { padding: 2em; } .cd-form .fieldset { margin: 2em 0; } .cd-form .fieldset:first-child { margin-top: 0; } .cd-form .fieldset:last-child { margin-bottom: 0; } .cd-form input.has-padding { padding: 16px 20px 16px 50px; } .cd-form input { padding: 16px 0; } } .cd-form-message { padding: 1.4em 1.4em 0; font-size: 14px; font-size: 0.875rem; line-height: 1.4; text-align: center; } @media only screen and (min-width: 600px) { .cd-form-message { padding: 2em 2em 0; } } .cd-form-bottom-message { position: absolute; width: 100%; left: 0; bottom: -30px; text-align: center; font-size: 14px; font-size: 0.875rem; } .cd-form-bottom-message a { color: #FFF; text-decoration: underline; } .cd-close-form { /* стиль X кнопки вверху справа */ display: block; position: absolute; width: 40px; height: 40px; right: 0; top: -40px; background: url("../img/cd-icon-close.svg") no-repeat center center; text-indent: 100%; white-space: nowrap; overflow: hidden; } @media only screen and (min-width: 1170px) { .cd-close-form { display: none; } } #cd-login, #cd-signup, #cd-reset-password { display: none; } #cd-login.is-selected, #cd-signup.is-selected, #cd-reset-password.is-selected { display: block; }
В эффекте перехода появления, добавлена задержка, чтобы добиться плавного исчезновения модального окна при закрытии.
Примечание:. Размер шрифта всех полей ввода установлен по умолчанию 16px. Это предотвращает автоматическое масштабирование, которое происходит при просмотре на мобильных устройствах.
Авторская, буржуинская версия плагина находится . Там же, вы сможете скачать оригинал.
Русскую версию, можете забрать с моего Яндекс.Диска, все необходимые файлы, бережно упакованы в один архив, перед этим не забудьте посмотреть, полностью адаптированный, живой пример работы этого замечательного плагина jQuery:
С Уважением, Андрей
