Форма мгновеной отправки письма на AJAX

Почти на каждом сайте есть форма отправки письма. В данной статье мы приведем пример кода мгновенной отправки письма на AJAX без перезагрузки страницы. Форма состоит из двух файлов contact.php и send_email.php

Почти на каждом сайте есть форма отправки письма. В данной статье мы приведем пример кода мгновенной отправки письма на AJAX без перезагрузки страницы.

Форма состоит из двух файлов contact.php и send_email.php. Файл contact.php содержит стиль формы, ajax обработчик и структуру формы. Файл send_email.php отправляет email на указанный в нем адрес.

Скачать исходный код

Код html файла:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Contact Us</title>
<style type='text/css'>
#contact_form_holder { 
    font-family: 'Verdana'; 
    font-variant: small-caps; 
    width:400px;
}
#contact_form_holder input, #contact_form_holder textarea { 
    width:100%;
    font-family:inherit;
    padding:5px;
}
#contact_form_holder textarea { 
    height:100px;
}
#send_message { 
    width:200px !important;
    font-variant: small-caps;
    border:1px solid black;
    cursor:pointer;
    cursor:hand;
}
#cf_submit_p { text-align:right; }
 
.error { display: none; padding:10px; color: #D8000C; font-size:12px;background-color: #FFBABA;}
.success { display: none; padding:10px; color: #044406; font-size:12px;background-color: #B7FBB9;}
#contact_logo { vertical-align: middle; }
.error img { vertical-align:top; }
</style>
<script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>                                                                                              
<script type='text/javascript'>
    $(document).ready(function(){
        $('#send_message').click(function(e){
            e.preventDefault();
 
            var error = false;
            var name = $('#name').val();
            var email = $('#email').val();
            var subject = $('#subject').val();
            var message = $('#message').val();
 
            if(name.length == 0){
                var error = true;
                $('#name_error').fadeIn(500);
            }else{
                $('#name_error').fadeOut(500);
            }
            if(email.length == 0 || email.indexOf('@') == '-1'){
                var error = true;
                $('#email_error').fadeIn(500);
            }else{
                $('#email_error').fadeOut(500);
            }
            if(subject.length == 0){
                var error = true;
                $('#subject_error').fadeIn(500);
            }else{
                $('#subject_error').fadeOut(500);
            }
            if(message.length == 0){
                var error = true;
                $('#message_error').fadeIn(500);
            }else{
                $('#message_error').fadeOut(500);
            }
 
             if(error == false){
                $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
 
                 $.post("send_email.php", $("#contact_form").serialize(),function(result){
                     if(result == 'sent'){
                          $('#cf_submit_p').remove();
                         $('#mail_success').fadeIn(500);
                    }else{
                         $('#mail_fail').fadeIn(500);
                        $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
                    }
                });
            }
        });    
    });
</script>
</head>
<body>
<div id='contact_form_holder'>
<form action='index.php' method='post' id='contact_form'>
<h2><img id='contact_logo' src='images/mail.png' /> Контактная форма</h2>
<p>
Ваше имя:
<div id='name_error' class='error'><img src='images/error.png'> Введите ваше имя</div>
<div><input type='text' name='name' id='name'></div>
</p>
<p>
Ваш Email:
<div id='email_error' class='error'><img src='images/error.png'> Введите ваш Email адрес</div>
<div><input type='text' name='email' id='email'><div>
</p>
<p>
Тема письма:
<div id='subject_error' class='error'><img src='images/error.png'> Введите тему сообщения</div>
<div><input type='text' name='subject' id='subject'></div>
</p>
<p>
Текст сообщения:
<div id='message_error' class='error'><img src='images/error.png'> Введите текст сообщения</div>
<div><textarea name='message' id='message'></textarea></div>
</p>
<div id='mail_success' class='success'><img src='images/success.png'> Ваше сообщение отправленно.</div>
<div id='mail_fail' class='error'><img src='images/error.png'> Ваше сообщение не отправленно</div>
<p id='cf_submit_p'>
<input type='submit' id='send_message' value='Send The Message'>
</p>
</form>  
</div>
</body>
</html>

Файл send:

<?php
    $email_to =   'test@test.com';
    $name     =   $_POST['name'];  
    $email    =   $_POST['email'];
    $subject  =   $_POST['subject'];
    $message  =   $_POST['message'];
 
    $headers  = "From: $emailrn";
    $headers .= "Reply-To: $emailrn";
 
    if(mail($email_to, $subject, $message, $headers)){
        echo 'sent';
    }else{
        echo 'failed';
    }
?>

Форма мгновеной отправки письма на AJAX

Рекомендуем

Теги

Смотрите также