
Ноябрь 13, 2014 Запись была обновлена
Форма обратной связи HTML — создание формы обратной связи

Также как и форма регистрации, практически на любом сайте присутствует форма обратной связи. Она предназначена для связи с администрацией сайта, чтобы любой пользователь смог обратиться к администрации и высказать свою просьбу/жалобу/предложение. И в этом уроке мы создадим каркас такой формы и придадим вид с помощью CSS3.
Реальный пример можно увидеть здесь:
Посмотреть примерСкачать
Создаем форму обратной связи HTML
Все формы имеют схожий HTML код, но отличаются тем для чего предназначены(форма обратной связи, регистрация, комментирование). Также рекомендую обратить внимание на статьи по созданию форм, опубликованные раннее:
- Проверка заполнения формы на HTML5 + CSS3
- Проверка заполнения форм на HTML5+стили
- Форма регистрации и входа на CSS3+HTML5
- Пользовательские стили для формы на чистом CSS без Javascript
HTML часть формы обратной связи
Если вы изучали прошлые статьи, то в данном HTML коде ничего нового вы не увидите:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="cover"> <h2 class="contact">Напишите мне</h2> <form id="contactform"> <p class="contact"><label for="name">Имя</label></p> <input id="name" name="name" placeholder="Ваше имя" required="" tabindex="1" type="text"> <p class="contact"><label for="email">Email</label></p> <input id="email" name="email" placeholder="example@sitehere.ru" required="" tabindex="2" type="text"> <p class="contact"><label for="Subject">Тема</label></p> <input id="subject" name="subject" placeholder="Тема сообщения" required="" tabindex="2" type="text"> <p class="contact"><label for="comment">Сообщение</label></p> <textarea name="comment" id="comment" tabindex="4"></textarea> <br> <input name="submit" id="submit" tabindex="5" value="Отправить" type="submit"> </form> </div> |
CSS часть формы обратной связи
А сейчас стили:
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; } h2.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; } |
Вывод
На этом всё. Форма обратной связи HTML готова к использованию! :).
Успехов!
Источник: www.freshdesignweb.com
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Спасибо, очень помогла ваша статья.
Добрый день!
У меня 2 вопроса:
1. никак не могу понять как убрать отступ сверху (чтобы форма располагалась с самого верха экрана)
2. а она функционирует или нужен скрипт для отправки?
Здравствуйте, Максим!
1) Это исправляется в 28-й строке. Но тогда необходимо будет изменить вывод изображения, потому что оно задано как фон для h2.
2) Это лишь внешний вид формы. Скрипт необходимо подключать отдельно (урок по отправке данных формы здесь).
Спасибо за полезную статью! Для простых форм использую, для чуть посложней Google Forms или uCalc
Google Формы лично мне не подошли, да и не понимаю как там что-то чуть сложней обычной обратной связи можно сделать, код свой там тем более использовать нельзя, оформление нормально не сделаешь какое хочешь и расположение элементов. Сейчас в итоге остановился на stepform.io/ru где вообще мышкой только кидай блоки в нужное место, форма буквально на глазах нарастает))
Спасибо Юрий! очень хорошо и доходчиво расписано. Я думаю многим будет очень полезно и смогут использовать у себя на сайтах. У меня более сложные формы, поэтому пользуюсь сервисом Formdesigner, есть интеграции с почтовыми сервисами, crm и др.
Здравствуйте, спасибо за хорошую форму!
Все никак не могу понять как сделать чтобы при нажатии кнопки, все отправлялось на почту?
Денис, добрый день!
Спасибо. Это лишь внешний вид формы: HTML+CSS. А вам нужен еще обработчик, он чаще всего на PHP пишется. Есть уже полуготовые варианты. Вот например — PHPMailer. А для того, чтобы форма отправилась без перезагрузки страницы самый быстрый и простой способ использовать Ajax запрос к обработчику (php скрипту).
Как эту форму сделать адаптивной?