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

 

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

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

Шаг 1. HTML

Нам необходимо подключить скрипты, так как форма будет адаптивной и кроссбраузерной нам необходимо заранее про это позаботиться, для этого нам необходимо научить понимать старые браузеры включая Internet Explorer ниже 9-й версии которые не поддерживают новые элементы:

 

Затем нам необходимо подключить скрипт с медиа запросами. С помощью media queries задав CSS правила для размера экрана меньше 470px, мы сделаем форму адаптивной. Чтобы блок формы изменял размеры под соотношение сторон мы использовали проценты (%), а во избежание противоречий применили !important:

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

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

Создаем красивый макет контактной формы

Шаг 2. CSS

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

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

Вот и все. Готово!