Автор

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

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

Если вы решили использовать защищенный протокол на страницах своего сайта, вы молодец. Используя HTTPS-соединение, вы заботитесь о конфиденциальности данных своих пользователей.


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

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


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

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


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

Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией CSS и поддержкой устройств с отключенным javascript.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close