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

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

Форма обратной связи для сайта на HTML5 + CSS3 + jQuery + php. Валидация и экранирование введенных данных, проверка правильности ввода полей формы обратной связи.

Форма обратной связи HTML5 + CSS3 + jQuery + php

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

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

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

На большинстве сайтах поля форм обратной связи, по ширине не больше 300 пикселей. Форма с максимальной шириной в 320 пикселей целиком поместится на экране любого смартфона без масштабирования.

Но все-же на некоторых макетах встречаются формы во всю ширину браузера, поля которых, выстроены в строку, включая кнопку Submit. Такая форма занимает целую секцию.

Давайте посмотрим, как можно адаптировать такую форму, под разные разрешения экранов.

Демонстрация адаптивной формы.

HTML разметка

В контейнер с классом wrapper, помещаем блок с классом newsletter, который содержит в себе заголовок h2 и форму. У формы два текстовых поля type="text" для ввода имени и е-майла пользователя и кнопка Отправить.

Читайте также:  Как медленно воспроизвести видео

Подпишитесь на наши новости

Без оформления стилей, наша форма выглядит не так, как на макете. Поэтому переходим к написанию CSS кода.

CSS код

Сперва создадим секцию во всю ширину экрана с сине-зеленым цветом фона, заранее обнулив паддинги и маржины в теге body.

.wrapper <
width: 100%;
background-color: #7eadbe;
>

Форма и заголовок имеют отступы сверху и снизу и расположены они в центре страницы. Поэтому мы создаем ещё один блог с идентификатором newsletter, относительно которого и cпозиционируем заголовок с формой.

#newsletter <
padding:20px 0;
text-align:center;
>

Сделаем заголовок более заметным, прежде всего за счет размера.

А так же выберем шрифт из семейства Google Font и цвет шрифта. Строчку ниже пропишем в самом верху файла стилей.

body <
font-family: ‘Marck Script’, sans-serif;
color: #fff;
>

Дальше стилизуем поля формы и кнопку.

input, button <
display:inline-block;
outline:none;
padding: 9px 18px;
margin-right:10px;
border: none;
>

input <
width: 30%;
background-color: #7ec4ce;
>

input[placeholder] <
color: #fff;
>

input[type="text"]::-webkit-input-placeholder <
color: #fff;
>
input[type="text"]::-moz-placeholder <
color: #fff;
>

button < padding: 9px 18px;
font-weight: bold;
text-transform: uppercase;
cursor: pointer;
color: #fff;
background-color: #7ec4ce;
>

Секция с формой готова , но при уменьшении размеров экрана, на ширине 680 пикселей поля формы схлопываются. Это значит, что форма ещё не адаптирована под другие устройства.

Техника адаптирования формы

Переключитесь в инструменты разработчика в Google Chrome, вверху сайта вы увидите текущую ширину для десктопов, начинайте уменьшать мышкой окно браузера, запомните, на какой ширине экрана, поля формы начнут ломаться. В нашем случае с формой, это будет цифра 680 пикселей.

Теперь для всех устройств с шириной от 240 пикселей до 680 пикселей, вносим изменения в CSS стили, которые регулирует ширину и отображение полей.

Читайте также:  Как подключить посудомоечную машину hansa

Свойство display: block, поставит поля формы друг под другом, это сэкономит место. Свойство margin: 10px auto, создаст вертикальные отступы между ними и выравнит их по центру.

@media screen and (min-width:240px) and (max-width:680px) <
input, button <
display: block;
margin: 10px auto;
>

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

Вот так будет выглядеть форма обратной связи при минимальной ширине экрана в 240 пикселей.

Рекомендую к просмотру очень подробный видеокурс "О создании лендинга под ключ". Никакой воды, все только по делу.

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

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать

Создаем форму обратной связи HTML

Все формы имеют схожий HTML код, но отличаются тем для чего предназначены(форма обратной связи, регистрация, комментирование). Также рекомендую обратить внимание на статьи по созданию форм, опубликованные раннее:

HTML часть формы обратной связи

Если вы изучали прошлые статьи, то в данном HTML коде ничего нового вы не увидите:

CSS часть формы обратной связи

Вывод

На этом всё. Форма обратной связи HTML готова к использованию! :).

Ссылка на основную публикацию
Файлы mdi чем открыть
Если вы не смогли открыть файл двойным нажатием на него, то вам следует скачать и установить одну из программ представленных...
Украли сумку с документами что делать
В связи с угрозой распространения на территории Российской Федерации коронавирусной инфекции приостановлен личный прием граждан в судах. Смотреть как изолируются...
Ультра исо вам необходимо иметь права администратора
Очень многие пользователи, когда им нужно сделать загрузочную флешку Windows или с дистрибутивом другой операционной системы, прибегают к использованию программы...
Файлы mdx чем открыть
MDX - это формат образов дисков, который был создан разработчиками программы DAEMON Tools. Это формат был создан в результате усовершенствования...
Adblock detector