ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Форма обратной связи JS с кнопкой на CSS

Форма обратной связи JS с кнопкой на CSS

Форма обратной связи JS с кнопкой на CSS
Простой и понятный дизайн для пример формы «Связаться с нами» с кнопкой отправки, которая разработана с помощью JavaScript, HTML. Также здесь присутствует CSS, где стилистика полностью отвечает за дизайн. Такой формат можно разместить, как на отдельной странице, так и всплывающие окна Ajax. Для полноценной реализации функции работы кнопки, здесь будут использоваться методы JavaScript.

Заголовок формы отображается в виде блока с размером шрифта и толщиной шрифта, установленными на 30 пикселей и 300 соответственно. Полям ввода задается значение границы 1px solid #ccc и цвет фона #FFF. При наведении курсора текстовые поля приобретают эффект перехода цвета границы 0,3 секунды и эффект границы сплошного цвета 1 пиксель #aaa.

Установка:

HTML

Код
<div class="container">
<form id="contactus" action="" method="post">
<h3>Форма обратной связи</h3><fieldset>  
<input placeholder="name" type="text" tabindex="1" required autofocus> </fieldset>

<fieldset> <input placeholder="Email Address" type="email" tabindex="2" required> </fieldset>
   
<fieldset> <input placeholder="Phone Number" type="tel" tabindex="3" required> </fieldset>
   
<fieldset> <textarea placeholder="Type your message here..." tabindex="5" required></textarea> </fieldset>
   
<fieldset> <button name="submit" type="submit" id="contactus-submit" data-submit="Отправка"><i id="icon" class=""></i> Отправить сейчас</button> </fieldset>
   
</form>
</div>

CSS

Код
.container{
max-width: 400px;
width: 100%;
margin: 0 auto;
position: relative }

#contactus{
font: 400 12px/16px 'Roboto', Helvetica, Arial, sans-serif;
background: #F9F9F9;
padding: 25px;
margin: 150px 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24) }

#contactus{
}

#contactus h3{
display: block;
font-size: 30px;
font-weight: 300;
margin-bottom: 10px }

#contactus h4{
margin: 5px 0 15px;
display: block;
font-size: 13px;
font-weight: 400 }

fieldset{
border: medium none !important;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100% }

#contactus input[type='text'], #contactus input[type='email'], #contactus input[type='tel'], #contactus input[type='url'], #contactus textarea{
width: 100%;
border: 1px solid #ccc;
background: #FFF;
margin: 0 0 5px;
padding: 10px }

#contactus input[type='text']:hover, #contactus input[type='email']:hover, #contactus input[type='tel']:hover, #contactus input[type='url']:hover, #contactus textarea:hover{
-webkit-transition: border-color 0.3s ease-in-out;
-moz-transition: border-color 0.3s ease-in-out;
transition: border-color 0.3s ease-in-out;
border: 1px solid #aaa }

#contactus textarea{
height: 100px;
max-width: 100%;
resize: none }

#contactus button[type='submit']{
cursor: pointer;
width: 100%;
border: none;
background: #f0715f;
color: #FFF;
margin: 0 0 5px;
padding: 10px;
font-size: 15px }

#contactus button[type='submit']:hover{
background: #f07150;
-webkit-transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out }

#contactus button[type='submit']:active{
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5) }

#contactus input:focus, #contactus textarea:focus{
outline: 0;
border: 1px solid #aaa }

::-webkit-input-placeholder{
color: #888 }

:-moz-placeholder{
color: #888 }

::-moz-placeholder{
color: #888 }

:-ms-input-placeholder{
color: #888  
}

JS

Код
$(document).ready(function(){

$("#contactus-submit").click(function(){
var r= $('');

$("#contactus-submit").html(r);

$("#contactus-submit").append(" Sending...");

$("#contactus-submit").attr("disabled", true);
setTimeout(function(){
$("#contactus-submit").attr("disabled", false);
$("#contactus-submit").html('Send');

}, 3000);

});

});

Но это все идет по умолчанию, так как здесь самостоятельно можно красиво оформить под тематическое назначение сайта, да и вообще под основной дизайн.

Демонстрация
05 Июля 2021 Загрузок: 4 Просмотров: 1739 Комментариев: (2)

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

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

Оставь свой отзыв

Комментарии: 2
infoh2mru
infoh2mru 18 Ноября 2023 19:121
0
Не работает.
Kosten
Kosten 19 Ноября 2023 01:382
0
Здесь нужно повнимательнее быть, так как вы зашли в категорию JavaScript и jQuery, а не скрипты для uCoz, что означает, этот код для всех хостинг идет, но его нудно под каждый хостинг настраивать, свои операторы ставить. Скажем так, здесь только дизайн, остается его настроить под юкоз, все!
avatar