» »

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

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

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

Где будет все прописано, и только остается заполнить и отправить и письмо придет на почтовый ящик. Она применяться на любом тематическом интернет ресурсе, здесь можно как под софт портал установить, и также на интернет магазин. Дело в том, что на главной пишется название "Связь с Администрацией" или как вам нужно и ставим на место, где каждый будет видеть.

А что как установить, это простая надпись в низ сайта или в горизонтальном меню, здесь вам решать, многие делают под красивую кнопку. И как установите, то вам уже не нужна будет страница по умолчанию. Все очень просто и стильно будет смотреться и главное будет работать по назначению, а назначение у этой функций широкое.

По скрипту:

Эта установочный код, который просто заменит стандартную стилистику связи, здесь нет не какого окна, все делаем как по установке написано, вы просто замените дизайн обратной связи на этот, который намного понятнее и безусловно на первом месте стоит уникальность, что здесь явно отличается. 

Так смотреться будет:  

 

Установка:

Для начала настраиваем форму обратной связи как указано на изображение:



Далее вставляем HTML код:
Код
<div class="contact">
<fieldset>   
<div class="row">
<section class="col col-2">
<label class="input">
<i class="fa fa-append fa-user"></i>
<input type="text" name="f2" size="30" maxlength="70" placeholder="Имя" required>
</label>
</section>
<section class="col col-2">
<label class="input">
<i class="fa fa-append fa-envelope-o"></i>
<input type="email" name="f1" size="30" maxlength="70" placeholder="E-mail" required>
</label>
</section>
</div>
<section>
<label class="input">
<i class="fa fa-append fa-tag"></i>
<input type="text" name="f3" size="30" maxlength="150" placeholder="Тема" required>
</label>
</section>   
<section>
<label class="textarea">
<i class="fa fa-append fa-comment"></i>
<textarea rows="4" name="f4" size="30" maxlength="1000" placeholder="Сообщение" required></textarea>
</label>
</section>   
<button type="submit" class="button">Отправить</button>
</fieldset>   
</div>

И в таблице стилей подключаем css код:
Код
.contact {
                 max-width: 467px;
                 min-width: 320px;
                 margin: 0 auto;
                 background: rgba(255,255,255,0.9);
                 box-shadow: 0 0 8px rgba(0,0,0,.3);
}
.contact * {
                 outline: none;
                 border: 0;
                 background: none;
}
form fieldset {
                 display: block;
                 padding: 25px 30px;
}
form .row {
                 margin: 0 -15px;
}
form .col-2 {
                 width: 50%;
}
form .col {
                 float: left;
                 min-height: 1px;
                 padding-right: 15px;
                 padding-left: 15px;
                 box-sizing: border-box;
                 -moz-box-sizing: border-box;
}
form .row:after {
                 content: '';
                 display: table;
                 clear: both;
}
                 form section {
                 margin-bottom: 20px;
}
form .input, form .textarea, form .radio, form .checkbox, form .button {
                 position: relative;
                 display: block;
}
form .fa-append {
                 position: absolute;
                 top: 5px;
                 right: 5px;
                 width: 29px;
                 height: 29px;
                 padding-left: 3px;
                 border-left: 1px solid #e5e5e5;
                 font-size: 15px;
                 line-height: 29px;
                 text-align: center;
                 color: #ccc;
}
.fa {
                 display: inline-block;
                 font-family: FontAwesome;
                 font-style: normal;
                 font-weight: normal;
                 line-height: 1;
                 -webkit-font-smoothing: antialiased;
                 -moz-osx-font-smoothing: grayscale;
}
.fa-user:before {
                 content: "\f007";
}
.fa-envelope-o:before {
                 content: "\f003";
}
.fa-tag:before {
                 content: "\f02b";
}
.fa-comment:before {
                 content: "\f075";
}
form .input .fa-append + input, form .textarea .fa-append + textarea {
                 padding-right: 46px;
}
form .input input, form .textarea textarea {
                 display: block;
                 box-sizing: border-box;
                 -moz-box-sizing: border-box;
                 width: 100%;
                 height: 39px;
                 padding: 8px 10px;
                 outline: none;
                 border: 2px solid #e5e5e5;
                 border-radius: 0;
                 background: #fff;
                 font: 13px/19px 'Open Sans', Helvetica, Arial, sans-serif;
                 color: #404040;
                 appearance: normal;
                 -moz-appearance: none;
                 -webkit-appearance: none;
                 transition: border-color 0.3s;
                 -o-transition: border-color 0.3s;
                 -ms-transition: border-color 0.3s;
                 -moz-transition: border-color 0.3s;
                 -webkit-transition: border-color 0.3s;
}
form .textarea textarea {
                 height: auto;
                 resize: none;
                 overflow:auto;
}
form .input:hover input,
form .textarea:hover textarea,
form .checkbox:hover i {
                 border-color: #00BDAB;
}
form .input input:focus,
form .textarea textarea:focus,
form .checkbox input:focus + i {
                 border-color: #009688;
}
form .button {
                 float: right;
                 height: 39px;
                 overflow: hidden;
                 margin-left: 20px;
                 padding: 0 20px;
                 outline: none;
                 border: 0;
                 background-color: #009688;
                 font: 300 13px/39px 'Open Sans', Helvetica, Arial, sans-serif;
                 text-decoration: none;
                 color: #fff;
                 cursor: pointer;
                 opacity: 0.8;
                 transition: opacity 0.2s;
                 -o-transition: opacity 0.2s;
                 -ms-transition: opacity 0.2s;
                 -moz-transition: opacity 0.2s;
                 -webkit-transition: opacity 0.2s;
}
form .button:hover {
                 opacity: 1;
}
@media screen and (max-width: 470px){
                 .col, .col-2 { float: none !important; width: 100% !important;}
}

Внимание:

Не забываем подключить иконочнай шрифт от fontawesome.io! Как подключить - можете посмотреть здесь
16.02.2017 Просмотров: 1349 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
Сопрано
Сопрано 16.02.2017 20:311
0
Вы тут забыли написать и поставить код вызова, так все есть, а как вызывать то собираетесь.
Roman_Domnin
Roman_Domnin 16.02.2017 20:333
+1
Это код предназначен не для ajax окна, а для страницы обратной связи
Kosten
Kosten 16.02.2017 20:394
0
Да, все понял, а описание сделал под модальное окно, но думаю прочтут комментарий, что это не предназначен код под модальное окно, просто меняем дизайн на странице обратной связи.
Сопрано
Сопрано 16.02.2017 20:332
0
Все понял, здесь не нужно, просто в описание не так написано.
FeStemBer
FeStemBer 16.02.2017 20:475
0
Все очень просто и понятно, хотя на стандартной также, но если сайт оригинален, то можно сменить. Но здесь есть одно но, если у вас на сайте нет посещаемости, то думаю не к чему это делать, другое дело когда есть. Для кино сайтов, там она обязательна нужна, в каком формате будет, здесь уже можно и подумать и поставить такую форму.
tsakonter
tsakonter 16.02.2017 21:096
0
А стоит вообще что то менять, согласен, что эта форма мне больше нравится, но и стандартная тоже понятная.
Сафрон
Сафрон 16.02.2017 21:127
0
В том то сама суть, вам предлагают, а вы уже сами решаете. Если бы не предлагали, там по другому размышление было, отличная форма.
csretven
csretven 19.02.2017 00:068
0
С начало не получалось, не мог понять в чем дело, здесь бы свеин вывести, а то он в описание, так поставил, спасибо.
avatar