Добрый день. Сегодня хотел поделиться анимированной формой обратной связи. Наша разработка будет простой, всего 3 поля: поле ввода имени, почты и для короткого сообщения. Форму будем показывать при клике по зафиксированной на экране кнопке. Скачать архив.

Это интересно. Ради любопытства исследовал 18 случайных интернет-магазинов с формой обратной связи. Оказалось, что практически все формы состояли только из вышеупомянутых полей.

Пример работы формы

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

Шаг 1: верстаем

Разместите перед закрывающим тегом body.

Шаг 2: оформляем форму и готовим анимацию

Анимацию привязываем к классам, которые мы будем добавлять элементам через jQuery.

Шаг 3: добавляем jQuery

Хочется отметить, что форма будет прекрасно смотреться, если будет работать на ajax — без перезагрузки.

4 коментариев к записи

Добавить комментарий