Автор

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

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

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


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

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


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

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close