Jak stworzyć formularz na stronę WWW


Ilość ocen: 9 Średnia ocena: 4.56/5

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.

Wpis w kategorii: Blog
Opublikowane przez:

Lista komentarzy

pit
Hej!
Jestem początkujący w tworzeniu stron, zastosowałem się do wszystkich rad, ale po kliknięciu "wyślij" otwiera się zawartość pliku .php i mail się nie wysyła. Co może być nie tak?
Tomek
Przyczyną jest najprawdopodobniej brak obsługi języka PHP na serwerze, z którego korzystasz.
Cała strona WWW może być wyłącznie w html'u, jednak do poprawnego działania formularza wymagana jest obsługa PHP na serwerze.
Jan
Witaj.

Skorzystałem z formularza i wszystko działa ale jest jeden mankament. Mianowicie wiadomość jest wpisana w formularzu z polskimi znakami ale przesłana zostaje bez znaków polskich. Zamiast ż, ą, ć itp. są dziwne znaki.
Tomek
Spróbuj w skrypcie wysyłającym wiadomość zdefiniować dodatkowe nagłówki w następujący sposób:

$headers = "MIME-Version: 1.0\r\nContent-type: text/plain; charset=utf-8\r\nContent-Transfer-Encoding: 8bit";

Wysyłając wiadomość użyj dodatkowego parametru:
mail("email@adresata","Formularz kontaktowy",$message_body,$headers);
Jan
Zmiany te dokonać w pliku send_form.php?

Mógłbym otrzymać wskazówki gdzie wstawić te dwa parametry. Definicję nagłowka zapewne zaraz po "
Tomek
Tak, zmian należy dokonać w pliku send_form.php Zmodyfikowałem treść artykułu by pokazać jak dokładnie ma to wyglądać.
pit
Dzięki za odpowiedź. Okazuje się, że serwer nie wczytuje mi php w ogóle, mimo że mam to w usłudze, więc zgłosiłem się do obsługi klienta i zobaczymy, co z tego będzie.
Jan
Zmieniłem plik send_form.php według wytycznych ale niestety teraz wiadomość dochodzi bez treści a zamiast niej jest wypisany błąd:"Wystąpił błąd #1678."
Tomek
W komentarzu, który dałem wcześniej był błąd więc wstaw do pliku send_form.php całą zawartość z treści artykułu podmieniając oczywiście adres email adresata.
Skrypt na pewno działa, bo go przed chwilą sprawdziłem więc jeśli nadal będzie ten sam błąd to musi to być coś specyficznego dla serwera.
pit
W moim przypadku zawaliłem ponoć z kodowaniem, bo dałem w unicode. Okaże się, czy jak zmienię kodowanie, to coś ruszy.
Ania
Wszystko działa jednak po wysłaniu maila pojawia mi się następujący komunikat: {"status":1,"msg":null}
Co robię nie tak?
Tomek
Napisz adres strony z formularzem, to postaram się pomóc.
Ania
www.rozmaici.org/koncert.html
Tomek
Po pierwsze popraw kod javascript, gdyż wyświetla on Ci się na górze strony, a nie powinien - opuściłaś otwierający tag <script> na początku. Poza tym sprawdź czy przypadkiem czegoś nie opuściłaś w kodzie PHP w pliku send_form.php
Filo
witam jestem poczatkujacy ale u mnie wszystko dziala, tresc poprawnie wyslana na maila jednak po kliknieciu wyslij nie potwierdza i nie czysci formularza tylko jest zaladowana strona send_form.php i nic sie nie dzieje.
Tomek
Filo - na stronie ładujesz już jQuery więc linia kodu JavaScript z mojego przykładu, która ładuje bibliotekę jQuery z ajax.googleapis.com jest Ci niepotrzebna.

Natomiast w moim kodzie był błąd, który chyba kilka osób skopiowało, polegający na tym, że brakowało na początku kodu JavaScript, zaraz po załadowaniu biblioteki jQuery, otwierającego tagu <script>.

