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

 

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

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

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

Затем нам нужно добавить форму входа. Данная форма будет выводиться, когда пользователь будет заходить на сайт. Поэтому она имеет специальный класс “active”:

Затем добавляем форму восстановления пароля:

В нашей форме все элементы ссылки, которые указывают на другие формы, имеют класс “linkform”, а в атрибуте rel имеет ссылку на форму, которую надо выводить. Например, ссылка «Вы еще не зарегистрировались? Присоединяйтесь» имеет значение атрибута rel “register”, то есть мы хотим выводить форму регистрации при нажатии на данную ссылку.

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

Заголовки нашей формы будут иметь градиентную заливку:

Затем скрываем неактивные формы, и указываем выводить только активную:

Определяем ширину каждой формы. Они будут изменятся в зависимости от размера:

Теперь создаем колонки, которые будут располагаться одна над другой:

Затем для полей ввода будем использовать градиент в фоне и тени:

Созданный нами нижний колонтитул формы будет иметь стиль, сходный со стилем заголовка:

Далее созданные  элементы ссылок будут иметь следующие стили:

Чтобы наш контейнер скользил при переходе, используем следующие параметры:

Для кнопки отправки применяем эти стили:

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

Чтобы поле соответствовало нашей форме применяем следующий параметр:

При нажатии на кнопку необходимо чтобы формы плавно изменялись, этот параметр позволит это осуществить:

Некоторые функции для установки размеров контейнера просто изменяет значения его свойств CSS:

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

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

На главную