Все мы привыкли видеть контактные на отдельных, специально созданных страницах, для обратной связи с пользователями. Как правило, на таких страницах помимо контактных форм, размещают много другой информации для взаимодействия и коммуникации. Механизм отлаженный, проверенный годами и отлично работающий. Но в некоторых случаях возникает необходимость вывести отдельную контактную форму в виде всплывающего окна, не перенаправляя пользователей на другие страницы.
В свое время мы рассматривали, работающее на jQuery. Сегодня же, хочу познакомить вас, с интересным решением создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта.
На мой взгляд, замечательный образец средств взаимодействия с пользователями.
Пример посмотрели. Теперь, давайте разложим эту форму на составляющие, от создания общей структуры в Html, до формирования внешнего вида макета с помощью CSS.
HTML-код формы
Ничего сверхъестественного, максимально простой каркас обычной контактной формы, помещенный в блочный элемент div
с определенным идентификатором и классом, для дальнейшего формирования внешнего вида формы в css
и взаимодействия с небольшим javascript, который нам понадобится для активации и закрытия всплывающей формы.
|
Закрыть
Отправить нам сообщение
|
Закрыть
Отправить нам сообщение
Пожалуйста, введите своё сообщение здесь..
Так же, нам необходимо создать слой затемнения общего фона, при активации всплывающей формы. Выполнить эту задачу можно по разному, но мы мудрить особо не будем и добавим еще один div
, присвоив ему идентификатор: id="fade" и класс: class="black-overlay" . Поместить его можете рядом с формой, чтобы долго не искать при необходимости.
Обратная связь
Вы наверное заметили, что кнопка закрытия, вписана в блок контактной формы, непосредственно перед заголовком и это логично, а где же ей еще быть, кнопка должна появляться и исчезать вместе с формой. Внешний вид и позицию кнопки закрытия мы в дальнейшем сформируем в CSS
Вот и все, давайте теперь, посмотрим на полный Html-код страницы содержащей всплывающую форму обратной связи:
|
Всплывающая контактная форма
Обратная связь
Закрыть
Отправить нам сообщение
Пожалуйста, введите своё сообщение здесь..
|
Всплывающая контактная форма
Обратная связь
Закрыть
Отправить нам сообщение
Пожалуйста, введите своё сообщение здесь..
Прежде чем перейдем к самому интересному, к формированию стилей нашей контактной формы с помощью CSS, немного отступлю. Самые внимательные, наверняка заметили, что кнопки открытия и закрытия формы реализованы в виде ссылок с «глушилкой» href="javascript:void(0)" . Плохо этот или хорошо, точного ответа для себя я так и не нашел, использую этот способ по привычке. Хотя для элементов, на которых событие onclick обрабатывается скриптом, думается мне, логичнее и правильнее, использовать , или . При желании, вы всегда можете так и поступить с кнопками из данного примера.
Магия CSS
Данная форма обратной связи выполнена в оригинальном стиле, с некоторыми дизайнерскими жудожествами, так что вариант верстки с использованием исключительно современных стандартов CSS3, довольно проблематичен.
Основой всей конструкции, фоном контактной формы, будет служить незамысловатый рисунок конверта, не оставляющий у пользователя, никаких сомнений на счет того, что перед ним открылось)))) В кнопке закрытия, мы так же используем парочку небольших картинок, чтобы она видоизменялась при наведении. Все эти картинки, вы легко сможете поменять на свои, а кнопки вообще, если поймаете кураж, можете забабахать на CSS3.
А вот, непосредственно и сам CSS-код, нашей замечательной формы, с небольшими комментариями, для ясности и дабы избежать лишних вопросов:
| /* устанавливаем слой затемнения фона,
** опрделяем позиции, цвет и интенсивность затемнения */
.black-overlay{
display
:
none
;
position
:
absolute
;
top
:
0%
;
left
:
0%
;
width
:
100%
;
height
:
100%
;
background-color
:
black
;
z-index
:
1001
;
-moz-opacity:
0.7
;
opacity
:
.70;
filter
:
alpha(opacity=
70
)
;
}
/* устанавливаем рисунок основы,
** опрделяем размеры и положение на экране */
.envelope
{
display
:
none
;
position
:
absolute
;
width
:
600px
;
height
:
340px
;
background
:
url
(images/envelope.png
)
center
no-repeat
;
z-index
:
1002
;
position
:
relative
;
margin
:
10%
auto
;
}
/* формируем кнопку закрытия,
** размеры, положение на форме */
.close-btn
{
width
:
31px
;
height
:
31px
;
display
:
block
;
cursor
:
pointer
;
/* для случая применения отличных от тегов */
background
:
url
(images/close.png
)
;
text-indent
:
-4999px
;
}
/* кнопка закрытия при наведении */
.close-btn
:
hover
{
background
:
url
(images/close-hover.png
)
;
}
/* оформляем заголовок формы */
.title
{
font-family
:
"Trebuchet MS"
,
Tahoma,
Arial,
sans-serif
;
font-size
:
22px
;
font-weight
:
normal
;
font-weight
:
200
;
text-align
:
left
;
position
:
absolute
;
top
:
30px
;
left
:
40px
;
/* можно заменить на другую картинку
** или border-bottom: бла бла бла */
background
:
url
(images/divider.png
)
no-repeat
bottom
;
color
:
#545151
;
height
:
40px
;
width
:
400px
;
margin
:
15px
0
;
text-shadow
:
1px
1px
#FFF
;
/* тень текста */
}
/* стили для полей ввода */
input[
type=
text
]
{
font-family
:
"Trebuchet MS"
,
Tahoma,
Arial,
sans-serif
;
font-size
:
13px
;
background-color
:
rgb
(255
,
255
,
255
)
;
color
:
#787474
;
padding-left
:
10px
;
width
:
208px
;
height
:
33px
;
border-color
:
rgb
(182
,
182
,
182
)
;
border-width
:
1px
;
border-style
:
solid
;
-moz-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.2
)
;
-webkit-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.2
)
;
box-shadow
:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.2
)
;
-ms-filter:
;
filter
:
progid:
DXImageTransform.Microsoft
.dropshadow(OffX =
0
,
OffY =
1
,
Color =
#80ffffff
,
Positive =
true)
;
border-radius
:
3px
;
-moz-border-radius:
3px
;
}
/* меняем оформление полей ввода при фокусе */
input[
type=
text
]
:
focus
,
.your-message
:
focus
{
outline
:
none
;
background-color
:
rgb
(255
,
255
,
255
)
;
border-color
:
rgb
(126
,
139
,
153
)
;
border
:
1px
solid
;
-moz-box-shadow:
0px
0px
5px
0px
rgba
(168
,
178
,
188
,
0.75
)
,
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.4
)
;
-webkit-box-shadow:
0px
0px
5px
0px
rgba
(168
,
178
,
188
,
0.75
)
,
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.4
)
;
box-shadow
:
0px
0px
5px
0px
rgba
(168
,
178
,
188
,
0.75
)
,
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.4
)
;
-ms-filter:
"progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"
;
filter
:
progid:
DXImageTransform.Microsoft
.Glow(Color=
#bfa8b2bc
,
Strength=
5
)
progid:
DXImageTransform.Microsoft
.dropshadow(OffX =
0
,
OffY =
1
,
Color =
#80ffffff
,
Positive =
true)
;
}
.your-message
{
font-family
:
"Trebuchet MS"
,
Tahoma,
Arial,
sans-serif
;
font-size
:
13px
;
background-color
:
rgb
(255
,
255
,
255
)
;
color
:
#787474
;
padding
:
10px
0
0
10px
;
width
:
448px
;
height
:
93px
;
border-color
:
rgb
(182
,
182
,
182
)
;
border-width
:
1px
;
border-style
:
solid
;
-moz-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.2
)
;
-webkit-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.2
)
;
box-shadow
:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
2px
0px
rgba
(0
,
0
,
0
,
0.2
)
;
-ms-filter:
"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"
;
filter
:
progid:
DXImageTransform.Microsoft
.dropshadow(OffX =
0
,
OffY =
1
,
Color =
#80ffffff
,
Positive =
true)
;
position
:
absolute
;
top
:
150px
;
left
:
40px
;
border-radius
:
3px
;
-moz-border-radius:
3px
;
}
.your-name
{
position
:
absolute
;
top
:
100px
;
left
:
40px
;
}
.email-address
{
position
:
absolute
;
top
:
100px
;
left
:
280px
;
}
/* оформляем кнопку отправки */
.send-message
{
background-color
:
#929FAB
;
background-image
:
-moz-linear-gradient(49%
0%
-90deg
,
rgb
(171
,
181
,
191
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
-webkit-gradient(linear,
49%
0%
,
49%
109%
,
color-stop(0
,
rgb
(171
,
181
,
191
)
)
,
color-stop(1
,
rgb
(124
,
138
,
152
)
)
)
;
background-image
:
-webkit-linear-gradient(-90deg
,
rgb
(171
,
181
,
191
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
-o-linear-gradient(-90deg
,
rgb
(171
,
181
,
191
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
-ms-linear-gradient(-90deg
,
rgb
(171
,
181
,
191
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
linear-gradient(-90deg
,
rgb
(171
,
181
,
191
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
width
:
130px
;
height
:
35px
;
-moz-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
3px
rgb
(97
,
108
,
122
)
;
-webkit-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
3px
rgb
(97
,
108
,
122
)
;
box-shadow
:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
3px
rgb
(97
,
108
,
122
)
;
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"
;
filter
:
progid:
DXImageTransform.Microsoft
.gradient(startColorstr=
#ffabb5bf
,
endColorstr=
#ff7c8a98
,
GradientType=
0
)
progid:
DXImageTransform.Microsoft
.dropshadow(OffX =
0
,
OffY =
1
,
Color =
#80ffffff
,
Positive =
true)
;
color
:
#fff
;
font-family
:
"Trebuchet MS"
,
Tahoma,
Arial,
sans-serif
;
font-size
:
13px
;
text-shadow
:
0
1px
0
#21405D
;
font-weight
:
bold
;
border
:
none
;
cursor
:
pointer
;
border-radius
:
3px
;
-moz-border-radius:
3px
;
position
:
absolute
;
top
:
269px
;
right
:
100px
;
}
/* оформляем кнопку отправки при наведении */
.send-message
:
hover
{
background-color
:
#A0ACB9
;
background-image
:
-moz-linear-gradient(49%
0%
-90deg
,
rgb
(170
,
181
,
195
)
0%
,
rgb
(144
,
157
,
169
)
100%
)
;
background-image
:
-webkit-gradient(linear,
49%
0%
,
49%
109%
,
color-stop(0
,
rgb
(170
,
181
,
195
)
)
,
color-stop(1
,
rgb
(144
,
157
,
169
)
)
)
;
background-image
:
-webkit-linear-gradient(-90deg
,
rgb
(170
,
181
,
195
)
0%
,
rgb
(144
,
157
,
169
)
100%
)
;
background-image
:
-o-linear-gradient(-90deg
,
rgb
(170
,
181
,
195
)
0%
,
rgb
(144
,
157
,
169
)
100%
)
;
background-image
:
-ms-linear-gradient(-90deg
,
rgb
(170
,
181
,
195
)
0%
,
rgb
(144
,
157
,
169
)
100%
)
;
background-image
:
linear-gradient(-90deg
,
rgb
(170
,
181
,
195
)
0%
,
rgb
(144
,
157
,
169
)
100%
)
;
width
:
130px
;
height
:
35px
;
-moz-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
3px
rgb
(97
,
108
,
122
)
;
-webkit-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
3px
rgb
(97
,
108
,
122
)
;
box-shadow
:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
3px
rgb
(97
,
108
,
122
)
;
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"
;
filter
:
progid:
DXImageTransform.Microsoft
.gradient(startColorstr=
#ffaab5c3
,
endColorstr=
#ff909da9
,
GradientType=
0
)
progid:
DXImageTransform.Microsoft
.dropshadow(OffX =
0
,
OffY =
1
,
Color =
#80ffffff
,
Positive =
true)
;
}
/* оформляем кнопку отправки в режиме активной */
.send-message
:
active
{
background-image
:
-moz-linear-gradient(49%
0%
-90deg
,
rgb
(142
,
154
,
167
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
-webkit-gradient(linear,
49%
0%
,
49%
109%
,
color-stop(0
,
rgb
(142
,
154
,
167
)
)
,
color-stop(1
,
rgb
(124
,
138
,
152
)
)
)
;
background-image
:
-webkit-linear-gradient(-90deg
,
rgb
(142
,
154
,
167
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
-o-linear-gradient(-90deg
,
rgb
(142
,
154
,
167
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
-ms-linear-gradient(-90deg
,
rgb
(142
,
154
,
167
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
background-image
:
linear-gradient(-90deg
,
rgb
(142
,
154
,
167
)
0%
,
rgb
(124
,
138
,
152
)
100%
)
;
width
:
130px
;
height
:
35px
;
-moz-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
5px
rgb
(65
,
73
,
85
)
;
-webkit-box-shadow:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
5px
rgb
(65
,
73
,
85
)
;
box-shadow
:
0px
1px
0px
0px
rgba
(255
,
255
,
255
,
0.5
)
,
inset
0px
1px
5px
rgb
(65
,
73
,
85
)
;
-ms-filter:
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"
;
filter
:
progid:
DXImageTransform.Microsoft
.gradient(startColorstr=
#ff8e9aa7
,
endColorstr=
#ff7c8a98
,
GradientType=
0
)
progid:
DXImageTransform.Microsoft
.dropshadow(OffX =
0
,
OffY =
1
,
Color =
#80ffffff
,
Positive =
true)
;
}
|
/* устанавливаем слой затемнения фона,
** опрделяем позиции, цвет и интенсивность затемнения */
.black-overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.7;
opacity:.70;
filter: alpha(opacity=70);
}
/* устанавливаем рисунок основы,
** опрделяем размеры и положение на экране */
.envelope {
display: none;
position: absolute;
width: 600px;
height: 340px;
background: url(images/envelope.png) center no-repeat;
z-index:1002;
position: relative;
margin: 10% auto;
}
/* формируем кнопку закрытия,
** размеры, положение на форме */
.close-btn {
width: 31px;
height: 31px;
display: block;
cursor: pointer;/* для случая применения отличных от тегов */
background: url(images/close.png);
text-indent: -4999px;
}
/* кнопка закрытия при наведении */
.close-btn:hover{
background: url(images/close-hover.png);
}
/* оформляем заголовок формы */
.title {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size:22px;
font-weight: normal;
font-weight: 200;
text-align:left;
position: absolute;
top: 30px;
left: 40px;
/* можно заменить на другую картинку
** или border-bottom: бла бла бла */
background: url(images/divider.png) no-repeat bottom;
color: #545151;
height: 40px;
width: 400px;
margin: 15px 0;
text-shadow: 1px 1px #FFF;/* тень текста */
}
/* стили для полей ввода */
input {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding-left: 10px;
width:208px;
height:33px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
border-radius: 3px;
-moz-border-radius: 3px;
}
/* меняем оформление полей ввода при фокусе */
input:focus, .your-message:focus {
outline: none;
background-color:rgb(255,255,255);
border-color:rgb(126,139,153);
border: 1px solid;
-moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4);
-ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
.your-message {
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
background-color:rgb(255,255,255);
color: #787474;
padding: 10px 0 0 10px;
width:448px;
height:93px;
border-color:rgb(182,182,182);
border-width:1px;
border-style:solid;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2);
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
position: absolute;
top: 150px;
left: 40px;
border-radius: 3px;
-moz-border-radius: 3px;
} .your-name {
position: absolute;
top: 100px;
left: 40px;
} .email-address {
position: absolute;
top: 100px;
left: 280px;
}
/* оформляем кнопку отправки */
.send-message {
background-color: #929FAB;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
color: #fff;
font-family: "Trebuchet MS",Tahoma,Arial,sans-serif;
font-size: 13px;
text-shadow: 0 1px 0 #21405D;
font-weight: bold;
border: none;
cursor: pointer;
border-radius: 3px;
-moz-border-radius: 3px;
position: absolute;
top: 269px;
right: 100px;
}
/* оформляем кнопку отправки при наведении */
.send-message:hover{
background-color: #A0ACB9;
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169)));
background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
/* оформляем кнопку отправки в режиме активной */
.send-message:active{
background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152)));
background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%);
width:130px;
height:35px;
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0)
progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true);
}
Код получился довольно объемным, ну что поделаешь, не могу отказать себе в удовольствии, там где это допустимо и оправдано конечно, поэкспериментировать и применить на практике новые свойства и функции стандарта CSS3. Благодаря чему, появляются интересные и свежие решения по верстке. Не без ошибок и сомнений, но это реальная движуха и одновременно полезная практика.
Все! Только что, мы вместе с вами, создали отличный инструмент взаимодействия с пользователями, всплывающую контактную форму для сайта. Вам остается только посмотреть живой пример, при желании скачать исходники и прикрутить к форме свой php-обработчик.
В архиве с исходниками, вы найдете все необходимое и еще парочку вариантов фоновых изображений для формы.
Обновление от 21.05.2017
В архив с исходниками добавил папку «mail», в которой вы найдёте простейший php-обработчик для формы и файл конфигураций, для настройки. Обработчик привязан к данной форме, небольшая инструкция и комментарии прописанные непосредственно в коде файлов обработчика, надеюсь, помогут разобраться что, куда и зачем.
С Уважением, Андрей
Здравствуйте. В этом уроке мы будем делать полноценную форму обратной связи, причем появляться она будет в модальном окне по нажатию на кнопку на странице. Данный урок я делал сам, с нуля, воспользовавшись только фреймфорком jQuery и одним небольшим JavaScript"ом. Урок очень интересный, поэтому прошу не проходить мимо! Ниже Вы можете просмотреть демонстрацию получившейся у меня формы, а также скачать необходимые файлы для работы:
Шаг 1.
Общее описание и работа формы обратной связи:
Сначала я Вам расскажу, какие нам файлы будут нужны и, собственно, зачем они нужны:
- images
- папка, где хранятся все изображения нашей формы;
- index.html
- главный, "индексный" файл, в котором будет располагаться кнопка для вызова формы обратной связи;
- contact.html
- файл, в котором находится сама форма. Именно этот файл будет подключаться в модальное окошечко;
- send.php
- файл-обработчик, занимающийся отправкой письма;
- jquery.js
- основной фреймворк jQuery;
- style.css
- файл с каскадными таблицами стилей для нашей формы.
Итак, идем дальше и по порядку... Работа формы будет заключаться следующим образом: Пользователь заходит на страницу, на которой находится кнопка для вызова модального окна, нажмет ее, затем появляется форма, в ней посетитель вводит все данные и текст сообщения и отправляет, потом его перекидывает на страницу с сообщением об удачной или неудачной отправке письма. Вот и все, а теперь начнем верстать нашу форму...
Шаг 2.
Кнопка для вызова формы.
Так, чтобы, наше модальное окно с формой появлялось, нужно его как-то заставить делать это. Для этого нам всего лишь нужно разместить на странице обыкновенную кнопку. Код такой кнопки приведен ниже, вместе с примененными к ней стилями:
Написать сообщение администратору
Шаг 3.
Сама форма + настройки к ней
Теперь давайте разберемся, где же все-таки будет находиться наша форма обратной связи. А находиться она будет в файле contact.html
, который уже расположен в исходниках урока. Данная форма совсем небольшая, поэтому ее код я расположу ниже:
Отправка Сообщения Администрации:
*Имя:
|
*E-mail:
|
Тема:
|
*Сообщение:
|
|
|
Как Вы можете наблюдать, идя по коду даже невооруженным глазом видно, что для более качественного отображения формы я использовал табличную верстку. Это мне очень пригодилось, чтобы сравнять все поля формы.
Шаг 4.
Обработчик, отвечающий за отправку писем
Здесь я быстро расскажу Вам о главном обработчике по отправке писем. Его код я не буду здесь приводить, т. к. он есть в исходниках. Скачайте и посмотрите его содержание. Если Вы знаете php где-то на среднем уровне, примерно как я, то вы без труда сможете самостоятельно разобрать весь код этого обработчика. Если все готово, то идем дальше...
Шаг 5.
"Прикрутка" основного фреймворка jQuery
Теперь, как и в любом уроке по jQuery мы должны "прикрутить" основной фреймворк jQuery. Для этого вернемся немного назад, туда, где располагается наша кнопка, и между тегами и вставим следующий код:
Шаг 6.
Стилизация формы
Как Вы можете видеть, стили к нашей форме вынесены отдельно, в файл style.css
, поскольку эти стили занимают слишком много места. Нам всего лишь надо привязать нижеприведенный код к нашему индексному файлу:
Шаг 7.
jQuery-доработки
Теперь для полноценной работы модального окна формы мы должны вставить следующий jQuery-код:
$(function() {
$("a").overlay(function() {
var wrap = this.getContent().find("div.wrap");
if (wrap.is(":empty")) {
wrap.load(this.getTrigger().attr("href"));
}
});
});
Заключение.
Вот и готова наша интересная форма обратной связи. Путь был долгим и сложным, поэтому, если кто-нибудь что-нибудь не понял, выслушаю ваши вопросы в комментариях к данному уроку. А у меня на этом все, до новых встреч, друзья!
С искренним уважением Ваш jQuery - проводник - М. К.
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .
Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.
UPDATE
:По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)
UPDATE2
: Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится
Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.
Форма обратной связи php — структура
Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)
После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:
- image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
- js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
- index.html — индексный файл нашего одностраничника
- index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)
Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php
Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)
Исходный код вызова формы и обработчика
Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.
| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
Заказать обратный звонок
Заказажите обратный звонок
|
Заказать обратный звонок
Заказажите обратный звонок
Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений
| 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
|
С вами свяжутся
|
С вами свяжутся
body
{
background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat;
}
setTimeout("location.replace("/index.html")", 3000);
/*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
Проверка работоспособности формы
Вызываем окно и вводим данные для тестовой проверки нашей формы
Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи
У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
Всем привет. Засыпали вопросами о том, как реализовать форму, которая появляется в модальном окне после нажатия на кнопку, а после отправки, выводилось бы сообщение об успехе или провале.
Думаю, полно уже подобного в интернете, но раз народ просит, то решил сделать. Тем более, подобный функционал должен присутствовать почти на каждом лендинге для реализации кнопки обратного звонка. И действительно, сейчас все больше появляется результатов АБ — тестирования, которые говорят, что открытые формы работают хуже, чем те, что спрятаны в модальное окно и открываются после нажатия на кнопу.
Некоторые утверждают, что это из-за того, что у людей потихоньку «вырабатывается иммунитет» и открытая форма — это агрессивная продажа. Якобы сейчас настало то время, когда пользователь при виде открытой формы считает, что ему пытаются что-то «впарить». Не совсем согласен с этой теорией, но зерно истины — присутствует. Может быть в некоторых видах бизнеса это и так. Ну а сейчас давайте займемся реализацией формы.
Примечание!
Я не буду подробно описывать каждое действие, а предлагаю вам готовый вариант в исходнике. Если возникнут вопросы — пишите в комментариях. Будем разбираться:)
Сегодня начнем не с jQuery, а с верстки кнопки и формы. Все скрипты подключим в конце страницы.
Кнопка, по нажатию на которую будет открываться модальное окно:
Оставить заявку
Класс можете задать любой, а вот в href напишите #modal — это будет id у контейнера с затенением и контактной формой.
Теперь приведу код формы и блока, на котором будет располагаться форма:
Оставьте ваши контактные данные и наш консультант свяжется
с вами
Хочу такую форму на свой сайт
Добавив стили, выглядеть это стало так:
Для создания модального окна, использовалась библиотека Remodal. Это набор из css и js файлов, как раз для создания анимированных модальных окон. Можете скачать по ссылке или уже с моими правками в конце статьи.
Между тегами head подключаем стили:
А перед закрывающимся тегом body — добавляем скрипты:
Script.js — это скрипт для обработки формы. Тот самый Ajax, который позволяет нам осуществить всю процедуру без перезагрузки страницы:
$(document).ready(function () {
$("form").submit(function () {
// Получение ID формы
var formID = $(this).attr("id");
// Добавление решётки к имени ID
var formNm = $("#" + formID);
$.ajax({
type: "POST",
url: "mail.php",
data: formNm.serialize(),
success: function (data) {
// Вывод текста результата отправки
$(formNm).html(data);
},
error: function (jqXHR, text, error) {
// Вывод текста ошибки отправки
$(formNm).html(error);
}
});
return false;
});
});
Не буду приводить исходный код css и js из файлов, отвечающих за модальное окно и форму, так как они достаточно объемы. Если что, смотрите в исходнике. А вот php обработчик во многом стандартный (если можно так сказать):
Пожалуйста
, не забывайте менять адреса электронной почты на свои.
Вот такая ajax форма получилась. Извините, что не пытался объяснить подробно, как делался каждый элемент. Просто хотелось дать готовый результат, а описывать все анимации, появления — нет никакого смысла. Качайте исходник и внедряйте на свой сайт. А на сегодня — все. Всем удачи!
Ребята, настоятельно прошу тестировать форму на реальном или виртуальном сервере (хостинге). Убедитесь пожалуйста, что ваш сервер поддерживает php, у вас платный тариф и не тестовый период. В противном случае, в 90% случаев форма работать не будет.
Не ждите письма у себя в почтовом ящике, если вы просто открыли индексный файл в браузере и нажали кнопку «Отправить». Php — это серверный язык!
Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на .
Обновленная версия статьи находится
Быть в ТОПе: секреты известного блогера Есть ли золотые правила блогера
"Черная пятница" в velcom: cнижаем цены на все смартфоны и планшеты
Залоченный iPhone: что это значит?
Как настроить геолокацию на устройстве Android
Рекомендации по настройке рабочего места
Как узнать какая сейчас играет песня и кто ее исполняет?
Loading...