Dopisz więc brakujący tag <script> na początku kodu i przenieś cały fragment kodu do sekcji <head> - bezpośrednio przed tagiem zamykającym </head> bo teraz Twój kod jest wstawiony w treści paragrafu i dlatego nie jest w ogóle wykonywany tylko ładuje Ci plik send_form.php
Mariusz
Witam.
Za nic na świecie nie potrafię zrobić na stronie formularza kontaktowego :(.
Czy ktoś by mógł pomóc?
Bardzo pilnie :)
Renata
Umieściłam formularz na stronie internetowej, ale gdy chcę go wysłać pojawia się błąd 403 "Zapytanie odrzucone przez serwer. Nie masz dostępu do /send_form.php na tym serwerze". Na skrzynkę e-mailową nie dochodzi żadna wiadomość. Co teraz robić?
Tomek
Renata - musisz jeszcze stworzyć plik send_form.php zgodnie z treścią artykułu powyżej w części "Kod PHP".
Plik musi znajdować się w głównym katalogu strony WWW. Jeśli nie masz dostępu do serwera, lub Twój serwer WWW nie obsługuje PHP to niestety formularz nie zadziała :(
Renata
Dziękuję bardzo, za odpowiedź. Cieszę się, że w internecie są Takie strony, dzięki którym można się czegoś dowiedzieć. Będę dalej próbować z tym serwerem. Pozdrawiam :)
Domin
Witam,
Na wstępie dzięki bardzo za fajny tutorial. Wszystko działa na stronie za wyjątkiem komunikatów, tzn. treść jest wyświetlana natomiast nie zmieniają się kolory i brak odstępów. Formulrz umieściłem pod adresem: http://gremus.pl/test/form.html
Będę wdzięczny za pomoc. Pozdrawiam
Tomek
Hej Domin. Dzięki za info. Poradnik był tyle razy zmieniany i poprawiany, że faktycznie zapomniałem o kilku szczegółach.
Poprawiłem kod skryptu send-form.php by przy komunikatach była nadawana odpowiednia klasa stylów CSS.
Wprowadź poprawki i powinno być ok. Ewentualnie dopasuj wedle uznania style dla klas status_ok i status_err
Madzia
Umieściłam formularz na stronie. Niestety po wypełnieniu i wciśnięciu wyślij pojawia się komunikat:
"Wystąpił problem z wysłaniem formularza".
Poprawiałam i zmieniałam różne parametry i cały czas to samo.
Bardzo proszę o pomoc.
Pozdrawiam
Tomek
Jeśli otrzymujesz taki komunikat, to znaczy, że skrypt nie może wysłać wiadomości.
Utwórz na serwerze dowolny plik php z takim kodem:
<?php
error_reporting(6143);
ini_set("display_errors","on");
mail("twój@email","Test","Test");
?>

Następnie uruchom ten skrypt w przeglądarce i zobacz czy wiadomość, się wyśle, czy będą jakieś błędy.
Madzia
Otrzymałam taki komunikat:
Warning: mail() has been disabled for security reasons in /home/r2776414/public_html/michaldachy.pl/send_form2.php on line 4
Tomek
Z tego wynika, że funkcja mail() na Twoim serwerze została zablokowana. Czy korzystasz może z darmowego hostingu?
Madzia
Mam wykupiony roczny hosting na stronie www.rejestracjadomen.pl
Tomek
W takim razie napisz do supportu w Twojej firmie hostingowej z zapytaniem dlaczego funkcja mail() w PHP na Twoim serwerze jest zablokowana i poproś o jej odblokowanie. Gdy funkcja mail() będzie już działać formularz powinien również działać poprawnie.
Madzia
Dziękuję bardzo za pomoc. Tak zrobię.
rogaal
Witam, bardzo dziękuję za udostępniony kod, chciałbym napisać, że wszystko działa super, ale jest mały problem. W otrzymywanych wiadomościach nie wyświetlają się polskie znaki tylko znaki zapytania i literka ó. Bardzo proszę o pomoc. Dziękuję i pozdrawiam.
Tomek
@rogaal - prawdopodobnie Twoja strona WWW działa w innym kodowaniu. Spróbuj podmienić w skrypcie PHP wysyłającym wiadomośćciągi znaków utf-8 na iso-8859-2 i sprawdź, czy to pomoże.
rogaal
Witam,
jak zmienię kodowanie w send_form.php na iso to formularz przestaje wysyłac wiadomości, zminiam na utf działa, ale bez polskich znaków.
P.S. Kodowanie na stronie głównej i podstronach mam ustawione w sekcji head na utf-8
Tomek
Bardzo proszę o podanie adresu strony z formularzem.
rogaal
http://rogaal.prv.pl/index.html
Tomek
Proszę ustawić na chwilę nasz adres email biuro@remnet.pl w formularzu i wysłać wiadomość z polskimi znakami, żebym mógł sprawdzić nagłówki w wiadomości.
rogaal
wysłane
Tomek
W nagłówkach wysłanej wiadomości jest nadpisywane kodowanie:
Content-Type: text/plain; charset="iso-8859-1"

