Автор

16 01.2019
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

CSS и jQuery Отзывчивый Форма Информационного бюллетеня


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

Размер скачиваемого файла: 104.46 Kb.

 

ДЕМО
ИСХОДНИКИ

 

Всегда сложно заставить пользователя подписаться на новостную рассылку вашего сайта. Настоящий ключ - это то, где вы располагаете форму призыва к действию IMO. Тогда есть UI и UX самой формы. Когда пользователь решает подписаться, нам нужно убедиться, что процесс гладкий и простой.

Наш подход к этому ресурсу заключался в следующем: как создать максимально возможную форму? Наконец, мы пошли с голой стартовой структурой (большим полем ввода электронной почты и небольшим заголовком), затем мы начали экспериментировать с некоторыми тонкими CSS3-анимациями, чтобы обогатить форму, пока пользователь взаимодействует с ней.

Вот небольшая анимация, которую мы собрали вместе, чтобы показать весь процесс:

CSS и jQuery Отзывчивый Форма Информационного бюллетеня

Создание структуры

Структура HTML довольно проста: метки и поля ввода заключены в <form>, уведомления - это 3 отдельных элемента. Вы можете заметить, что мы использовали элемент <label> для заголовка. Это не семантически правильно, <label> должен описывать, о чем <input>. Поскольку заголовок находится внутри поля ввода жестко, с помощью элемента <label> мы гарантируем, что если пользователь нажимает / щелкает заголовок, ввод электронной почты также становится сфокусированным.

Пустой элемент .cd-loading используется для создания анимированной панели загрузки.

<div class="cd-form-wrapper cd-container">
<form class="cd-form">
<label class="cd-label" for="cd-email">Newsletter</label>
<input type="email" id="cd-email" class="cd-email" name="cd-email" placeholder="Enter your email address">
<input type="submit" class="cd-submit" value="Submit">
<div class="cd-loading"></div>
</form>
<div data-type="message" class="cd-response cd-response-error">Ops! Error message here</div>
<div data-type="message" class="cd-response-success"><p>Great! Success message here</p></div>
<div data-type="message" class="cd-response cd-response-notification">Hey! Notification message here</div>
</div>

 

Добавление стиля

Ниже приведены некоторые основные моменты о том, как мы создали анимацию в CSS. В основном он основан на переходах CSS3, то есть элемент .cd-email (поле ввода электронной почты) вначале принимает полный размер формы. Пока пользователь вводит адрес электронной почты, мы используем jQuery для добавления класса .is-active к форме и меняем нижнее значение для элемента .cd-email с 0 до 50%. Переход, примененный к нижнему свойству, делает движение плавным.

Мы использовали анимацию CSS3 только для элемента .cd-submit (submit button), чтобы добиться эффекта отскока. Если это слишком много, смело используйте переход.

.cd-form {
  position: relative;
}

.cd-form .cd-loading {
  /* loading bar */
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  visibility: hidden;
  transition: transform 3s;
}

.cd-form.is-submitted .cd-loading {
  visibility: visible;
  transform: scaleX(1);
}

.cd-email {
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  transition: bottom 0.3s, background-color 0.3s;
  z-index: 1;
}

.is-active .cd-email {
  bottom: 50%;
}

.cd-submit {
  top: 50%;
  /* hidden by default */
  display: none;
  transition: background-color 0.2s;
  z-index: 2;
}

.is-active .cd-submit {
  display: block;
  animation: cd-bounce-in ease-out 0.4s;
}

@keyframes cd-bounce-in {
  0% {
    top: 100%;
  }

  60% {
    top: 45%;
  }

  100% {
    top: 50%;
  }
}

 

Обработка событий

Мы используем событие keyup (), чтобы проверить, какое значение вводит пользователь в поле <input> электронной почты: если он набрал '@', за которым следует точка, мы показываем кнопку отправки, передающую класс .is-active классу <form> элемент.

$('.cd-form .cd-email').keyup(function(event){ 
var emailInput = $(this),
insertedEmail = emailInput.val(),
atPosition = insertedEmail.indexOf("@");
dotPosition = insertedEmail.lastIndexOf(".");
//check if user has inserted a "@" and a dot
if (atPosition< 1 || dotPosition<atPosition+2 ) {
//if he hasn't..
//hide the submit button
$('.cd-form').removeClass('is-active').find('.cd-loading').off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
} else {
//if he has..
//show the submit button
$('.cd-form').addClass('is-active');
}
});

Когда пользователь отправляет форму, мы добавляем класс .is-submit, чтобы показать панель загрузки, и ждем окончания перехода, чтобы показать сообщение об успехе / ошибке.

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

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

23 01.2016
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!


23 01.2016
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

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


02 01.2018
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

Буквально перед новым годом задался целью автоматизировать свой сайт, а именно сделать так чтобы с 15 декабря до 15 января работал один стиль CSS, а в остальное время другой!


29 03.2016
CSS и jQuery Отзывчивый Форма Информационного бюллетеня

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close