01

<center><div align="left" id="cor5" class="sidebarForm">

02

<h4>Задать новый вопрос:</h4>

03

<div align="center" id="loadBar"></div>

04

<form action="#" method="post" id="cForm2">

05

 

06

   <label>Ваше имя:</label>

07

   <div class="input" id="cor5">

08

   <input value="" id="posName" type="text">

09

   </div>

10

    

11

   <label>Ваш email:</label>

12

   <div class="input" id="cor5">

13

   <input value="" id="posEmail" type="text">

14

   </div>

15

    

16

   <label>Ваше сообщение:</label>

17

   <div class="textarea" id="cor5"><textarea id="posText"></textarea></div>

18

    

19

<button type="button" id="send">Отправить --></button>

20

 

21

</form></div></center>

HTML– это скелет нашей формы. Давайте её немного украсим, добавив CSS-стилей:



01

.sidebarForm {

02

        background: #f6f6f6;

03

        box-shadow: 0 0 5px #ccc;

04

        -webkit-box-shadow: 0 0 5px #ccc;

05

        -moz-box-shadow: 0 0 5px #ccc;

06

        width: 420px;

07

}

08

 

09

#cor5 {

10

        border-radius: 5px;

11

        -moz-border-radius: 5px;

12

        -webkit-border-radius: 5px;

13

}

14

 

15

.sidebarForm h4 {

16

        font: 14px Verdana;

17

        color: #333333;

18

        text-align: left;

19

        padding: 10px 10px 0 10px;

20

}

21

 

22

.sidebarForm label {

23

        font: 12px Verdana;

24

        color: #333;

25

        padding: 10px;

26

}

27

 

28

.sidebarForm .input {

29

        width: 170px;

30

        height: 20px;

31

        overflow: hidden;

32

        background: white;

33

        border: solid 1px #DFE2E5;

34

        margin: 5px 0 10px 10px;

35

        box-shadow: 0 0 5px #ccc;

36

        -webkit-box-shadow: 0 0 5px #ccc;

37

        -moz-box-shadow: 0 0 5px #ccc;

38

}

39

 

40

.sidebarForm .input input {

41

        width: 165px;

42

        height: 26px;

43

        background: white;

44

        margin: -3px 0 0 -5px;

45

        padding: 0px 8px;

46

        border: none;

47

        background: transparent;

48

}

49

 

50

.sidebarForm .textarea {

51

        height: 70px;

52

        width: 320px;

53

        overflow: hidden;

54

        background: white;

55

        border: solid 1px #DFE2E5;

56

        margin: 5px 0 10px 10px;

57

        box-shadow: 0 0 5px #ccc;

58

        -webkit-box-shadow: 0 0 5px #ccc;

59

        -moz-box-shadow: 0 0 5px #ccc;

60

}

61

 

62

.sidebarForm .textarea textarea {

63

        width: 316px;

64

        height: 66px;

65

        background: white;

66

        border: none;

67

        resize:none;

68

}

69

 

70

.sidebarForm button {

71

        border: 2px #ccc solid;

72

        width: 150px;

73

        height: 25px;

74

        font: 12px Verdana;

75

        font-weight: 700;

76

        color: #FFFFFF;

77

        background-color: #cc0000;

78

        padding-bottom: 2px;

79

        margin: 5px 0 15px 135px;

80

}

Информация из нашей формы обратной связи после нажатия на кнопку «Отправить», отправляется на сервер (в обработчик) в фоновом режиме, без перезагрузки страницы в браузере. За это отвечает JavaScript-код:



01

$(document).ready(function() {

02

// Форма обратной связи................................./

03

 

04

var regVr22 = "<div><img style="margin-bottom:-4px;" src="../load.gif" alt="Отправка..." width="16" height="16"><span style="font: 11px Verdana; color:#333; margin-left:6px;">Сообщение обрабатывается...</span></div><br>";

05

 

06

$("#send").click(function(){

07

        $("#loadBar").html(regVr22).show();

08

        var posName = $("#posName").val();

09

        var posEmail = $("#posEmail").val();

10

        var posText = $("#posText").val();

11

        $.ajax({

12

            type: "POST",

13

            url: "../send.php",

14

            data: {"posName": posName, "posEmail": posEmail, "posText": posText},

15

            cache: false,

16

            success: function(response){

17

        var messageResp = "<p style="font-family:Verdana; font-size:11px; color:green; border:1px solid #00CC00; padding:10px; margin:20px; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff;">Спасибо, <strong>";

18

        var resultStat = "!</strong> Ваше сообщение отправлено!</p>";

19

        var oll = (messageResp + posName + resultStat);

20

                if(response == 1){

21

                $("#loadBar").html(oll).fadeIn(3000);

22

                $("#posName").val("");

23

                $("#posEmail").val("");

24

                $("#posText").val("");

25

                } else {

26

        $("#loadBar").html(response).fadeIn(3000); }

27

                                        }

28

        });

29

        return false;

30

});

31

});

