Форма зворотнього зв`язку html - створення форми зворотного зв`язку

Відео: Створення AJAX форм зворотного зв`язку на сайті

Форма зворотнього зв`язку на HTML5 та CSS3

Також як і форма реєстрацію, практично на будь-якому сайті присутня форма зворотного зв`язку. Вона призначена для зв`язку з адміністрацією сайту, щоб будь-який користувач зміг звернутися до адміністрації і висловити своє прохання / скаргу / пропозицію. І в цьому уроці ми створимо каркас такої форми і додамо вид за допомогою CSS3.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

Створюємо форму зворотного зв`язку HTML

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

Відео: Частина 1. Форма зворотнього зв`язку для сайту: PHP-обробник

Перевірка заповнення форми на HTML5 + CSS3
Перевірка заповнення форм на HTML5 + стилі
Форма реєстрації та входу на CSS3 + HTML5
Призначені для користувача стилі для форми на чистому CSS без javascript

HTML частина форми зворотного зв`язку

Якщо ви вивчали минулі статті, то в даному HTML коді нічого нового ви не побачите:

1234567891011121314151617

lt;div class="Cover"gt;lt;h2 class="Contact"gt; Напишіть меніlt;/h2gt;lt;form id="Contactform"gt;lt;p class="Contact"gt; lt;label for="Name"gt; Ім`яlt;/labelgt; lt;/pgt;lt;input id="Name" name="Name" placeholder="Ваше ім`я" required="" tabindex="1" type="Text"gt;lt;p class="Contact"gt; lt;label for="Email"gt; Emaillt;/labelgt; lt;/pgt;lt;input id="Email" name="Email" placeholder="[email protected]" required="" tabindex="2" type="Text"gt;lt;p class="Contact"gt; lt;label for="Subject"gt; Темаlt;/labelgt; lt;/pgt;lt;input id="Subject" name="Subject" placeholder="Тема повідомлення" required="" tabindex="2" type="Text"gt;lt;p class="Contact"gt; lt;label for="Comment"gt; Повідомленняlt;/labelgt; lt;/pgt;lt;textarea name="Comment" id="Comment" tabindex="4"gt; lt;/textareagt; lt;brgt;lt;input name="Submit" id="Submit" tabindex="5" value="Відправити" type="Submit"gt;lt;/formgt;lt;/divgt;

CSS частина форми зворотного зв`язку

А зараз стилі:

Відео: Універсальний PHP скрипт зворотного зв`язку для звичайних сайтів і Landing Pages (uniMail)

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107

.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.jpg) 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-}