Przykro mi, ale nie wiem jak pomóc w takiej sytuacji, ale nie jest to kwestią samego skryptu tylko hostingu, na którym działa.
rogaal
Dziękuję za pomoc, ten hosting i tak nie jest docelowym , a dzięki Pana zaangażowaniu wiem, że problem nie leży po mojej stronie i nie tracę czasu i reszty zdrowia na szukanie rozwiązania. Dziękuję :)
sallad
Witam. Mam mały problem z formularzem, ponieważ po wysłaniu formularza nie wyświetla mi czy został wysłany czy też nie: http://mrleather.besaba.com/wiadomosc.htm

Inna sprawa to jak wyłączyć wymaganie pola z numerem telefonu?
Tomek
@sallad - w kodzie Twojej strony jest o jeden tag script za dużo.
Masz:
<script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

A powinno być:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
sallad
Nadal to samo. Wcześniej chociaż po kliknięciu wyślij wyświetlała się pusta strona. Teraz dochodzą do mnie wiadomości na maila ale po kliknięciu wyślij nic się nie wyświetla i wygląda jakby nic się nie zadziało.
Tomek
Wstaw cały kod javascript z artykułu z części "Kod javascript" jeszcze raz na stronę.
Zrobiłem tam jedną zmianę.
sallad
Niestety nie udało się. Może dlatego że robiłem bez pliku CSS ?
Tomek
Jest już lepiej, bo po kliknięciu "Wyślij" skrypt javascript pobiera dane z formularza i przesyła ja do skryptu php, tylko ten nie zwraca żadnej odpowiedzi.
Czy w kodzie skryptu PHP były wprowadzane zmiany?
Tomek
@sallad - możesz w kodzie php skryptu send_form.php dopisać na początku te dwie liniki (w drugiej linii zaraz za <?php)

error_reporting(6143);
ini_set("display_errors","on");

To pozwoli zdiagnozować problem ze skryptem.
sallad
Dopisałem. Zaznaczam, że nie jestem masterem od stron. Raczej robię wszystko na czuja XD
Tomek
Coś jest nie tak. Skrypt nie generuje żadnych błędów, ale nie zwraca również żadnych danych.
Na pewno w skrypcie send_form.php znajduje się na końcu linijka:
echo json_encode($json);

I czy formularz się teraz wysyła?
sallad
Ta linijka znajduje się w php. Na maila wszystko mi dochodzi. Od Pana także.
Tomek
Trudno mi w takim razie powiedzieć, co jest nie tak. Któraś z funkcji PHP musi nie działać poprawnie, ale bez dostępu do serwera nie jestem w stanie tego zdiagnozować. Przykro mi, że nie mogę pomóc.
sallad
Rozumiem. Ale dzięki :)
lapkow
Wszystko pięknie działa. Dodałem trochę pól, tak że formularz jest dłuższy i wszelkie komunikaty po kliknięciu w przycisk WYŚLIJ nie są widoczne bo umieszczane są na górze strony. Użytkownik ich nie widzi, a nie każdy się domyśli, żeby przewinąć stronę do góry. Da się to jakoś poprawić?
Tomek
Wystarczy przed wyświetleniem komunikatu dodać następującą linijkę kodu javascript:
$(document).scrollTop($("#send_form_status").offset().top);

Spowoduje to przewinięcie strony do początku komunikatu. W razie potrzeby można dodać lub odjąć jakąś wartość w celu lepszego dopasowania, np:
$(document).scrollTop($("#send_form_status").offset().top -50);
lapkow
Dzięki bardzo :) Jeszcze jedno: czy byłoby możliwe jakieś zaznaczenie błędnie wypełnionych lub niewypełnionych pól? Np. użytkownik nie wypełnił jednego pola, kliknął przycisk WYŚLIJ i skrypt odsyła go do tego właśnie pola zaznaczając je jednocześnie, np. na czerwono czy coś?

lapkow
Jeszcze jedno. Przepraszam, że kolejny raz. Jak wspomniałem wcześniej rozbudowałem skrypt w taki sposób, że oprócz standardowych danych (telefon, nazwisko, mail itd.) formularz ma kilka dodatkowych pól, w których użytkownik odpowiada na konkretne pytania. Czy dałoby się zmodyfikować skrypt (nie potrafię tego, moja znajomość php jest taka sobie) w taki sposób, że odbiorca wysłanej wiadomości dostaje w mailu nie tylko odpowiedzi, ale również pytania postawione w formularzu? Wiadomość wyglądałaby tak:
Dane nadawcy
Pytanie 1
Odpowiedź 1
Pytanie 2
Odpowiedź 2 itd.
Tomek
Wszystko da radę zrobić, ale trzeba trochę pogłówkować samodzielnie :)
adamus
Witam,
Przyznam, że w javascript jestem raczej słaby. Czy mógłbyś napisać, gdzie dokładnie wstawić ten kod, który ma przewijać stronę do góry, aby komunikat był widoczny.

