Сайт Земскова Ильи
Веб-мастер, к.т.н., «200000».
Бензин ваш - идеи наши © И.Ильф и Е.Петров

Как привлечь внимание к форме быстрого контакта?

Изучая сайты-визитки компаний никогда не обращал внимания на формы типа «Мы вам перезвоним, только оставьте свои данные». Вроде как незачем было. Но вот на одном сайте смогли-таки привлечь моё разборчивое внимание простым, но очень действенным эффектом - затемнением всего пространства страницы, за исключением самой контактной формы при случайном наведении курсора мышки на форму. При этом получается эдакий визуальный акцент на форме. Похоже у нас на подсознательном уровне есть модель поведения, когда мы инстинктивно ориентируемся в темноте на хоть маленький, но источник света. Так и здесь получается - всё погасло и нам нужно рассмотреть «откуда свет?» В общем, мне этот эффект настолько понравился, что я его тут же применил в своей работе над сайтом фирмы «АББ-ЩИТ». Далее я привожу описание, как такой эффект воспроизвести у вас на сайте.

Эффект затемнения вокруг формы быстрого контакта

Как оказалось, реализуется такой эффект с помощью использования специальных CSS стилей и небольшого кода на JavaScript. Давайте договоримся, что наша контактная форма расположена в специальном DIV блоке с прописанным атрибутом id (пусть id='request-content') и есть глобальный блок-контейнер с id='request'. Выносить заголовок (caption) формы за пределы этого блока или же оставлять «внутри» - дело ваше. Просто учтите при вёрстке. А я, для наглядности, вынес за пределы формы. Итак, Предположим у вас есть контактная форма, которая в html выглядит так:

<div id="request">
    <h2>Заявка</h2>
    <hr>
    <div class="request-content" id="request-content">
        <form action="" method="POST" class="request-form">
            <p class="input-text">
                <label for="contact_name">Контактное лицо:</label>
                <input type="text" class="text" id="contact_name" name="contact_name" value="">
            
            <p class="input-text">
                <label for="phone_number">Ваш телефон:</label>
                <input type="text" class="text" id="phone_number" name="phone_number" value="">
            
            
                <input type="submit" class="submit" value="Отправить заявку">
            
        </form>
    </div>
    <hr>
    <h3>Мы с вами свяжемся!</h3>
</div>

Теперь нам нужно прописать стили оформления. Впоследствии вы сможете настроить их под себя, экспериментируя со свойствами фона области формы и background-ом. В качестве основы берём такие стили:

<style>
.request-content {
    position: relative;
    z-index: 100;
    padding:10px 6px 1px;
    width: 294px;
    background: none repeat scroll 0 0 #ccffcc;
}
.request-content_hover {
    background: none repeat scroll 0 0 #ffeeee;
    width: 294px;
    padding:10px 6px 1px;
    position: relative;
    z-index: 100;
}
#fade {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
}
</style>

Класс .request-content отвечает за внешний вид блока в состоянии «покоя». Класс .request-content_hover описывает внешний вид в момент активности эффекта. Класс с уникальным идентификатором #fade описывает оформления блока, который будет использоваться для создания эффекта затенения страницы. Приведённый код для случая, когда стили прописываются в секции head (т.е. должен быть внедрен в код страницы с помощью пары '<style></style>'). Вы же можете вынести эти классы в ваш общий файл стилей (например, в 'style.css').

Заключительный и основной элемент реализации эффекта - код на JavaScript. Для облегчения задачи и уменьшения самой программы проще реализовать нужный функционал с помощью библиотеки jQuery (не забываем, что в этом случае вам нужно убедиться, что на странице подключается эта библиотека). Код действительно получается более наглядным и простым для понимания. Вот он:

<script type="text/javascript">
    var last_hover = false;
    $(document).ready(function() {
        $('#request-content').hover(
        function(){
            if (last_hover !== true) {
                if ($("#fade").length)
                    $("#fade").remove();
                $("#request").append('<div id="fade" ></div>');
                $("div#fade").fadeTo(0, 0).fadeTo('fast', 0.6);
                $("div#request-content").removeClass('request-content').addClass('request-content_hover');
                last_hover = true;
            }
        },
        function(){
            $("#fade").fadeTo('fast', 0, function() {$(this).remove();});
            $("div#request-content").removeClass('request-content_hover').addClass('request-content');
            if ($("#fade").length)
                $("#fade").remove();
            last_hover = false;
        });    
    });
</script>

Немного поясню. Во-первых, определяется глобальная булевая переменная, которая отвечает за хранение текущего состояния формы. Далее мы видим, что на событие готовности страницы (см. конструкцию '$(document).ready') навешивается функция, в которой уже происходит связывание события попадания мышки на блок ('hover') с блоком, который имеет id='request-content'. При этом обработчику события "попадания на блок мышки" передаётся две функции, которые в конечном итоге и реализуют нужные действия при "попадании" и при "покидании" блока. Думаю, что дальше программисты и сами разберутся как кастомизировать этот код, а «непрограммисты» могут обратиться ко мне за помощью сюда. Тем, кому нужен полный исходный код эффекта, вот ссылка на скачивание:

Скачать код эффекта «Затемнение вокруг контактной формы»36
HTML (2,4 Кб).

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

Комментариев: 1
Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация MaxSiteAuth.

(обязательно)