Open in app

Sign in

Write

Sign in

Formularz kontaktowy bez przeładowywania

Wojciech Parys
Wojtek1150.
Published in
5 min readJul 17, 2014

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:

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>&nbsp;</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ć:[wpdm_file id=9]Czekam na wasze komentarze. Do zobaczenia :)@UPDATE// 17.10.2014Jeś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.2016Dzię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 :)
Kodowanie
Poradniki
Ajax
Contact Form
Formularz

--

--

Wojciech Parys
Wojtek1150.

Written by Wojciech Parys

25 Followers
Editor for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams