Formularz kontaktowy bez przeładowywania
Witajcie. Jak każdy z Was wie, w dzisiejszych czasach każda ceniąca się firma ma stronę internetową. Znajdujemy na ich stronie jakieś promocje, produkty, ofertę. Od tego wszystkiego już się nam miesza w głowie. No dobra, przeglądamy stronę, znajdujemy coś co nas interesuje ale chcemy o coś zapytać. I co wtedy? I tu przychodzą nam formularze kontaktowe. Im łatwiej klient się z nami skontaktuje tym lepiej, więc nasz formularz powinien być jak najbardziej intuicyjny. I tym właśnie zajmiemy się w dzisiejszym poradniku. Serdecznie zapraszam 🙂
Co nam będzie potrzebne:
- Jquery (https://jquery.com/download/)
- Edytor tekstowy
- Pomysł 🙂
- Włączona obsługa PHP Mail na serwerze
Co będziemy robić:
[demo url=”http://demo.wojtek1150.com/AjaxForm/”]DEMO[/demo]
Do dzieła!
Zacznijmy od przygotowania wyglądu strony. W tym celu napiszmy prosty formularz – należy zwrócić uwagę aby nie wrzucać wszystkiego w znacznik <form>, gdyż strona wtedy będzie się odświeżać, a tego nie chcemy 🙂
<fieldset id="contact_form"> <legend>Mój formularz kontaktowy</legend> <div id="result"></div> <label for="name"><span>Imię</span> <input type="text" name="name" id="name" placeholder="Podaj swoje imię" /> </label> <label for="email"><span>Email</span> <input type="email" name="email" id="email" placeholder="Twój adres email" /> </label> <label for="phone"><span>Telefon</span> <input type="text" name="phone" id="phone" placeholder="Numer telefonu" /> </label> <label for="message"><span>Wiadomość</span> <textarea name="message" id="message" placeholder="Wiadomość do przesłania"></textarea> </label> <label><span> </span> <button class="submit_btn" id="submit_btn">Wyślij</button> </label> </fieldset>
Wypadałoby nadać trochę wyglądu naszemu formularzowi. Przygotujmy więc prosty pliczek CSS i dodajmy go:
#contact_form{
width:350px;
padding:20px;
border: 1px solid #DDD;
border-radius: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666666;
background:#FAFAFA;
margin-right: auto;
margin-left: auto;
}
#contact_form legend{
font-size: 15px;
color: #C9C9C9;
}
#contact_form label{
display: block;
margin-bottom:5px;
}
#contact_form label span{
float:left;
width:100px;
color:#666666;
}
#contact_form input{
height: 25px;
border: 1px solid #DBDBDB;
border-radius: 3px;
padding-left: 4px;
color: #666;
width: 230px;
font-family: Arial, Helvetica, sans-serif;
}
#contact_form textarea{
border: 1px solid #DBDBDB;
border-radius: 3px;
padding-left: 4px;
color: #666;
height:100px;
width: 230px;
font-family: Arial, Helvetica, sans-serif;
}
.submit_btn {
border: 1px solid #D8D8D8;
padding: 5px 15px 5px 15px;
color: #8D8D8D;
text-shadow: 1px 1px 1px #FFF;
border-radius: 3px;
background: #F8F8F8;
}
.submit_btn:hover
{
background: #ECECEC;
}
.success{
background: #CFFFF5;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #B9ECCE;
border-radius: 5px;
font-weight: normal;
}
.error{
background: #FFDFDF;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #FFCACA;
border-radius: 5px;
font-weight: normal;
}
Jeśli to czytasz to chyba zdajesz sobie sprawę z tego jak to zrobić. Jeśli nie to wstaw kod powyżej w tag <style></style> Najlepiej w sekcji <head>.
Ok, gdy już mamy przygotowany wygląd naszego formularza pora przejść do opracowania kodu, który zajmie się przetwarzaniem naszego formularza. Zacznijmy od pliku *.php, który będzie odpowiadał za wysyłkę naszej wiadomości:
<?php
if($_POST)
{
$to_Email = "ADRES EMAIL"; //Podaj tu email docelowy
$subject = 'Ah!! My email from Somebody out there...'; //Tutaj temat wiadomości - możesz też wykorzystać pole formularza i pobrać tą wartość od klienta
//Sprawdzamy czy jest to rządanie Ajax, jeśli nie..
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
//Kończymy skrypt wysyłając dane JSON
$output = json_encode(
array(
'type'=>'error',
'text' => 'Rządanie musi przejść przez AJAX'
));
die($output);
}
//Sprawdzamy czy wszystkie pola zostały wysłane. kończymy skrypt jeśli nie (tutaj dodawaj więcej pól, które są wymagane)
if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userPhone"]) || !isset($_POST["userMessage"]))
{
$output = json_encode(array('type'=>'error', 'text' => 'POLA SĄ PUSTE!'));
die($output);
}
//Pobieramy dane z formularza
$user_Name = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
$user_Email = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
$user_Phone = filter_var($_POST["userPhone"], FILTER_SANITIZE_STRING);
$user_Message = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);
//Dodatkowa validacja PHP (tylko dla pól wymaganych)
if(strlen($user_Name)<4) // Wywala błąd jeśli imię ma mniej niż 4 znaki
{
$output = json_encode(array('type'=>'error', 'text' => 'Imię jest za krótkie!'));
die($output);
}
if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //sprawdzamy email
{
$output = json_encode(array('type'=>'error', 'text' => 'Proszę podać poprawny email!'));
die($output);
}
if(!is_numeric($user_Phone)) //sprawdzamy czy telefon jest numeryczny
{
$output = json_encode(array('type'=>'error', 'text' => 'Tylko liczby są dozwolone'));
die($output);
}
if(strlen($user_Message)<5) //Sprawdzamy czy wiadomość ma więcej niż 5 znaków
{
$output = json_encode(array('type'=>'error', 'text' => 'Wiadomość za krótka! Wpisz coś jeszcze.'));
die($output);
}
//Nagłówki do Maila
$headers = 'From: '.$user_Email.'' . "\r\n" .
'Reply-To: '.$user_Email.'' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$sentMail = @mail($to_Email, $subject, $user_Message .' -'.$user_Name, $headers);
if(!$sentMail)
{
$output = json_encode(array('type'=>'error', 'text' => 'Nie można wysłać wiadomości. Sprawdź konfigurację PHP Mail'));
die($output);
}else{
$output = json_encode(array('type'=>'message', 'text' => 'Witaj '.$user_Name .' Dziękuję za wiadomość!'));
die($output);
}
}
?>
Ok, mamy już kod odpowiadający za dodatkowe sprawdzenie poprawności danych oraz wysyłanie wiadomości. Dodatkowo skrypt będzie informował na bieżąco użytkownika o tym jakie błędy popełnił podając dane. Zajmijmy się teraz ostatnią częścią, czyli kodem JavaScript:
$(document).ready(function() {
$("#submit_btn").click(function() {
//Pobieramy dane
var user_name = $('input[name=name]').val();
var user_email = $('input[name=email]').val();
var user_phone = $('input[name=phone]').val();
var user_message = $('textarea[name=message]').val();
//Prosta walidacja (kolorujemy na czerwono pole jeśli jest puste
var proceed = true;
if(user_name==""){
$('input[name=name]').css('border-color','red');
proceed = false;
}
if(user_email==""){
$('input[name=email]').css('border-color','red');
proceed = false;
}
if(user_phone=="") {
$('input[name=phone]').css('border-color','red');
proceed = false;
}
if(user_message=="") {
$('textarea[name=message]').css('border-color','red');
proceed = false;
}
//wszystko w porządku idziemy dalej
if(proceed)
{
//Dane do wysłania
post_data = {'userName':user_name, 'userEmail':user_email, 'userPhone':user_phone, 'userMessage':user_message};
//Przesłanie danych poprzez AJAX
$.post('contact_me.php', post_data, function(response){
//wczytanie danych zwrotnych JSON
if(response.type == 'error')
{
output = '<div class="error">'+response.text+'</div>';
}else{
output = '<div class="success">'+response.text+'</div>';
//resetujemy wszystkie wartości
$('#contact_form input').val('');
$('#contact_form textarea').val('');
}
$("#result").hide().html(output).slideDown();
}, 'json');
}
});
//resetujemy kolorowanie po zaczęciu pisania
$("#contact_form input, #contact_form textarea").keyup(function() {
$("#contact_form input, #contact_form textarea").css('border-color','');
$("#result").slideUp();
});
});
Mając to wszystko uzyskamy taki sam efekt jak na stronie demo. W kodzie są komentarze, więc raczej nie powinniście mieć problemu z dodaniem nowych pól do formularza 🙂
Oczywiście dla leniwych podsyłam wszystko spakowane w paczuszkę tak jak to ma wyglądać:
Czekam na wasze komentarze. Do zobaczenia 🙂
@UPDATE// 17.10.2014
Jeśli potrzebujecie polskich znaków w temacie wiadomości, należy podmienić zmienną $subject na następującą (całą linię)
$subject = "=?UTF-8?B?".base64_encode("Wiadomość od klienta")."?=";
Pamiętajcie o zapisie pliku w formacie UTF-8
@UPDATE// 26.01.2016
Dziękuję Dawidowi oraz Przemkowi (wybacz że dopiero teraz ale nie wiem czemu nie zauważyłem Twojego wpisu) za znalezienie błędu. W miejscu, gdzie jest konfiguracja wysyłania maila brakuje telefonu. Tak więc krótkie info jak to naprawić. Dodatkowo też wrzucam obsługę HTML’a w mailu. Tak więc zamieniamy całą sekcję:
//Nagłówki do Maila $headers = 'From: '.$user_Email.'' . "\r\n" . 'Reply-To: '.$user_Email.'' . "\r\n" . 'X-Mailer: PHP/' . phpversion(); $sentMail = @mail($to_Email, $subject, $user_Message .' -'.$user_Name, $headers);
Na:
//Nagłówki do Maila z polskimi znakami i HTML
$MAIL_headers = "MIME-Version: 1.0\r\n";
$MAIL_headers .= "From: ".$MAIL_from."" . "\r\n";
$MAIL_headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$MAIL_headers .= "Reply-To: ".$MAIL_replyTo."" . "\r\n";
$MAIL_headers .= "X-Mailer: PHP/" . phpversion();
/* Wygląd wiadomości
*
* OD: Imię i nazwisko <mail@example.com>
* Telefon: 123456789
* Wiadomość:
* Treść wiadomości, bla bla bla...
*
*/
$MAIL_message = '<b>Od:</b> ' .$user_Name. ' (' .$user_Email. ') <br>';
$MAIL_message .= '<b>Telefon:</b> ' .$user_Phone;
$MAIL_message .= '<h3>Wiadomość:</h3> ' .$user_Message;
$sentMail = @mail($to_Email, $subject, $MAIL_message, $MAIL_headers);
I to wszystko. Zapraszam też do zapoznania się z nowszą wersją formularza tutaj 🙂