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

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

Как оказалось, реализуется такой эффект с помощью использования специальных 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'. При этом обработчику события "попадания на блок мышки" передаётся две функции, которые в конечном итоге и реализуют нужные действия при "попадании" и при "покидании" блока. Думаю, что дальше программисты и сами разберутся как кастомизировать этот код, а «непрограммисты» могут обратиться ко мне за помощью сюда. Тем, кому нужен полный исходный код эффекта, вот ссылка на скачивание:

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

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