В обработчике нам необходимо проверить что отправил посетитель, и если всё в порядке отправить письмо админу сайта. А посетителю сообщить, что его письмо успешно отправлено! Пишем php-код:



01

header("Content-type: text/html; charset=utf-8");

02

//**********************************************

03

if(empty($_POST['js'])){

04

 

05

$log =="";

06

$error="no"; //флаг наличия ошибки

07

 

08

        $posName = addslashes($_POST['posName']);

09

        $posName = htmlspecialchars($posName);

10

        $posName = stripslashes($posName);

11

        $posName = trim($posName);

12

         

13

        $posEmail = addslashes($_POST['posEmail']);

14

        $posEmail = htmlspecialchars($posEmail);

15

        $posEmail = stripslashes($posEmail);

16

        $posEmail = trim($posEmail);

17

 

18

        $posText = addslashes($_POST['posText']);

19

        $posText = htmlspecialchars($posText);

20

        $posText = stripslashes($posText);

21

        $posText = trim($posText);

22

 

23

//Проверка правильность имени   

24

if(!$posName || strlen($posName)>20 || strlen($posName)<3) {

25

$log.="<li>Неправильно заполнено поле \"Ваше имя\" (3-15 символов)!</li>"; $error="yes"; }

26

 

27

//Проверка email адреса

28

function isEmail($posEmail)

29

            {

30

                return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i"

31

                        ,$posEmail));

32

            }

33

             

34

if($posEmail == '')

35

                {

36

    $log .= "<li>Пожалуйста, введите Ваш email!</li>";

37

    $error = "yes";

38

                   

39

                }          

40

 

41

else if(!isEmail($posEmail))

42

                {

43

                    

44

    $log .= "<li>Вы ввели неправильный e-mail. Пожалуйста, исправьте его!</li>";

45

    $error = "yes";

46

                }

47

 

48

//Проверка наличия введенного текста комментария

49

if (empty($posText))

50

{

51

    $log .= "<li>Необходимо указать текст сообщения!</li>";

52

    $error = "yes";

53

}

54

 

55

//Проверка длины текста комментария

56

if(strlen($posText)>1010)

57

{

58

    $log .= "<li>Слишком длинный текст, в вашем распоряжении 1000 символов!</li>";

59

    $error = "yes";

60

}

61

 

62

//Проверка на наличие длинных слов

63

$mas = preg_split("/[\s]+/",$posText);

64

foreach($mas as $index => $val)

65

{

66

  if (strlen($val)>60)

67

  {

68

    $log .= "<li>Слишком длинные слова (более 60 символов) в тексте записи!</li>";

69

    $error = "yes";

70

    break;

71

  }

72

}

73

sleep(2);

74

 

75

//Если нет ошибок отправляем email 

76

if($error=="no")

77

{

78

//Отправка письма админу о новом комментарии

79

$to = "[email protected]";//Ваш e-mail адрес

80

$mes = "Человек по имени $posName отправил Вам сообщение из формы обратной связи Вашего сайта: \n\n$posText";

81

 

82

$from = $posEmail;

83

$sub = '=?utf-8?B?'.base64_encode('Новое сообщение с Вашего сайта').'?=';

84

$headers = 'From: '.$from.'

85

';

86

$headers .= 'MIME-Version: 1.0

87

';

88

$headers .= 'Content-type: text/plain; charset=utf-8

89

';

90

mail($to, $sub, $mes, $headers);

91

echo "1"; //Всё Ok!

92

}

93

else//если ошибки есть

94

{

95

        echo "<p style="font: 13px Verdana;"><font color="#FF3333"><strong>Ошибка !</strong></font></p><ul style="list-style: none; font: 11px Verdana; color:#000; border:1px solid #c00; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff; padding:5px; margin:5px 10px;">".$log."</ul><br>"; //Нельзя отправлять пустые сообщения

96

 

97

}

98

}

В коде представлены необходимые комментарии и пояснения. 





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