Pytanie od lapkow i Twoja odpowiedź:
Wystarczy przed wyświetleniem komunikatu dodać następującą linijkę kodu javascript:
$(document).scrollTop($("#send_form_status").offset().top);
Tomek
Musisz to wstawić bezpośrednio przed linią:
$("#send_form_status").html(res.msg).show();
Piotr
Nie jestem oblatany w PHP czy JS ale po próbie wysłania formularza pojawia się komunikat "Proszę wypełnić wszystkie pola przed wysłaniem." , mimo że wszystkie pola są wypełnione. Przeczytałem komenty, sprawdziłem kod PHP, JS i HTML i wszystko jest ok. Z czego to może wynikać? Jakieś pomysły?
Tomek
Podaj stronę to będzie prościej sprawdzić co jest nie tak.
Piotr
Poradziłem sobie, dzięki. Problem z JS na stronie.
max
czesc! wprowadzilem twoj kod na strone ale nie chce mi wyslac wiadomosci. Wyskakuje blad zeby sprawdzic poprawnosc danych mimo ze sa wpisywane wszystkie
Tomek
Cześć. Najszybciej będę mógł pomóc jeśli podasz adres strony z formularzem.
max
Wszystko jednak gra, musiałem spojrzeć na ten kod wypoczętym okiem. Diva sent_form_status zamknąłem za formularzem i /form a powinien być zamknięty tak jak u Ciebie. Wiadomości są wysyłane tak jak należy jednak są bez polskich znaków. Mimo ze w *.php kodowanie jest ustawione utf-8. jak to naprawić?
Tomek
Albo masz w nieprawidłowym kodowaniu zapisywane pliki (jakiego edytora używasz?) albo Twój serwer zmienia kodowanie podczas wysyłania.
max
używam brackets, korzystam narazie z darmowego testowego serwera prv.pl. Strona na serwerze jest wyświetlana normalnie z polskimi znakami. No nic spróbuję coś wykombinować
Tomek
Myślę, że to kwestia hostingu. Ktoś już pisał w komentarzach o tym samym problemie na prv.pl
W nagłówku wiadomości było nadpisywane kodowanie na iso-8859-1 Więc obawiam się, że na tym serwerze to nie zadziała, albo proszę się zwrócić do jakiegoś admina z zapytaniem o to jak ustawić kodowanie w wysyłanej przez PHP wiadomości.
Monika
Witam,
Chciałabym poradzić się, gdyż jestem żółtodziobem jeśli chodzi o tworzenie stron, a mam problem tego typu:
Zrobiłam wszystko wg instrukcji powyżej. Wszystko ładnie się wyświetla, po uzupełnieniu pól i wysłaniu wiadomości wyświetla się komunikat ze Formularz został wysłany. Jednak wiadomości nie dochodzą na wskazaną skrzynkę pocztową( pomimo zmiany w kodzie w send_form.php adresu mailowego). Proszę o wskazówkę co może być nie tak.
http://monika-szpak.net23.net/?m=2
Tomek
Cześć Monika!
Sprawdź proszę, czy adres email adresata w skrypcie jest wpisany prawidłowo. Może się też tak zdarzyć, że wiadomość z formularza trafia do spamu w poczcie więc sprawdź folder SPAM. Można też sprawdzić skrypt z innym adresem email.
Mimo iż konto jest na darmowym hostingu funkcja mail() jest obsługiwana i wiadomości się wysyłają (sprawdziłem to).
Monika
Dziękuję bardzo za tak szybką odpowiedź :)
Jeśli chodzi o SPAM to już sama na to wcześniej wpadłam, ale niestety tam też się nie pojawia wiadomość z formularza.
Adres maila także jest poprawny - sprawdzałam go kilka razy zanim napisałam tu wiadomość. Po wpisaniu innego adresu mailowego, także nic nie przyszło.
Nie mam pomysłu dlaczego to nie przychodzi :(
Tomek
Ja niestety też nie wiem, gdzie jest problem. Nawet sprawdziłem całość jeszcze raz, gdyż mam na tym hostingu jakieś darmowe konto i wiadomość do mnie dochodzi więc obawiam się, że bez dostępu do konta niewiele mogę pomóc.
kasia
genialany formularz! jako osoba poczatkujaca szukalam czego prostego, funkcjonalnego bez tysiaca walidacji które czesto denerwuja odwiedzjacego strone, a ten formularz sprawdza sie swietnie!
Mariusz
Próbuję skorzystać z tego formularza, robię wszystko wg wskazówek, ale n ie działa mi przycisk "wyślij". Co robię źle?
Tomek
Mariusz - podaj adres strony, na której jest formularz. Jeżeli korzystasz z jakiegoś darmowego hostingu to może być problem z obsługą php lub funkcji mail.
Mariusz
Chodzi mi o tę stronę:
http://naklejkowyswiat.pl/kontakt2.html

Próbuję rozkręcić coś takiego, ale nie mam kompletnie kasy na kogoś kto by mi zrobił stronę, więc kaleczę takiego potworka własnymi siłami, choć o stronach też za wiele nie wiem - jestem grafikiem. Na razie się wszystko sypie. Byłbym dozgonnie wdzięczny za pomoc w odgadnięciu co zawaliłem w tym formularzu. Z góry dzięki.
Tomek
Zwróć uwagę, że na górze strony pokazuje się fragment kodu javascript i kodu php więc sprawdź jeszcze raz dokładnie, czy gdzieś nie wstawiłeś czegoś za dużo.
Mariusz
Działa! Dzięki Mistrzu! Okazało się, że to wina skrzynek Roundcube i SquirlMail oferowanych przez serwer. Wpisałem skrzynkę na onecie i przyszło bez problemu.
Tomek
Cieszę się, że się udało! Widzę też, że zniknął kod na stronie, który się wcześniej pokazywał na górze.
Mariusz
A dałoby się jakoś tak zrobić, żeby po wysłaniu był jakiś komunikat, że wiadomość została wysłana, bo teraz tylko wciskam "wyślij", dociera do mnie, ale jak ktoś nie będzie wiedział to wciśnie kilkanaście razy i będzie myślał, że się nie wysłało?
Tomek
Dalej w kodzie strony są zbędne linie kodu PHP:
To te dwie, które zaczynają się od:
header...
mail...
Natomiast podejrzewam, że pliku send_form.php czegoś brakuje, bo po wysłaniu wiadomości plik generuje nieprawidłową odpowiedź. Więc usuń te niepoprawne linie kodu php z kodu javascript i sprawdź plik send_form.php, czy jego zawartość jest taka, jak w artykule.
Jedyne co zmieniasz to wartość dla "email@adresata". Reszta zostaje bez zmian i nie może być w tym pliku żadnego dodatkowego kodu html.
Mariusz
Usunąłem te dwie linijki i teraz w ogole wiadomość nie przychodzi :(
W php mam tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dokument bez tytułu</title>
</head>
<?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.0rnContent-type: text/plain; charset=utf-8rnContent-Transfer-Encoding: 8bit";
$message_body="Formularz kontaktowy wysłany ze strony www.example.comn";
$message_body.="Imię i nazwisko: $namen";
$message_body.="Adres email: $emailn";
$message_body.="Numer telefonu: $phonenn";
$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;
?>
</html>
Mariusz
jeszcze ten meil teraz zmieniam z adresata
Tomek
W kodzie pliku send_form.php ma być tylko kod php.
Czyli ma zostać tylko to, co jest pomiędzy znacznikami <php i końcowym znacznikiem ?>
Pamiętaj by zmienić w tym pliku email@adresata na Twój adres email, na który ma się wysyłać wiadomość.
Mariusz
Dzięki Mistrzu! Teraz działa już w pełni! Bez Ciebie bym tu chyba oszalał :) Dzięki za OLBRZYMIĄ POMOC!!! Pozdrawiam.
Tomek
Tak, teraz wszystko już działa, jak powinno i w kodzie jest okej.
Jeszcze jakbyś dodał style (w artykule w sekcji Style CSS) do pliku /style.css na swojej stronie to byłoby super.
Mariusz
Spróbuję z tym jeszcze powalczyć, ale grunt, że działa :) Dzięki raz jeszcze!
Mariusz
Jeszcze jeden mały problem. Ilekroć wchodzę na stronę w zakładkę "kontakt" to automatycznie przychodzi mi na meil:
Imie i nazwisko:
Email:
Wiadomość:

Da się jakoś to obejść? Na razie nikt na stronkę nie wchodzi, więc to nie jest jakiś problem, ale jak zaczną wchodzić to mnie takie puste meile zbombardują.
Mariusz
Już wiem w czym mam problem. Odświeżenie którejkolwiek z innych zakładek poza "Kontakt" powoduje automatyczne wysłanie pustego meila z formularza. Próbowałem znaleźć rozwiązanie na formach, ale udało się mi dowiedzieć tylko, że brakuje mi jakiegoś "if" w php. Mistrzu pomóż, bo jak chodzi o php to jestem tępy jak wypełniona po brzegi drewutnia...
Tomek
Wyrzuć tą linijkę z kodu strony kontakt:
<link rel="stylesheet" type="text/php" href="send_form.php"/>

Mariusz
Wyrzuciłem. Niestety dalej przychodzą :(
Tomek
Sprawdź w takim razie ponownie plik send_form.php
Dodatkowo sprawdź inne pliki, czy gdzieś nie wstawiłeś niepotrzebnie wywołania funkcji mail();
Mariusz
mail() sprawdziłem i nie ma, a co mam zrobić z tym send_form? Pod jakim kątem sprawdzić?
Mariusz
Działa! Miałeś rację! Chodziło o to całe php. Niewłaściwy plik się mi tam zaplątał, gdzie miało być send_form. Biję pokłony, bo gdyby nie Ty to już bym nie siedział przed kompem tylko w Tworkach ;) Dzięki za poświęcony czas, pomoc i cierpliwość. Pozdrawiam.
Mariusz
Chciałem jeszcze zrobić drugi formularz kontaktowy, który docelowo miałby być zamówieniowym:
http://www.naklejkowyswiat.pl/index2.html
Działa bez problemów, przesyła wiadomości tam gdzie trzeba, tylko na końcu po wysłaniu zamiast normalnego komunikatu to wyskakuje takie coś na osobnej stronie:
{"status":0,"msg":"<p class='status_err'>Proszu0119 wypeu0142niu0107 wszystkie pola przed wysu0142aniem.</p>"}
Tomek
Zapomniałeś wstawić do kodu tej strony kod JavaScript obsługujący formularz.
Mariusz
Dzięki po raz kolejny! Teraz działa jak należy!
Damian
Witam, mam problem z wyświetleniem informacji o powodzeniu wysłania wiadomości, informacja że nie została wysłana wiadomość lub niewypełniony formularz wyświetla się poprawnie.
Tomek
Damian - sprawdź ponownie zawartość pliku send_form.php
Prawdopodobnie coś w nim brakuje, albo coś jest za dużo.
Czy formularz w ogóle się wysyła?
Damian
Formularz wysyła się poprawnie. Tylko tak jakby nie zwracało 1 po poprawnym wysłaniu wiadomości. Kod jest z powyższego skryptu jedynymi zmianami które wprowadziłem jest styl css oraz wstawiony mail na który mają przychodzić wiadomości.
Tomek
Z tego co widzę, to skrypt nie zwraca żadnej odpowiedzi, więc jednak coś jest nie tak. Trudno mi powiedzieć co konkretnie.
To wygląda tak, jakby wewnątrz tego wyrażenia:
if(mail("email@adresata","Formularz kontaktowy",$message_body,$headers)){
....
}
brakowało linii:
$json=array("status"=>1,"msg"=>"<p class='status_ok'>Twój formularz został pomyślnie wysłany.</p>");
Więc mimo wszystko sprawdź to ponownie, czy na pewno się zgadza.
Damian
Tak wygląda cały kod, nie mam pojęcia co pominąłem.
<?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.0rnContent-type: text/plain; charset=utf-8rnContent-Transfer-Encoding: 8bit"; $message_body="Formularz kontaktowy wyslany ze strony Camlive.pln";
$message_body.="Imie i nazwisko: $namen";
$message_body.="Adres email: $emailn";
$message_body.="Numer telefonu: $phonenn";
$message_body.=$message;
if(mail("kontakt@camlive.pl","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'>Wystapil problem z wyslaniem formularza.</p>");
}
}
else{
$json=array("status"=>0,"msg"=>"<p class='status_err'>Prosze wypelnic wszystkie pola przed wyslaniem.</p>");
}
echo json_encode($json);
exit;
?>
Tomek
Przed chwilą sam skopiowałem kod z artykułu i wstawiłem go bez dokonywania jakichkolwiek zmian (oprócz maila adresata) i wszystko działa poprawnie: http://test.rmt.pl/form/
W związku z tym naprawdę nie wiem, gdzie leży problem.
Wstaw na początku pliku send_form.php takie dwie linijki:

