qiwi
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Контактная форма на css, html и JQuery

Фиксированная контактная форма на css и JQuery
Просмотров: 2744  Скачан: 193 раз  Комментариев в теме: 0

Большинство контактных форм встречаемых на разных ресурсах, выглядят не очень то и захватывающе, по сути везде используются статичные формы, поэтому хочу вам предложить, как один из вариантов разнообразить ваш ресурс, довольно привлекательную контактную форму реализованную с помощью css, html и JQuery. Форма фиксируется в верхней части страницы и открывается по нажатию кнопки, все это сопровождается красивым эффектом.

Шаг 1 - создание разметки

 

HTML

<div id="contactArea">
    <form> 
        <div id="info">
            <label for="author">Name</label> 
            <input type="text" name="author" id="author" value="" size="22" tabindex="1" class="rounded" aria-required='true' /> 
            <label for="email">Email</label> 
            <input type="text" name="email" id="email" value="" size="22" tabindex="2" class="rounded" aria-required='true' /> 
            <label for="url">Website</label> 
            <input type="text" name="url" id="url" value="" size="22" tabindex="3" class="rounded" /> 
        </div>
        <div id="message">
            <label for="comment">Your Message</label> 
            <textarea name="comment" id="comment" cols="2" rows="2" tabindex="4" class="rounded"></textarea> 
            <input name="submit" type="submit" id="submit" class="rounded" tabindex="5" value="Submit" /> 
        </div>
    </form>
</div>
<div id="container">
    <div id="header" class="container"></div>
    <a class="contact" href="#">Contact Us</a>
</div>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 
    $("#contactArea").css('height', '0px');
    $("a.contact").toggle( 
        function () { 
            $("#contactArea").animate({height: "225px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'}) 
        }, 
        function () { 
            $("#contactArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})  
        } 
    );       
}); 
</script>
Материалы по теме:

Прозрачная форма регистрации с прогресс баромПрозрачная форма регистрации с прог...

Стильная прозрачная форма регистрации на css3 и JQuery. В форме имеется прогресс бар показывающий пользователю процесс заполнения формы....

Обратная связь на JQuery, PHP и MySQLОбратная связь на JQuery, PHP и MyS...

Красивая форма обратной связи на PHP/JQuery и MySQL. В форме реализована проверка полей, сообщение об ошибке и база данных для хранения присылаемых ва...

Оригинальная анимационная контактная формаОригинальная анимационная контактна...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

Набор плоских форм «Formicon Flat Forms Pack»Набор плоских форм «Formicon Flat F...

Formicon Flat Forms Pack - это набор плоских форм, построенных на Bootstrap 3.0. Набор содержит в себе различные формы и все они имеют разные стили...

Контактная форма (дизайн)Контактная форма (дизайн)

Неплохой дизайн контактной формы, если у вас туго с воображением или вы в душе не дизайнер, то можете воспользоваться этой формой, как вариант вполне ...

3D Контактная форма на css33D Контактная форма на css3

Красивая контактная форма в довольно оригинальном стиле. Контактная форма имеет вид почтового конверта, когда вы кликаете по нём, он......
Интересные публикации:

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

OblivionOblivion

Oblivion - это отличное решение для создания игрового портала с обзорами компьютерных игр и т.д....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Социальная панель на css3Социальная панель на css3

Красивая раскрывающиеся социальная панель на css3 с использованием иконических шрифтов. При наведении курсора на значок, происходит раскрытие панели, ...

PHP скрипт комментариевСкрипт комментариев

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

Горизонтальное выпадающее меню на cssГоризонтальное выпадающее меню на css

Меню с выпадающими пунктами на css
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.3/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить