A Fancy AJAX Contact Form Vlad Andreev

На днях мне довелось поработать с формами на одном из наших сайтов. В качестве руководства я использовал статью A Fancy AJAX Contact Form. Автор (Martin Angelov) рассказывает как придать формам на сайте приятный и лаконичный вид, настроить js-валидацию и AJAX-обработку данных. Также предлагается посмотреть Demo и скачать готовый пример.

В качестве валидатора используется jquery-plugin validationEngine, а jqtransform — для изменения внешнего вида. Что и как подключается достаточно подробно описано там же, так что я не буду заострять на этом вашего внимания. Лучше поведаю вам об одной проблеме, которая приключилась со мной в процессе интеграции этого чуда на сайт.

Итак, все замечательно, если вы работаете с формой на странице сайта. Но стоит поместить форму во всплывающее окно, все становится куда интереснее. После открытия такого окна, всплывающие подсказки формы теряются в пространстве – они прилипают к левому краю экрана, тогда как должны появляться рядом с соответствующими полями.

Из этой ситуации нашелся следующий выход. Отказаться от управления видимостью окна средствами css-свойства display. Вместо этого, оно скрывается от пользователя свойством {top: -100%}, а отображается свойством {top: 20%}. Таким образом, форма с самого начала уже присутствует на странице и всплывающие подсказки больше не теряются!

UPD: Чтобы решение работало и на небольших экранах, нужно вместо {top: -100%} использовать {top: -1000px}, где 1000px – это некая величина превышающая высоты всплывающего окна.