Lecaw

Учимся создавать Web-сайты

jQuery - популярные модальные формы контактов

September 17, 2013 97hits

Модальные окна стали очень популярными среди разработчиков сайтов и различных приложений. Мобильные приложения зачастую имеют ограниченную площадь экрана, данная тема актуальна именно для таких случаев, ведь это может принести дополнительные опции для Ваших пользователей.

 

Обновление - март 2013

Доступна новая версия. Посмотрите модальные формы ModalBox Pop Up Modal Forms Revisited для jQuery AJAX, которые можно скачать в любом удобном формате HTML или PHP, и разместить на своем сайте.

Для демо мы используем простую страницу и кнопку инициализации формы контакта, ничего сложного нет.

Итак, давайте начнем

HTML главной страницы

Для начала необходимо связать CSS и JavaScript файлы в HTML странице.

<!-- CSS -->
  <link rel="stylesheet" type="text/css" media="all" href="/css/style.css">
  <link rel="stylesheet" type="text/css" media="all" href="#">
  <!-- JS -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="/fancybox/jquery.fancybox.js?v=2.0.6"></script>

Форма HTML

Загрузите последнюю версию Fancybox и распакуйте в рабочую папку. Мы использовали папку "source", в которой создали папку "fancybox".

Данный HTML код очень простой, поэтому мы объясним лишь некоторые моменты. Контактная форма заключена в div и скрыта на странице с помощью CSS. При нажатии на кнопку входа, появляется модальное окно.

<div id="wrapper">
    <h1>Welcome! Lets get this started...</h1>
    <p>Click the button below to try it out.</p>
    
    <p><a class="button modalbox" href="#">Contact Me</a></p>
</div>
<!-- встроенные скрытые формы -->
<div id="inline">
    <form id="contact" name="contact" action="#" method="post">
        <fieldset>
        <legend>Please complete the following form</legend>
        <label for="email"><span class="required">*</span> Email</label>
        <input name="email" type="email" id="email" class="txt" />
        <br />
        <label for="comments"><span class="required">*</span> Your comments</label>
        <textarea name="msg" id="msg"></textarea>
        <button id="send" class="button">Send E-mail</button>
        </fieldset>
    </form>
</div>

Стиль формы

Мы можем добавить .error, для полей, используя jQuery. Данная операция позволит перекрасить цвета текста, рамки и фона в оттенки красного. После успешного ввода данных пользователем, модальная форма закрывается.

#contact {  }
#contact fieldset {
    border: 1px solid #EEEEEE;
    padding: 20px;
    border-radius: 3px;
}
#contact legend {
    border: 1px solid #EEEEEE;
    color: #617797;
    margin-bottom: 0 !important;
    padding: 7px 10px;
    font-weight: bold;
    border-radius: 3px;
}
#contact label {
    display: inline-block;
    float: left;
    font-size: 1em;
    height: 26px;
    line-height: 26px;
    width: 155px;
}
#contact input, #contact textarea, #contact select {
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px solid #CCCCCC;
    color: #666666;
    font: 1em "Dosis";
    margin: 5px 0;
    padding: 5px;
    width: 360px;
    border-radius: 3px;
}
#contact .button { border-radius: 3px; margin: 5px 20px 10px 155px; }
#contact input:focus, #contact textarea:focus { border: 1px solid #eee; color: #444; background: #fff; }
#contact .error { border: 1px solid #973d3d; background: #f0bebe; color: #a35959; }
#contact .error:focus { border: 1px solid #eee; color: #a35959; }

Кнопки на CSS

.button {
    background-color: #222;
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image: -moz-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image: -ms-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image: -o-linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    background-image: linear-gradient(hsla(0,0%,100%,.15), hsla(0,0%,0%,0));
    border: 1px solid #111;
    color: #c6c6c6;
    cursor: pointer;
    display: inline-block;
    font: bold 18px/12px 'Dosis';
    margin: 20px;
    padding: 16px 20px;
    position: relative;
    text-decoration: none;
    text-shadow: 0 -1px 1px hsla(0,0%,0%,.8);
    vertical-align: top;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
    .button:hover, .button:focus {
        background-color: #242424;
        color: #f6f6f6;
    }
    .button:active {
        background-color: #202020;
        color: #b6b6b6;
        padding: 16px 20px;
    }

Мы закончили основу нашего кода, давайте приступим к следующей части.

The jQuery

Для документа document.ready() изменим настройки fancybox которые стоят по умолчанию. Настройка будет распространяться на все селекторы fancybox при нажатии, то есть любого элемента с классом .modalbox.

$(".modalbox").fancybox();
$("#contact").submit(function() {
    return false;
});

Следующая часть показывает, как отключить форму контактов по умолчанию. Таким образом мы сможем обрабатывать клики и передачу данных через Ajax. После того как пользователь вводит данные, мы должны получить значения, в данном случае это e-mail адрес и сообщение. Необходимо проверить e-mail адрес на действительность, а также ограничение на количество символов сообщения.

#contact {  }
#contact fieldset {
    border: 1px solid #EEEEEE;
    padding: 20px;
    border-radius: 3px;
}
#contact legend {
    border: 1px solid #EEEEEE;
    color: #617797;
    margin-bottom: 0 !important;
    padding: 7px 10px;
    font-weight: bold;
    border-radius: 3px;
}
#contact label {
    display: inline-block;
    float: left;
    font-size: 1em;
    height: 26px;
    line-height: 26px;
    width: 155px;
}
#contact input, #contact textarea, #contact select {
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px solid #CCCCCC;
    color: #666666;
    font: 1em "Dosis";
    margin: 5px 0;
    padding: 5px;
    width: 360px;
    border-radius: 3px;
}
#contact .button { border-radius: 3px; margin: 5px 20px 10px 155px; }
#contact input:focus, #contact textarea:focus { border: 1px solid #eee; color: #444; background: #fff; }
#contact .error { border: 1px solid #973d3d; background: #f0bebe; color: #a35959; }
#contact .error:focus { border: 1px solid #eee; color: #a35959; }$("#send").on("click", function(){
    var emailval = $("#email").val();
    var msgval = $("#msg").val();
    var msglen = msgval.length;
    var mailvalid = validateEmail(emailval);
    
    if (mailvalid == false) {
        $("#email").addClass("error");
    }
    $("#email").change(function() {
        $("#email").removeClass("error");
    });
    
    if (msglen < 4) {
        $("#msg").addClass("error");
    }
    $("#msg").change(function() {
        $("#msg").removeClass("error");
    });
});

Этого мы можем достигнуть, подключив некоторые if/else элементы. Форма не будет представлена, если адрес не действителен, а сообщение не меньше 4 букв.

The Ajax

Следующая часть посвящена событию onclick, которое позволяет отправлять формы контакта в PHP.

if (mailvalid == true && msglen >= 4) {
    $("#send").replaceWith("<em>sending...</em>");
    
    $.ajax({
        type: 'POST',
        url: 'sendmessage.php',
        data: $("#contact").serialize(),
        success: function(data) {
            if(data == "true") {
                $("#contact").fadeOut("fast", function(){
                    $(this).before("<p><strong>Success! Your message has been sent, thanks!</strong></p>");
                    setTimeout("$.fancybox.close()", 2000);
                });
            }
        }
    });
    
}

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

В основном мы должны определить информацию по заголовку, включающую datatype (ОТПРАВИТЬ или ПОЛУЧИТЬ), название скрипта и переменную формы. Для этой цели у jQuery есть удобный метод .serialize().

После того как получим нужный отклик от сервера, скрываем модальную форму контакта и выведем сообщение об успешной отправке. Для показа уведомления мы использовали метод SetTimeoout(), через 1 секунду после скрытия модальной формы контакта.

С помощью JS кода это будет выглядеть так $.fancybox.close().

The PHP

Используя jQuery, посылаем пользователям сообщение, расположенное в файле sendmessage.php. С помощью PHP мы настроим сообщение для пользователя и попытаемся отправить его, меняя при этом в jQuery с "true" на "false" и наоборот.

$sendto = "
 ";
$usermail = $_POST['email'];
$content = nl2br($_POST['msg']);
$subject = "Message from your site";
$headers = "From: " . strip_tags($usermail) . "\r\n";
$headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";
$msg = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Message from your site</h2>\r\n";
$msg .= "<p><strong>Sent by:</strong> ".$usermail."</p>\r\n";
$msg .= "<p><strong>Message:</strong> ".$content."</p>\r\n";
$msg .= "</body></html>";

Первая переменная $sendto показывает на какой e-mail будут отправляться сообщения. Также вы можете изменить тему сообщения с помощью переменной $subecjt.

ДЕМО

СКАЧАТЬ

 

Дополнительная информация

Роман Воеводин

Воеводин Роман - дизайнер, модератор, соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий