Контактна форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта. Чтобы разнообразить форму веб-дизайнеры прибегают к различным методам стилизации и анимации, мы решили поделиться интересной задумкой, как стилизировать профильную контактную форму. Такой вариант будет отличным решением для контактной формы автора поста, что поможет сэкономить место, а также визуально оживить сайт.

 

Напомним, что мы показываем как реализовать саму анимацию, и что в результате получилось, давайте приступим к созданию данной формы.

Шаг 1. HTML

Для начала нам необходимо создать разметку, по умолчанию у нас будет общий класс contact-area в которым будет обвернута вся разметка.

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

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

Шаг 2. CSS

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

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

Шаг 3. JS

Чтобы сделать кнопку активной мы добавили немного кода js:

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

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

Читайте также: