регистрация
856материалов
3308комментариев
234темы на форуме
6956пользователей

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


Описание:

Очень важный функционал который должен присутствовать на любом сайте в том числе и на 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! Как подключить - можете посмотреть здесь


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.02.2017 в 09:00
Материал просмотрен: 1510 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 14 комментариев

Пожаловаться
Сказать спасибо

14 комментариев


Fox
Андрей @Fox 16.02.2017 12:251
0
Забыли указать что должен быть подключён шрифт fontawesome.io чтобы отображались иконки в полях.
И почему-то кнопка "отправить" слева и как будто без стиля https://screenpresso.com/=DagIb
Ромчик
Добавили к описанию. Где у Вас установлена форма, надо посмотреть почему у вас не присвоились стили к кнопке
Fox
Андрей @Fox 16.02.2017 13:177
0
Сайт только в разработке, пока закрыт. Может что-то со стилями? Вот таблица стилей https://yadi.sk/d/ZWcqsLmD3E9jhN
Ромчик
Нет, это что то со стилями кнопки, щас посмотрю и перезалью материал
Ромчик
Ошибка исправлена, переустановите HTML код
Oksana
Оксана @Oksana 16.02.2017 12:282
0
Форма классная, все работает как надо, спасибо
Ромчик
Всегда пожалуйста!
sergeevizh
Максим @sergeevizh 16.02.2017 12:343
0
Крутая форма, но только и вправду забыли написать что нужно подключить http://fontawesome.io/
Ромчик
Спасибо за добавленный материал о подключении к сайту font awesome
Ирсен
Ирина @Ирсен 18.03.2017 12:2510
0
А если в форме предусмотрена отправка прикрепленного файла?
Ромчик
То просто допешите код и все :-)
t
Отлично сделано! спасибо автору!!!
Ромчик
Не за что :-)
t
А не лучше выставить на всю ширину, кажется лучше будет выглядить или мне так кажется)
Код
.contact {  
max-width: auto;  
min-width: auto;
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0