error_reporting(6143);
ini_set("display_errors","on");
Damian
Dodane, nie wywala błędów.
Tomek
Problem w tym, że dalej nie ma żadnej odpowiedzi. Ani jednego znaku. Niestety bez dostępu do skryptu nie jestem w stanie pomóc. To może być jakaś kwestia specyficzna dla serwera (to home.pl?)
Ale dalej to już będzie zgadywanie. Jakby coś, to zapraszam na priv.
Marcin
Witam, mam problem z Formularzem kontaktowym na mojej stronie. który zrobiłem według pańskiego kodu. Do Formularza dodałem pole "Temat".Po wypełnieniu gdy klikam "Wyślij" pojawia się strona send_form.php i taki komunikat:
Warning: Cannot modify header information - headers already sent by (output started at /send_form.php:5) in /send_form.php on line 6
{"status":1,"msg":"
Twu00f3j formularz zostau0142 pomyu015blnie wysu0142any.</p>"}
Wiadomość dochodzi z serwera na mój email z jednym małym szczegółem: w polu Temat: brakuje treści ,która powinna tam być. Może Pan mi pomóc jakoś z tym, bo Ja próbowałem już chyba wszystkiego i to samo cały czas. Proszę o odpowiedź.
Tomek
W kodzie strony /kontakt.html brakuje linijki kodu, która pobiera bibliotekę jQuery. A ponieważ jej nie ma cały kod javascript nie działa i formularz się wysyła metodą POST zamiast wysyłać się w tle.
Poza tym w kodzie pliku send_form.php jest kod html, którego być nie powinno. Stąd pojawia się ostrzeżenie: Warning: Cannot modify header information....
No i ostatnia rzecz - żeby wiadomość miała inny tytuł, który jest przesyłany przez formularz, trzeba ją pobrać:
$subject=isset($_POST['subject']) ? $_POST['subject'] : "";
i umieścić w kodzie funkcji mail() zamiast tego co jest teraz:
mail("email@adresata",$subject,$message_body,$headers)

Piotr
Witam, fajnie wszystko śmiga lecz gdy klikniemy wyślij formularz czyści się ale nie wyświetla informacji o wysłaniu wiadomości tak jak by nie do końca się wykonał skrypt. Wiadomości ładnie dolatują do mnie, a gdy nie uzupełnimy pól wyskakuje ładnie komunikat aby wypełnić niezbędne pola. Co mogłem przegapić, pominąć?
Tomek
Podejrzewam, że po stronie skryptu PHP możesz mieć jakiś niepotrzebny kod (być może na początku) i serwer wysyła nieprawidłową odpowiedź.
Sprawdź dokładnie jeszcze raz kod w pliku php.
Kuba
Witam, Po pierwsze super kod, prosty, czytelny i wszystko ładnie wyjaśniasz ale mam małe pytanie :) Co się dzieje/co powinno się dziać po wysłaniu poprawnego formularza? Wszystko jest git formularz przychodzi mi na maila jednak po kliknięciu wyślij strona wchodzi na nową (pod)stronę /send_form.php - czysta biała z tekstem, że wszystko ok i JSON z tymi opcjami zapisz, kopiuj itp. Tu pytanie czy na tym skrypt kończy działanie ? Czy powinien on wracać do strony głównej i czyścić pola ? Czy i jeśli tak to jak mogę dodać w pliku php jakąś wzmiankę aby tam powracał?
Pozdrawiam.
Tomek
Formularz powinien działać w ten sposób, że się wysyła bez przeładowywania strony i otwierania nowej strony.
W związku z tym nie działa Ci prawidłowo kod JavaScript.
Jak podasz adres strony to rzucę na to okiem i napiszę co jest nie tak.
Kuba
Wow :) nie sądziłem na tak szybką odpowiedź. http://estockpljq.nazwa.pl/test/ Jeśli możesz rzucić okiem będę niezmiernie wdzięczny :) Chyba że wina jest po stronie hostingu ?
Tomek
Masz źle wstawiony kod na stronie.
Obecnie masz coś takiego:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

