DarkGhost

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

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

С представленного рисунка видно, что она должна уметь определить заполнение полей и если поля заполнены – данные отправить на почту.

Код формы обратной связи

Как и полагается, сначала создаем HTML код нашей формы связи

<





form





 





method





=





"POST"





 





id





=





"feedback-form"





>






Как к Вам обращаться:






<





input





 





type





=





"text"





 





name





=





"nameFF"





 





required





 





placeholder





=





"фамилия имя отчество"





 






x-autocompletetype





=





"name"





>






Email для связи:






<





input





 





type





=





"email"





 





name





=





"contactFF"





 





required





 





placeholder





=





"адрес электронной почты"





 






x-autocompletetype





=





"email"





>






Ваше сообщение:






<





textarea





 





name





=





"messageFF"





 





required





 





rows





=





"5"





>











</





textarea





>












<





input





 





type





=





"submit"





 





value





=





"отправить"





>












</





form





>

Обратите внимание на required – этот атрибут будет отвечать и отвечает за обязательное заполнение поля. И так, теперь оформление формы связи

<style>






#feedback-form {






  max-width: 





400





px;
  padding: 





2





%;
  border-radius: 





3





px;
  background: 





#f1f1f1;






}






#feedback-form [required] {






  width: 





100





%;
  box-sizing: border-box;
  margin: 





2





px 





0





 





2





% 





0





;
  padding: 





2





%;
  border: 





1





px solid rgba(





0





,





0





,





0





,.





1





);
  border-radius: 





3





px;
  box-shadow: 





0





 





1





px 





2





px -





1





px rgba(





0





,





0





,





0





,.





2





) inset, 





0





 





0





 transparent;
}






#feedback-form [required]:hover {






  border-color: 





#7eb4ea;






  box-shadow: 





0





 





1





px 





2





px -





1





px rgba(





0





,





0





,





0





,.





2





) inset, 





0





 





0





 transparent;
}






#feedback-form [required]:focus {






  outline: none;
  border-color: 





#7eb4ea;






  box-shadow: 





0





 





1





px 





2





px -





1





px rgba(





0





,





0





,





0





,.





2





) inset, 





0





 





0





 





4





px rgba(





35





,





146





,





243





,.





5





);
  transition: .





2





s linear;
}






#feedback-form [type="submit"] {






  padding: 





2





%;
  border: none;
  border-radius: 





3





px;
  box-shadow: 





0





 





0





 





0





 





1





px rgba(





0





,





0





,





0





,.





2





) inset;
  background: 





#669acc;






  color: 





#fff;






}






#feedback-form [type="submit"]:hover {






  background: 





#5c90c2;






}






#feedback-form [type="submit"]:focus {






  box-shadow: 





0





 





1





px 





1





px 





#fff, inset 0 1px 2px rgba(0,0,0,.8), inset 0 -1px 0 rgba(0,0,0,.05);






}
</style>

Ну вот, форму создали, внешний вид воспроизвели. Самое время перейти к самому главному – “научить проверять поля” и отправлять данные на почту без перезагрузки страницы. Реализовать это можно при помощи JavaScript.

<





script





>












document.getElementById(





'feedback-form'





).addEventListener(





'submit'





, 











function











(evt)





{






  





var





 http = 





new





 XMLHttpRequest(), f = 





this





;
  evt.preventDefault();
  http.open(





"POST"





, 





"contacts.php"





, 





true





);
  http.setRequestHeader(





"Content-Type"





, 





"application/x-www-form-urlencoded"





);
  http.send(





"nameFF="





 + f.nameFF.value + 





"&contactFF="





 
+ f.contactFF.value + 





"&messageFF="





 + f.messageFF.value);
  http.onreadystatechange = 











function











()





 {






    





if





 (http.readyState == 





4





 && http.status == 





200





) {
      alert(http.responseText + 





', Ваше сообщение получено.\nНаши 
специалисты ответят Вам в течении 2-х дней.\nБлагодарим за 
интерес к нашей фирме!'





);    
      f.messageFF.removeAttribute(





'value'





); 





// очистить поле сообщения (две строки)






      f.messageFF.value=





''





;
    }
  }
  http.onerror = 











function











()





 {






    alert(





'Извините, данные не были переданы'





);
  }
}, 





false





);












</





script





>

В JavaScript -е не забыли указать переменные nameFF, contactFF и messageFF ведь именно они содержат введенную информацию и именно содержание этих полей необходимо отправить на электронную почту.
Для того чтобы обработать значение полей и отправить их содержание адресату необходимо создать файл-обработчик, его название и место расположение указали в предыдущем коде (contacts.php).

Файл contacts.php
<?






if





 (array_key_exists(





'messageFF'





, 





$_POST





)) {
   





$to





 = 





'свой@yandex.ru'





;
   





$subject





 = 





'Заполнена контактная форма с '





.





$_SERVER





[





'HTTP_REFERER'





];
   





$subject





 = 





"=?utf-8?b?"





. base64_encode(





$subject





) .





"?="





;
   





$message





 = 





"Имя: "





.





$_POST





[





'nameFF'





].





"\nEmail: "





.





$_POST






[





'contactFF'





].





"\nIP: "





.





$_SERVER





[





'REMOTE_ADDR'





].





"\nСообщение: "





.





$_POST





[





'messageFF'





];
   





$headers





 = 





'Content-type: text/plain; charset="utf-8'





;
   





$headers





 .= 





"MIME-Version: 1.0\r\n"





;
   





$headers





 .= 





"Date: "





. date(





'D, d M Y h:i:s O'





) .





"\r\n"





;
   mail(





$to





, 





$subject





, 





$message





, 





$headers





);
   





echo





 





$_POST





[





'nameFF'





];
}






?>

Не забыли указать свой адрес электронной почты?

$to





 = 'свой@yandex.ru';

Проверяем. Если письмо не приходит – может оно попало в папку Спам или же если и там письма нет, проверьте функцию отправки почты .
И так, мы создали форму связи, которая:
-проверка заполнение полей осуществляется не на стороне Хостинга;
-отправляет информацию на электронную почту без перезагрузки страницы;
-при нажатии клавиши F5 (обновить страницу) форма не будет отправлять повторно сообщение;
-файл-обработчик (contacts.php) вынесен в отдельный файл;
-не работает в IE8 и ниже – требует доработки.

Как заставить форму работать в IE8?

Чтобы форма связи работала в IE8 и ниже необходимо доработать, дополнить представленный код аналогами addEventListener(), preventDefault() и XMLHttpRequest или же использовать вариант без JavaScript

<?
if (isset ($_POST['messageFF'])) {
  mail ("свой@yandex.ru",
        "заполнена контактная форма с ".$_SERVER['HTTP_REFERER'],
        "Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nСообщение: 
".$_POST['messageFF']);
  echo ('<p style="color: green">Ваше сообщение получено, спасибо!</p>');
}
?>













<





form





 





method





=





"POST"





 





id





=





"feedback-form"





>






Как к Вам обращаться:






<





input





 





type





=





"text"





 





name





=





"nameFF"





 





required





 





placeholder





=





"фамилия имя отчество"





 






x-autocompletetype





=





"name"





>






Email для связи:






<





input





 





type





=





"email"





 





name





=





"contactFF"





 





required





 





placeholder





=





"адрес электронной почты"





 






x-autocompletetype





=





"email"





>






Ваше сообщение:






<





textarea





 





name





=





"messageFF"





 





required





 





rows





=





"5"





>











</





textarea





>












<





input





 





type





=





"submit"





 





value





=





"отправить"





>












</





form





>

Представленный вариант решение будет:
-повторно отправлять информацию при обновлении страницы;
-отправка сообщения будет сопровождаться перегрузкой страницы.

В завершении еще необходимо добавить, что если есть желание добавить(удалить) дополнительное поле – не проблема. Для этого вносим изменения в HTML, JavaScript и PHP код, как на пример, осуществлено для contactFF.