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

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

ОБСУЖДЕНИЕ

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

Фиксированная контактная форма на css и JQuery
Просмотров: 2792  Скачан: 197 раз  Комментариев в теме: 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>
Материалы по теме:

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Фиксированная форма обратной связи на PHP и jQueryФиксированная форма обратной связи ...

Довольно простая форма обратной связи без капчи, проверки полей, сообщений об ошибке и всего прочего......

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

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

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

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

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

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

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

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

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......
Интересные публикации:

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

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

Paris ClarkParis Clark

Красивый html шаблон Paris Clark, на главной странице используется привлекательный слайдер, имеется портфолио, контактная форма......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

Вращающиеся кнопки на css3Вращающиеся кнопки на css3

Довольно интересная идея создать такую анимацию с кнопками. Когда вы наводите на кнопку курсор мыши, она начинает быстро вращаться, когда......

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

Стильный комплект форм «Zi-4-Forms»Стильный комплект форм «Zi-4-Forms»

Zi-4-Forms - это комплект форм использующий CSS3, комплект состоит с формы входа, регистрации, восстановления пароля, контактная форма....
  • Текущий 1.33/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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