Форма обратной связи 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); }); }); Но это все идет по умолчанию, так как здесь самостоятельно можно красиво оформить под тематическое назначение сайта, да и вообще под основной дизайн. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 2 | |
| |