Лого www.SiteHere.ru

Форма обратной связи HTML — создание формы обратной связи

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

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

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

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

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

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

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

Форма обратной связи HTML — создание формы обратной связи 3.00/5 (60.00%) 4 голос(ов)

Понравилась статья - расскажи друзьям! :)

4 комментария к записи
  • Pavel

    Спасибо, очень помогла ваша статья.

     
  • Максим

    Добрый день!
    У меня 2 вопроса:
    1. никак не могу понять как убрать отступ сверху (чтобы форма располагалась с самого верха экрана)
    2. а она функционирует или нужен скрипт для отправки?

     
    • Юрий

      Здравствуйте, Максим!
      1) Это исправляется в 28-й строке. Но тогда необходимо будет изменить вывод изображения, потому что оно задано как фон для h2.
      2) Это лишь внешний вид формы. Скрипт необходимо подключать отдельно (урок по отправке данных формы здесь).

       
  • Руслан

    Спасибо за полезную статью! Для простых форм использую, для чуть посложней Google Forms или uCalc

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *