Formularz kontaktowy na stronie WWW jest bardzo przydatną funkcją. Wie to każdy, kto taki formularz posiada. Pokażemy dzisiaj, jak zrobić prosty formularz na swojej stronie.
Zakładam, że sam tworzyłeś/aś swoją stronę i masz podstawową wiedzę z zakresu HTML. Musisz oczywiście posiadać także dostęp do serwera FTP, gdzie znajduje się Twoja strona WWW, gdyż niezbędne będzie umieszczenie na serwerze pewnych plików. Jeżeli masz wszystko co potrzeba możemy przystąpić do pracy.
Kod formularza
Stworzenie samego formularza jest zadaniem dość prostym. Poniżej przedstawiam fragment kodu, który odpowiada za wyświetlenie formularza.
Po umieszczeniu poniższego kodu pojawi nam się na stronie formularz - wprawdzie niezbyt piękny, ale nie o wygląd tutaj chodzi.
<h2>Formularz kontaktowy</h2>
<div id="send_form_status"></div>
<form method="post" action="/send_form.php" id="contact_form">
<div><label for="name">Imię i nazwisko</label></div>
<div><input type="text" name="name" id="name" class="formField" /></div>
<div><label for="phone">Numer telefonu</label></div>
<div><input type="text" name="phone" id="phone" class="formField" /></div>
<div><label for="email">Adres email</label></div>
<div><input type="text" name="email" id="email" class="formField" /></div>
<div><label for="message">Treść wiadomości</label></div>
<div><textarea name="message" id="message" class="formField"></textarea></div>
<div><button id="sendBtn">Wyślij</button></div>
</form>
Kod javascript
Ponieważ nie chcemy, by w czasie wysyłania formularza nastąpiło przeładowanie strony wykorzystamy w tym celu popularną na wielu stronach WWW bibliotekę jQuery i asynchroniczne wysyłanie formularza.
W tym celu w kodzie źródłowym strony z formularzem w części <head> musimy wstawić następujący kod javascript:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("html").on("submit","#contact_form",function(e){
e.preventDefault();
$("#send_form_status").html('').hide();
var data=$("#contact_form").serialize();
$.post("/send_form.php",data,function(res){
$("#send_form_status").html(res.msg).show();
if(res.status==1){
$("#contact_form")[0].reset();
}
});
});
});
</script>
Jeżeli na Twoje stronie jest wykorzystywana biblioteka jQuery pierwszą linię kodu możesz pominąć. Musi to jednak być wersja jQuery co najmniej 1.7. W naszym przykładzie wykorzystujemy wersję 1.11.2
Kod PHP
Ostatnim krokiem będzie umieszczenie na serwerze w katalogu naszej strony pliku o nazwie send_form.php, do którego nastąpi przesłanie danych z formularza po kliknięciu w przycisk wyślij.
Kod jaki musimy umieścić w pliku send_form.php jest następujący:
<?php
header("content-type: application/json; charset=utf-8");
$name=isset($_POST['name']) ? $_POST['name'] : "";
$email=isset($_POST['email']) ? $_POST['email'] : "";
$phone=isset($_POST['phone']) ? $_POST['phone'] : "";
$message=isset($_POST['message']) ? $_POST['message'] : "";
if($name && $email && $phone && $message){ $headers = "MIME-Version: 1.0\r\nContent-type: text/plain; charset=utf-8\r\nContent-Transfer-Encoding: 8bit"; $message_body="Formularz kontaktowy wysłany ze strony www.example.com\n";
$message_body.="Imię i nazwisko: $name\n";
$message_body.="Adres email: $email\n";
$message_body.="Numer telefonu: $phone\n\n";
$message_body.=$message;
if(mail("email@adresata","Formularz kontaktowy",$message_body,$headers)){
$json=array("status"=>1,"msg"=>"<p class='status_ok'>Twój formularz został pomyślnie wysłany.</p>");
}
else{
$json=array("status"=>0,"msg"=>"<p class='status_err'>Wystąpił problem z wysłaniem formularza.</p>");
}
}
else{
$json=array("status"=>0,"msg"=>"<p class='status_err'>Proszę wypełnić wszystkie pola przed wysłaniem.</p>");
}
echo json_encode($json);
exit;
?>
W kodzie pliku send_form.php musimy zmienić adres "email@adresata" na adres email na który chcemy, by wysyłał się formularz.
Style CSS
Teraz nadajmy naszemu formularzowi nieco bardziej atrakcyjny wygląd. W tym celu wystarczy do pliku stylów CSS dodać kilka linijek poniższego kodu:
.formField{font: inherit; border: 1px solid #ccc; border-radius: 3px; margin: 3px 0 10px 0; padding: 3px 0}
textarea.formField{width: 300px; height: 70px}
#sendBtn{cursor:pointer;background: #ccc; background: linear-gradient(#ddd 0, #eee 100%); border: 1px solid #ccc; line-height: 32px; font-size: 14px;padding: 0 25px; border-radius: 3px}
#send_form_status{border: 1px dashed #ccc;display: none; padding: 0 10px; margin: 10px 0}
.status_ok{color: #060}
.status_err{color: #F00};
Jak to wszystko działa?
W kodzie javascript nadpisujemy domyślą akcję dla wysłania formularza
$("html").on("submit","#contact_form",function(e){
e.preventDefault();
po to, by w momencie gdy ktoś kliknie przycisk "Wyślij" nie nastąpiło przeładowanie strony i otwarcie strony send_form.php, tylko pobranie zawartości wszystkich pól i wysłanie ich w tle do skryptu send_form.php po stronie serwera.
var data=$("#contact_form").serialize();
$.post("/send_form.php",data,function(res){
Następnie skrypt czeka na odpowiedź serwera, która wysyłana jest jako obiekt JSON. Po otrzymaniu odpowiedzi wyświetlamy w polu "send_form_status" komunikat przesłany przez skrypt php (res.message) oraz jeżeli własność status ma wartość 1 czyścimy formularz:
if(res.status==1){
$("#contact_form")[0].reset();
}
Co się dzieje po stronie serwera. Najpierw ustawiamy prawidłowe nagłówki, tak aby tak aby odpowiedź generowana przez skrypt była właściwie interpretowana:
header("Content-type: application/json; charset=utf-8");
Następnie sprawdzamy, czy wszystkie pola zostały wypełnione i jeśli tak przygotowujemy wiadomość email do wysłania i wysyłamy ją funkcją mail:
mail("email@adresata","Formularz kontaktowy",$message_body)
Jeśli wiadomość zostanie wysłana pomyślnie tworzymy tablicę $json zawierającą odpowiedni status i komunikat. W przypadku niepowodzenia lub gdy użytkownik nie wypełnił wszystkich danych również ustawiamy tablicę $json tym razem ze statusem 0.
Na końcu z tablicy $json generujemy obiekt JSON i wyświetlamy go funkcja echo.
Podsumowanie
Tak skonstruowany formularz jest odporny na odświeżanie i działa bardzo szybko. Poza tym możemy całkowicie uniezależnić kod związany z przetwarzaniem formularza od kodu strony. Dzięki temu formularz taki można zastosować z powodzeniem na stronie zbudowanej całkowicie w oparciu o HTML. Obsługa PHP jest jednak wymagana do samego wysłania formularza.
Pola formularza można łatwo modyfikować, a w kodzie php możemy określić, które pola mają być wymagane. Możemy dodatkowo przeprowadzić walidację poszczególnych danych - np. sprawdzić poprawność wprowadzonego adresu email, czy numeru telefonu. Możliwości w tym zakresie są nieograniczone.
