Форма обратной связи HTML — создание формы обратной связи. Формы обратной связи дизайн


Интересные страницы обратной связи

Форма обратной связи — это то, что должно быть на любом сайте. Часто от того, насколько хорошо продумана и реализована страница «Contact us», зависит напишет ли вам пользователь. Конечно, нам хочется получать хвалебные письма и желательно побольше! Сегодняшняя подборка о том, как сделать этот процесс максимально приятным для пользователя. Мы собрали интересные формы обратно связи. Надеемся, они помогут вам вдохновиться.

 

svn2ftp.com

atlason.com

golivebutton.com

fseid.de 

1minus1.com

reverenddanger.com

bio-bak.nl 

cplx.co

yodaa.com

61pixels.com

ilovecolors.com.ar

gpacheco.fr

swiths.com

lasabree.com

forefathersgroup.com

prabaharancs.com

vismaad.in

mariopetrone.info

winicio.com

artflavours.com

bornwithdesign.com

Автор подборки — Дежурка.

Смотрите также:

  • Страницы «Контакты»: вдохновляющие примеры
  • Примеры оформления страниц «About».

www.dejurka.ru

Сontact form 7 настройка внешнего вида. Изменяем дизайн форм

Популярный плагин Contact form 7 не отличается особой красотой своей стандартной формы, по этому для многих пользователей встает вопрос, как изменить внешний вид. Именно этим мы сейчас и займемся, я попытаюсь дать вам универсальный вариант, который подойдет для любого сайта.

Ранее я уже рассказывал о том как установить и настроить Contact Form 7, сейчас не будем об этом говорить, а сразу перейдем к необходимым изменениям дизайна.

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке «Внешний вид»/»Редактор». По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

  1. Вкладка Contact Form 7 для правки формы.
  2. Страницу на сайте с формой обратной связи.
  3. Редактор с открытым файлом CSS.

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

Добавляем классы к форме Contact Form 7.

Когда мы откроем форму для правки мы увидим примерно следующую картину:

Такая форма обратной связи будет выглядеть примерно так:

Скучно, не пропорционально, скажем прямо не красиво.

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

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

Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.

Определяем ID формы на странице.

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

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

В открывшемся коде ищем начало нашей формы, выглядит это так:

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

Как видим, идентификатор отличается всего несколькими цифрами. По этому для начала нужно определиться на какой странице будет расположена форма, а уж затем приступать к

yrokiwp.ru

Делаем форму обратной связи для статического сайта

20.03.2015

Вообще-то, данная форма обратной связи подойдёт не только для статических сайтов, но и прекрасно будет работать в связке с любой CMS, — будь то ресурс на движке WordPress или любой другой.

Если с сайтами на CMS всё просто — за отправку сообщений там отвечает функционал движка и настройки хостинга, на котором развёрнут сайт, то для какого-нибудь статического сайта, собранного на голом html уже придётся искать другие варианты.

Учитывая то, что последние несколько лет всё ещё в тренде сайты-одностраничники (Landing Page или продающие страницы), которые чаще всего являются статическими, вопрос о способах создания контактной формы на таких сайтах вполне актуальный.

В сегодняшнем примере, за отправку сообщений с нашего сайта будет отвечать сервис Formspree.io 

Вот код предлагаемой простейшей формы:

<form action="//formspree.io/[email protected]"> <input type="text" name="name"> <input type="email" name="_replyto"> <input type="submit" value="Send"> </form>

 А вот так она выглядит:

 Естественно, что получившийся минималистичный арт-хаус, позже мы обязательно доведём до ума, а сейчас, давайте в первую очередь рассмотрим сам код.

Обратите внимание на значение поля   form action  — здесь мы видим url сервиса и email на который будут отправляться наши сообщения. Далее идут стандартные поля формы.

Приступим непосредственно к созданию рабочего примера и разберём этот процесс поэтапно.

Для начала подредактируем внешний вид формы: добавим поле для сообщения, а также добавим и русифицируем поля имён, плейсхолдеров и кнопки:

Код получившейся формы:

