Новости
25.10.2017
Показатель отказов: от чего он зависит? Показатель отказов: от чего он зависит?

Показатель отказов – важный параметр работы сайта. Он показывает, насколько ресурс интересен и полезен для пользователей. Соответственно, чем ниже процент отказов, тем вы...

18.10.2017
Копия сайта и необходимость ее создания Копия сайта и необходимость ее создания

Несмотря на то, что сайт – это не вещь, его тоже можно потерять. Серьезные проблемы с интернет-порталом могут быть результатом:Посягательств со стороны злоумышленников. П...

10.10.2017
Грамматические ошибки на сайте: накажут ли за них поисковики? Грамматические ошибки на сайте: накажут ли за них поисковики?

Стоит ли опасаться гнева поисковика, если на страницах сайта присутствуют грамматические ошибки? Этот вопрос волнует всех, кто уже давно распоряжается собственным виртуал...

Мировые новости


09.01.2016
jQuery CSS и PHP в создании и оформлении контактных форм

jQuery CSS и PHP в создании и оформлении контактных форм

Интересные стильные решения для оформления форм обратной связи на сайте с использованием CSS и jQuery.
В заметке представлено 20 различных реализаций: пошаговые формы, формы с проверкой правильности ввода информации  «на лету», всплывающие подсказки при заполнении форм, формы с CSS3 анимированными эффектами, формы, выезжающие с различных сторон, форма в стиле Facebook, форма в стиле старой печатной машинки и другие решения. Я думаю, вы обязательно подберете подходящий вариант.

1. Плагин для создания онлайн форм «jFormer»

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

2. Пошаговая форма регистрации с использованием jQuery

jQuery форма регистрации
Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.
 

3. Пошаговая форма

jQuery табы
Заполнение формы в несколько шагов с проверкой правильности заполнения.
 

4. Контактная форма для сайта

Форма отправки данных на сайте
Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием JavaScript.
 

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма входа
Форма с проверкой правильности ввода информации.
 

8. PHP форма регистрации в стиле Facebook

Форма регистрации в стиле Facebook
Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.
 

9. jQuery контактная форма «SheepIt»

jQuery форма
Реализована возможность перед отправкой сообщения добавлять новые поля.
 

10. Контактная форма «Fancy AJAX Contact Form»

Контактная форма обратной связи
Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.
 

11. Система авторизации/регистрации на сайте

Система авторизации на сайте
Выезжающий блок авторизации/регистрации на сайте. Используемые технологии: PHP, MySQL, jQuery, CSS.
 

12. Форма отправки данных

Форма отправки данных без перезагрузки страницы на jQuery
С проверкой правильности заполнения.
 

13. Плагин jQuery «Contactable»

jQuery форма обратной связи
Для реализации выезжающей формы обратной связи для быстрой отправки сообщения. 
 

14. jQuery плагин «Formwizard»

jQuery плагин форма
Плагин для реализации пошаговых форм на сайте.
 

15. Контактная форма в стиле старой печатной машинки

jQuery плагин
 

16. Эффект свечения на jQuery

Эффект свечения
Контактная форма с эффектом неонового свечения полей.
 

17. Проверка правильности ввода данных в форму на jQuery

jQuery форма
jQuery форма с анимированными подсказками о допущенных ошибках при заполнении.
 

18. Стильная форма

Форма с проверкой ввода
Проверка правильности заполнения полей перед отправкой.
 

19. Форма обратной связи выдвигается сверху экрана

Выплывающая форма обратной связи на jQuery
Анимационный эффект выезжающей формы обратной связи сверху экрана при нажатии на кнопку «Contact Us».
 

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

Форма
Аккуратная чистая форма.