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

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

ОБСУЖДЕНИЕ

Контактная форма на css3 в виде конверта

Контактная форма на css3
Просмотров: 1692  Скачан: 197 раз  Комментариев в теме: 0

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

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

 

HTML

<section class="container" id="contact" >
    <form class="flip">
        <div class="front">
            <h2>Contact info</h2>
            <p>13 bis rue Peps</p>
            <p>75004 Paris France</p>
            <a id="flip2back" href="#">Drop me a line !</a>
        </div>
        <div id="content" class="back">
            <div id="letter">
                <div class="container">
                    <div class="flip">
                        <div class="front"></div>
                        <div class="back">
                            You'd like us to work for you or you're here to say hello ? Don't hesitate - just drop us a line. You'll hear back from us soon. Thanks. 
                            <a id="close" href="#">Close</a>
                        </div>
                    </div>
                </div>
                <textarea  class="required" id="message" name="message" placeholder="Your message"></textarea>
                <input type="submit" class="submit" value="Send" />
            </div>
            <div id="top">
                <a id="flip" href="#contact">Flip</a>
            </div>
            <div id="lid" class="container">
                <div class="flip">    
                    <div class="front">
                        <div>
                            <label for="name">Your name :</label>
                            <input type="text"  id="name" name="name">
                        </div>
                        <div>
                            <label for="mail">Your email :</label>
                            <input type="text" id="mail" name="mail" >
                        </div>
                        <a id="open" href="#content">Open</a>
                    </div>
                    <div class="back"></div>
                </div>
            </div>
        </div>
    </form>
</section>

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

 

CSS

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

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

 

JS

<script type="text/javascript" src="js/modernizr.js"></script>
<script type="text/javascript" src="js/jquery 1.8.2.js"></script>
//РАВКА ДЛЯ IE8//
<!--[if IE 8]>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#contact").addClass("target");
            $("#flip2back, #close").click(function(e){
                $(".target").removeClass("target");
                e.preventDefault();
            });
            $("#open, #flip").click(function(e){
                var $anchor = $(this);
                $($anchor.attr('href')).addClass("target");
                e.preventDefault();
            });
        });
    </script>
<![endif]-->
Материалы по теме:

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

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

Красивая форма обратной связи на PHP, CSS, JQueryКрасивая форма обратной связи на PH...

Красивая форма обратной связи на php css и jquery, к форме применены плагины formValidator (для проверка введённых значений), jQTransform (для стилиз...

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

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

Набор элементов дизайна «CSS3 Responsive Forms Pack»Набор элементов дизайна «CSS3 Respo...

Это профессиональный набор элементов дизайна ( кнопки, формы, Checkbox и многое другое)....

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

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

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

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

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

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

Горизонтальное мульти менюГоризонтальное мульти меню

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

Красивые кнопки на css3Красивые кнопки на css3

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

Стильный слайдер на jQuery «Mobilyslider»Стильный слайдер на jQuery «Mobilyslider...

Стильный слайдер на jquery, а если быть точнее, то это плагин «MobilySlider» имеющий размер всего в 5kb, слайдер довольно привлекательный с виду, име...

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

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

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Sooshal v2.4Sooshal v2.4

Sooshal - это первая в режиме реального времени, социальная и не социальная медиа поисковая система, которая использует новейшие данные с помощью 10 р...

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

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

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

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

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


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