<form action="//formspree.io/[email protected]"> <p><input type="text" name="Имя" placeholder="Имя" /></p> <p><input type="email" name="_replyto" placeholder="Email" /></p> <p><textarea name="Сообщение" placeholder="Ваше сообщение" rows="7"></textarea></p> <input type="submit" value="Отправить" /> </form>

Теперь давайте сделаем все три поля (Имя, email и Сообщение) обязательными для заполнения. Для этого будем использовать атрибут   required 

Получившийся код:

<form action="//formspree.io/[email protected]"> <p><input type="text" name="Имя" required placeholder="Имя" /></p> <p><input type="email" name="_replyto" required placeholder="Email" /></p> <p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p> <input type="submit" value="Отправить" /> </form>

При успешной отправке сообщения, произойдёт редирект на специальную страницу-заглушку сервиса. Мне такой расклад не нравится по двум причинам:

— во-первых, отправителя письма перекидывает на страницу стороннего ресурса;

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

Исправим эти погрешности.

Добавим скрытое поле, и в нём пропишем url страницы нашего сайта, на который произойдёт редирект после успешной отправки сообщения:

<input type="hidden" name="_next" value="/thanks.html" />

В моём примере это страница thanks.htmlПрописать можно как относительный, так и абсолютный адрес страницы.

Саму страницу thanks.html оформляем в соответствии с общим дизайном сайта.

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

<input type="hidden" name="_subject" value="Сообщение с моего сайта" />

 Вот как это будет выглядеть в нашем почтовом ящике:

Далее, можно снабдить нашу форму лёгкой защитой от спама:

<input type="text" name="_gotcha" />

 Суть защиты такова: по атрибуту  display:none  мы видим, что это поле скрытое, но в отличие от живого человека, спам боты его видят и соответственно заполняют. Перед отправкой письма адресату, сервис проверяет, заполнено это поле или нет. Если поле заполнено, то сообщение блокируется. Конечно, некоторые боты уже научились выявлять такие трюки, но от большинства спам мусора, такая защита всё ещё спасает.

Итак, в итоге у нас получился следующий код:

<form method="post" action="//formspree.io/[email protected]"> <input type="hidden" name="_next" value="/thanks.html" /> <input type="hidden" name="_subject" value="Сообщение с моего сайта" /> <input type="text" name="_gotcha" /> <p><input type="text" name="Имя" required placeholder="Имя" /></p> <p><input type="email" name="email" required placeholder="Email" /></p> <p><textarea name="Сообщение" required placeholder="Ваше сообщение" rows="7"></textarea></p> <input type="submit" value="Отправить" /> </form>

Настало время проверить нашу форму на работоспособность.

 Перед этим, в поле form action не забудьте заменить [email protected] на свой email. 

Перед тем как форма начнёт полноценно работать, нам надо активировать email, который мы прописали в коде. Для этого откройте страницу с вашей формой, заполните все поля и нажмите Отправить. Сервис выдаст следующее сообщение:

Послушно открываете свою почту, находите там письмо от сервиса и жмёте ссылку верификации. После этого сервис нам сообщает:

Всё! Адрес электронной почты подтверждён и следующее сообщение, отправленное из нашей формы обратной связи, попадёт уже непосредственно в наш ящик:

И напоследок, ещё несколько важных нюансов:

  •  Если рабочий код формы обратной связи вы перенесли на какую-либо другую страницу вашего сайта, то, несмотря на то, что email остался прежним, процедуру верификации email’а необходимо будет пройти заново. 

 

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

Естественно, с помощью многочисленных шаблонов можно придать ей стильный, модный, молодёжный вид. Например, такой:

Всё. Наша форма обратной связи готова.

sergeyyarmoluk.ru

Форма обратной связи для сайта CSS+HTML

В этом уроке я хочу показать как можно создать форму обратной связи HTML5 с эффектами анимации полей. Мы будем использовать CSS3 и HTML5 без Java скриптов. Форму обратной связи в действии вы можете посмотреть в демо примере.

Просмотр Скачать

Структура HTML Формы

Каждая строка у нас помещена в DIV контейнер, так гораздо удобнее располагать метки рядом с полем ввода. Вся форма помещена в DIV шириной 660px по центру страницы.

