Автор

10 05.2017
Форма обратной связи на jQuery

Форма обратной связи на jQuery


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

 

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

 

Существуют некоторые дополнительные функции (например, плавающие метки), которые можно легко удалить, если вы хотите, чтобы форма была проще. Мы включили все стандартные элементы формы, такие как переключатели, флажки, выбор, сообщения об ошибках и т. Д.

 

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

Наличие HTML-структуры стандартной формы в кармане - это уже способ сэкономить время, не так ли? Элемент form содержит 2 элемента fieldset, которые разбивают форму на два основных блока. Каждый элемент формы (который обычно содержит <label> + <input>) заключен в простой div. Это позволяет нам легко контролировать интервал, устанавливая поля только один раз.

Вот структура html. Вы можете заметить некоторые конкретные классы, об этом мы поговорим в разделе CSS.

<form class="cd-form floating-labels">
<fieldset>
<legend>Account Info</legend>

<div class="error-message">
<p>Please enter a valid email address</p>
</div>

<div class="icon">
<label class="cd-label" for="cd-name">Name</label>
<input class="user" type="text" name="cd-name" id="cd-name" required>
</div>

<!-- ... -->
</fieldset>

<fieldset>
<legend>Project Info</legend>

<div>
<h4>Budget</h4>

<p class="cd-select icon">
<select class="budget">
<option value="0">Select Budget</option>
<option value="1">&lt; $5000</option>
<option value="2">$5000 - $10000</option>
<option value="3">&gt; $10000</option>
</select>
</p>
</div>

<div>
<h4>Project type</h4>

<ul class="cd-form-list">
<li>
<input type="radio" name="radio-button" id="cd-radio-1" checked>
<label for="cd-radio-1">Choice 1</label>
</li>

<li>
<input type="radio" name="radio-button" id="cd-radio-2">
<label for="cd-radio-2">Choice 2</label>
</li>

<li>
<input type="radio" name="radio-button" id="cd-radio-3">
<label for="cd-radio-3">Choice 3</label>
</li>
</ul>
</div>

<!-- ... -->

<div class="icon">
<label class="cd-label" for="cd-textarea">Project description</label>
<textarea class="message" name="cd-textarea" id="cd-textarea" required></textarea>
</div>

<div>
<input type="submit" value="Send Message">
</div>
</fieldset>
</form>

 

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

CSS делится на 3 части: 1) Форма, 2) Пользовательские значки и 3) Плавающие метки. Таким образом, если вам нужна основная часть кодирования, вы можете просто взять 1) форму.

Как добавить собственный значок: вам нужно добавить класс к элементу input / select / textarea, который вы хотите стилизовать с помощью значка (то есть класс .user к первому элементу ввода). Во-вторых, вам нужно добавить класс .icon к его родительскому элементу. Наконец, в CSS вы определите пользовательский фоновый рисунок. Если требуется ввести поле ввода, вам нужно определить 2 фоновых изображения, как в примере ниже:

.cd-form .icon input, .cd-form .icon select, .cd-form .icon textarea {
 	padding-left: 54px !important;
}
.cd-form .user {
 	background: url("../img/cd-icon-user.svg") no-repeat 16px center;
}
.cd-form [required].user {
 	background: url("../img/cd-icon-user.svg") no-repeat 16px center, 
 				url("../img/cd-required.svg") no-repeat top right;
}

Плавающие метки активируются с помощью класса .floating-labels, добавленного в элемент .cd-form. Если вы никогда не слышали об этом шаблоне UX, он был впервые представлен Мэттом Д. Смитом. Он также объяснил, как он придумал эту идею в этой интересной статье. На мой взгляд, это отличное решение для UX: оно позволяет сначала использовать метки в качестве заполнителей, а затем превращать их в анимированные метки после того, как пользователь начнет печатать. Таким образом, пользователь всегда имеет представление о том, какая информация уже была предоставлена.

Вы увидите в CSS класс .floating-labels из класса .js, который добавляется Modernizr, когда javascript поддерживается браузером. Таким образом, если javascript отключен браузером / пользователем, форма по-прежнему доступна со стандартными метками (класс .floating-labels не производит никакого эффекта).

Чтобы стилизовать обязательное поле, мы воспользовались требуемым булевским атрибутом HTML5. Пока ошибка - это просто класс, добавленный к элементу формы.

.cd-form [required] {
 	background: url("../img/cd-required.svg") no-repeat top right;
}
 
.cd-form .error {
	border-color: #e94b35 !important;
}

Еще один интересный момент - это то, как мы создали пользовательские кнопки радио и проверки. Вы найдете исходный код довольно простым. Короче говоря, мы установили position: absolute; и opacity: 0; для радио и проверки входных элементов, и заменил их на пользовательские :: before и :: after псевдоэлементы label.

 

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

Javascript был использован для активации плавающих меток. Если в DOM существует элемент .floating-labels, мы инициализируем функцию floatLabels (): он захватывает поля ввода формы (предназначенные для следующих элементов .cd-label) и привязывает функцию checkVal () к keyup () Событие, чтобы определить, начал ли пользователь вводить текст.

if( $('.floating-labels').length > 0 ) floatLabels();
 
function floatLabels() {
	var inputFields = $('.floating-labels .cd-label').next();
	
	inputFields.each(function(){
		var singleInput = $(this);
		
		singleInput.keyup(function(){
			checkVal(singleInput);	
		});
	});
}

Функция checkVal () проверяет входное значение: если не пусто, он добавляет класс float к предыдущему элементу .cd-label, в противном случае он удаляет его.

 

Вот и всё!


vk.com/club.ssdru

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


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

19 04.2013
Форма обратной связи на jQuery

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


20 07.2013
Форма обратной связи на jQuery

Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.


19 04.2013
Форма обратной связи на jQuery

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


13 03.2013
Форма обратной связи на jQuery

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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close