<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></script>

A powinno być tak:
<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>
Kuba
Widocznie to jedna ze 100 wersji jaką próbowałem zmieniać, przestawiać :) W tej mojej ze znacznikiem script napisanym po całym kodzie całość działa i wysyła maila. W tym co podałeś nic się nie dzieje, ani nie wysyła ani nie czyści strony. Czy jeden skrypt może blokować drugi ? bo kilka ich mam dołączonych i już sam nie wiem o co chodzi.
Tomek
Dzieje się, dzieje. Wystarczy zajrzeć do konsoli js, żeby zobaczyć, że następuje próba wysłania, ale nie ma takiego pliku.
Wszystko dlatego, że całość masz w katalogu /test
W związku z tym musisz jeszcze skorygować ścieżkę do pliku send_form.php i zamiast tego:
$.post("/send_form.php",
wstawić to (jeżeli plik send_form.php będzie w tym samym katalogu, co aktualnie wykonywany skrypt):
$.post("send_form.php",
lub to (jeśli na sztywno skrypt send_form.php będzie w katalogu /test):
$.post("/test/send_form.php",

Kuba
Faktycznie potrzebował jeszcze tej ścieżki folderu :) Dzięki.
Teraz nie wchodzi na tą stronę od Jsona - ładnie czyści formularz po wysłaniu lecz nie wywołuje send_form_status czyli tego info o tym, ze albo wysłano albo nie. Rozumiem, że finalnie powinien ściągnąć jeszcze te dane ? Czy jeszcze gdzieś w kodzie js muszę dodać kolejną wzmiankę, że korzystam z podfolderu /test ?
Tomek
Nic Ci nie pokazuje, bo zmieniłeś w kodzie:
<div id="send_form_status"></div>
na:
<div class="send_form_status"></div>

Ma być: <div id="send_form_status"></div>
Kod, który udostępniłem, naprawdę działa w większości wypadków bez konieczności żadnych modyfikacji.
Kuba
No prawda... działa :) Wielkie dzięki :) Nawet na kopiuj- wklej można się wyłożyć jak widać...
Dodam jeszcze tutaj info dla tych którzy mają problem z błędem: Cannot modify header information... u mnie problem się rozwiązał zapisując plik php z wyłączeniem sygnatury BOM - Windowsowy notatnik zapisuje chyba tylko z tym dodatkiem, wystarczy ściągnąć jakiś w miarę dobry edytor i odhaczyć opcję przy zapisie: Dołącz sygnaturę Unicode (BOM).
czarny
przeżuca na stronę send.php :/
i wyrzuca komunikat
Tomasz
Twój formularz na stronie ma id contact-form, ale kod .js odwołuje się do formularza o id contact_form.
Więc albo zmień id formularza, ale to w kodzie.
Poza tym w pliku send_form.php też masz prawdopodobnie jakieś niepotrzebne znaki na początku kodu.
Andrew
Witam, mam problem po umieszczeniu formularza po wciśnięciu przycisku wyślij nic się nie dzieje, jaki może być problem?
Pozdrawiam
Tomasz
Andrew - na serwerze nie ma pliku send_form.php lub jest w niewłaściwym miejscu. Musi być umieszczony w katalogu głównym strony.
Andrew
dziękuje za odpowiedź, plik php znajduje się tutaj : https://images82.fotosik.pl/899/e37600468bef6326gen.png czy to odpowiednie miejsce ?
Tomasz
Miejsce odpowiednie, ale nazwa pliku nie. Wprawdzie tego nie widać na zrzucie ekranu, jaki udostępniłeś, ale plik ma nazwę send_form.php.txt (dodatkowe .txt na końcu nie potrzebne). Zmień nazwę pliku na send_form.php i będzie OK.
Kacper
Witam, jak zmienić powyższy kod php, aby wypełnienie niektórych pól było dobrowolne?
Pozdrawiam
Tomek
Należy zmodyfikować linijkę kodu:
if($name && $email && $phone && $message){
usuwając zmienną, która może nie być wypełniona.
Np. jeśli nie chcemy, by telefon był wymagany to linijka ta będzie wyglądać tak:
if($name && $email && $message){
Kacper
Dziękuję bardzo za pomoc.
artur
witam.
Dodałem wszystko tak jak trzeba. W <head> </head> jest też stworzony plik send_form.php z podmienionym tylko adresem e-mail.

Po wypełnieniu formularza na stronie i kliknięciu wyślij odsyła do pliku send_form.php i wywala błąd:

{"status":0,"msg":"<p class='status_err'>Proszu0119 wypeu0142niu0107 wszystkie pola przed wysu0142aniem.</p>"}
Tomek
Zmodyfikowałeś formularz i brakuje w nim identyfikatora: id="contact_form"
W związku z tym kod javascript nie działa poprawnie.
Rafał
Tomek, wielkie dzięki za kod, tylko że mi działa ... za szybko ;)
Po kliku w WYSLIJ, formularz wysyła dane na maila, potem resetuje pola i mam wrażenie jakby nic się nie stało. Message potwierdzający wysłanie albo się nie pojawia, albo pojawia się za szybko, albo nie tam gdzie patrzę..?
Rafał
Ha, już znalazłem :) Zapomniałem jednego div w formularzu dorzucić... Dzięki!!!
Tomasz
Rafał - nie zdążyłem Ci odpisać, ale zazwyczaj błąd w działaniu jest właśnie z powodu brakującego kodu/przeróbek kodu lub braku obsługi funkcji mail na darmowych hostingach.
Cieszę się, że się udało wszystko uruchomić :)
Tomek
Siemka, formularz działa spoczko, wyświetla komunikaty i wgl ale nie dostałem maila, po jakim czasie powinien się on pojawić albo co źle robię, próbowałem podawać maila zarówno z .pl jak i bez
Tomek
Na darmowych hostingach nie działa funkcja mail (jest blokowana, żeby nie rozsyłać spamu). Więc jeśli masz stronę na darmowym hostingu to niestety skrypt nie będzie działać.
Tomek
Dzięki wielkie:)

Podziel się z nami opinią