<div> <h2>Написать письмо !</h2> <form name="contact" method="post" action="#"> <p><span>*</span> Поля со звездочкой обязательны для заполнения</p> <div> <label for="name">Ваше Имя <span>*</span></label> <input type="text" name="name" tabindex="1" placeholder="Стив Джобс" required> </div>

<div> <label for="email">E-mail Адрес <span>*</span></label> <input type="email" name="email" tabindex="2" placeholder=" Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. " required> </div>

<div> <label for="subject">Тема <span>*</span></label> <input type="text" name="subject" tabindex="3" placeholder="Тема письма" required> </div>

<div> <label for="message">Сообщение <span>*</span></label> <textarea name="message" tabindex="4" required></textarea> </div>

<div> <input type="submit" name="submitbtn" tabindex="5" value="Отправить Сообщение"> </div> </form> </div>

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */ form .row { display: block; padding: 7px 8px; margin-bottom: 7px; } form .row:hover { background: #f1f7fa; }

form label { display: inline-block; font-size: 1.2em; font-weight: bold; width: 120px; padding: 6px 0; color: #464646; vertical-align: top; } form .req { color: #ca5354; }

form .note { font-size: 1.2em; line-height: 1.33em; font-weight: normal; padding: 2px 7px; margin-bottom: 10px; }

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */ ::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */ :-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */ ::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */ :-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

form .txt { display: inline-block; padding: 8px 9px; padding-right: 30px; width: 240px; font-family: 'Oxygen', sans-serif; font-size: 1.35em; font-weight: normal; color: #898989; }

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

cssprofi.ru

Верстка форм. Пример верстки формы обратной связи

Опубликовано 20 мая 2012

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

Демо

Содержание статьи

  1. Быстрый старт
  2. Форма обратной связи
  3. Особенности верстки элементов формы

Последнее обновление статьи — 27.08.2013.

Быстрый старт

Для создания формы используется тег <form>, имеющий обязательный атрибут action, который содержит адрес скрипта, выполняющего обработку формы. Также сюда можно задать атрибут method для обработки формы методом GET (по умолчанию) или POST и атрибут name, который впоследствии будет служить для обращения к форме посредством JS/PHP. Таким образом, наша минимальная разметка будет выглядеть так:

<form action="#" name="user-form"> ... </form>

Попробуем добавить поля для заполнения имени пользователя, электронной почты и кнопку отправки формы:

<form action="#" name="user-form"> <label for="user-name">Ваше имя</label> <input type="text" name="user-name"/> <label for="email">Email</label> <input type="email" name="email"/> <input type="submit" value="Отправить"/> </form>

Для создания строк чаще всего используются теги <div>, в более сложных формах для стилизации к ним привязывается класс:

<form action="#" name="user-form"> <div> <label for="user-name">Ваше имя</label> <input type="text" name="user-name"/> </div> <div> <label for="email">Email</label> <input type="mail"e name="email"/> </div> <div> <input type="submit" value="Отправить"/> </div> </form>

Можно использовать вариант со списком определений, ненумерованным списком или таблицей, что семантически будет тоже вполне корректно:

  1. Поля формы выстроены с помощью списка определений: <form action="#" name="user-form"> <dl> <dt> <label for="user-name">Ваше имя</label> </dt> <dd> <input type="text" name="user-name" value=""/> </dd> </dl> </form>
  2. Вариант ненумерованного списка: <form action="#" name="user-form"> <ul> <li> <label for="user-name">Ваше имя</label> </li> <li> <input type="text" name="user-name" value=""/> </li> </ul> </form>
  3. Таблица в качестве разметки: <form action="#" name="user-form"> <table> <tr> <td> <label for="user-name">Ваше имя</label> </td> <td> <input type="text" name="user-name" value=""/> </td> </tr> </table> </form>

Обратите внимание на то, что мы также задаем атрибут name для всех полей, чтобы потом получать доступ к ним с помощью сценариев. name должен быть уникален и желательно присвоить ему тоже самое значение, что и для id. Также мы явно задаем пустое значение value для того чтобы застраховаться от ошибок в браузерах.

Итак, вот что мы имеем на данный момент, пока без оформления CSS:

Простая форма

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

Сейчас наша форма выглядит довольно просто и скучно, давайте усложним ее, добавим дополнительные поля и сделаем оформление, например вот так:

Дизайн формы

Как видите, мы добавили сюда возможность выбора опции из списка с помощью тегов <select> и <option> и возможность ввода сообщения пользователя <textarea>. Для создания двух колонок используем дополнительные теги <div> с обтеканием и теперь разметка будет такой:

<section> <h3>Обратная связь</h3> <form action="#"> <div> <div> <label for="user-name">Ваше имя<sup>*</sup></label> <input type="text" name="user-name" placeholder="user" value="" required/> </div> <div> <label for="email">Email<sup>*</sup></label> <input type="email" name="email" placeholder="[email protected]" value="" required/> </div> <div> <label for="choice">Выберите опцию</label> <select name="choice"> <option value="Опция 1">Опция 1</option> <option value="Опция 2">Опция 2</option> <option value="Опция 3">Опция 3</option> </select> </div> </div> <div> <label for="message">Сообщение</label> <textarea name="message" placeholder="текст сообщения"></textarea> </div> <div> <input type="submit" name="submit-form" value="Отправить"/> </div> </form> </section>

В коде видно, что используются возможности HTML5, такие как тип поля email, атрибуты placeholder и required (они позволяют обойтись без валидации формы на JS) — их мы рассмотрим чуть позже. Для старых браузеров мы позволим частичное graceful degradation, например опустим текстовые подсказки в полях (хотя их можно реализовать с помощью jQuery и плагинов), а проверку введенных данных сделаем с помощью JS и PHP. Для поддержки IE ниже 9-ой версий CSS3 свойств подключим скрипт PIE.

Валидация формы на HTML5

Давайте добавим валидацию нашей формочке. С HTML5 реализовать это достаточно просто, поэтому рассмотрим именно этот вариант.

Например, сделаем поле обязательным для заполнения.

<input type="text" name="user-name" placeholder="Введите имя" value="" required>

Как видите, был добавлен всего лишь один атрибут required. Теперь при попытке отправки формы с пустым полем появится уведомление:

Сообщение в браузере Firefox

Внешний вид сообщения различается в браузерах и к сожалению не изменяется.

Также для поля ввода электронной почты мы можем указать тип email:

<input type="email" value="" required>

Это означает, что в данном поле подразумевается именно электронный адрес и элемент получит соответствующую валидацию. Наглядно продемонстрировано на скриншоте:

Валидация поля email

Аналогичная ситуация с полями url, date и number:

<input type="url" value="" required> Валидация поля URL

Все очень легко, без скриптов на JS/PHP.

Валидация в HTML5 работает по умолчанию, но ее возможно и отключить — добавим элементу <form> атрибут novalidate:

<form action="#" novalidate> ... </form>

Особенности верстки элементов формы

textarea

В браузерах на движке webkit можно изменять размер <textarea>, что бывает довольно удобно. Но очень часто это свойство ломает дизайн, поэтому приходится применять свойство resize: none для запрета изменения размера. Также возможно разрешить полю растягиваться только по горизонтали или вертикали.Посмотреть пример (для Safari и Chrome)

IE для <textarea> добавляет полосу прокрутки, чтобы ее убрать, необходимо прописать overflow: auto.

Подсветка полей в браузерах Chrome, Safari

При фокусе на полях в браузерах Chrome, Safari они начинают подсвечиваться. Чтобы убрать эту подсветку, нужно прописать такой CSS-код:

input, textarea { outline: none; }

Пунктирная рамка в Firefox

FF при фокусе на некоторые поля выделяет их пунктирной рамкой, что смотрится не всегда красиво. Для того чтобы их убрать, напишем такие стили:

button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: none; }

Конечно желательно заменить отсутствие пунктирной рамки другим эквивалентом — для удобства пользователя.

Убираем кнопку очистки текста и отображения пароля в IE10

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

::-ms-clear { display: none; }

Нестандартные элементы форм

Стилизация элементов форм рассмотрена в отдельных статьях: чекбоксы, радиокнопки.

Ресурсы по теме

Помощь проекту

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

Рейтинг статьи

verstaka.net

Форма обратной связи HTML — создание формы обратной связи

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 .cover { background:#CCC; width:700px; margin:auto; padding-left:60px; }   h3.contact { padding-left: 125px; font-size: 66px; color: #ff5400; height: 105px; background: url(images/contact.png) no-repeat -10px -10px; font-family: sans-serif; }   p.contact { font-size: 24px; margin-bottom: 15px; line-height: 36px; font-family: sans-serif, Arial; color: #4b4b4b; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }   #contact { margin-bottom: 0px; }   input[type="text"] { width: 400px; }   textarea { width: 600px; height: 275px; }   label { color: #ff5400; }   input, textarea { background-color: rgba(255, 255, 255, 0.4); border: 5px solid rgba(122, 192, 0, 0.15); padding: 10px; font-family: Keffeesatz, Arial; color: #4b4b4b; font-size: 24px; -webkit-border-radius: 5px; margin-bottom: 15px; margin-top: -10px; }   input:focus, textarea:focus { border: 5px solid #ff5400; background-color: rgba(255, 255, 255, 1); }   input[type="submit"] { border: none; cursor: pointer; color: #fff; font-size: 24px; background-color: #7ac000; padding: 5px 36px 8px 36px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.6); background: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #619702), color-stop(0.62, #7ac000) ); background: -moz-linear-gradient( center bottom, #619702 23%, #7ac000 62% ); }   input[type="submit"]:hover { color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.4); background-color: #ff5400; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.23, #c34000), color-stop(0.62, #ff5400) ); background: -moz-linear-gradient( center bottom, #c34000 23%, #ff5400 62% ); }   input[type="submit"]:active { top: 1px; }

www.sitehere.ru

Бесплатные кнопки и иконки, формы обратной связи и входа, меню и ещё множество стильных вещей

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

Одним словом, друзья, наслаждайтесь. :-)

Шаблон онлайн счёта

Красивый шаблон счёта денег, который можно предъявлять покупателям и клиентам.

Скачать исходники

Красивые веб кнопки для сайта

Замечательные и большие кнопки для Вашего сайта. Особенно подойдут для портфолио.

Пример ι Скачать исходники

Форма входа на сайт

Замечательная форма входа для пользователей Вашего сайта.

Пример ι Скачать исходники

Навигация

Навигация в минималистическом стиле. Подойдёт под любой дизайн сайта.

Пример ι Скачать исходники

Ещё одна форма входа

Пример ι Скачать исходники

Простая галерея

Простая и современная галерея для Вашего портфолио и для обычных сайтов.

Пример ι Скачать исходники

Слайдер миниатюр

Классный и удобный слайдер для Ваших миниатюр сайта

Пример ι Скачать исходники

Классные кнопки

Замечательные кнопки для сайта, которые можно использовать для любых ссылок.

Скачать исходники PSD

Значки с ценами для интернет магазинов

Красивые значки, которые доступны для скачивания в формате PSD

Скачать исходники

Ещё значки для интернет магазинов

Скачать исходники

Монохромные иконки социальных сетей

Замечательные серые иконки социальных сетей для Вашего проекта.

Пример ι Скачать исходники

Тёмное и выпадающее меню

Замечательное меню с выпадающим подменю для сайтов с тёмным дезайном

Пример ι Скачать исходники

Стильная форма обратной связи

Креативная контактная форма для Вашего сайта

Пример ι Скачать исходники

Стильные голубые кнопки

Скачать исходники

Меню с уведомлениями

Классное меню которое уведомляет пользователя о новых событиях, например, о новом сообщении

Пример ι Скачать исходники

Прайс — таблица

Скачать исходники

Красивые и простые уведомления

Скачать исходники

Кнопка Скачать для сайта

Скачать исходники

Стильные хлебные крошки для сайта

Скачать исходники

Кнопки Скачать

Скачать исходники

beloweb.ru