Jak stworzyć prosty formularz kontaktowy w HTML 5, CSS 3 i PHP

Dziś pokażę jak w prosty sposób możemy stworzyć formularz kontaktowy w PHP, HTML 5, CSS 3 i jak dodać go na naszą stronę zrobioną w HTML'u. Będzie wymagana podstawowa wiedza odnośnie kodu HTML CSS.

Zalecam korzystać z programu do pisania kodu innego niż zwykły notatnik, specjalne edytory tekstu kolorują składnie naszego kodu i pokazują nam jeżeli popełniliśmy błąd.

1. Podstawowy kod

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Tu dodamy nasz plik CSS -->
<title>Formularz Kontaktowy - Tytuł naszej strony</title>
</head>

<body>
<div id="formularz">
<!-- Tu dodajemy kod formularza -->
</div>
</body>

</html>
  • <!DOCTYPE HTML> - informacja dla przeglądarki że korzystamy z HTML 5.
  • <HTML> - główny tag który zawierać będzie kod naszej strony jak również tagi <head> i <body>.
  • <HEAD> - w tym tagu zamieszamy informacje o metatagach, importujemy pliki CSS, JS jak również zamieszczamy kod CSS, JS.
  • <BODY> - w tym tagu zamieszczamy kod który będzie widoczny dla osoby oglądającej naszą strone, i właśnie w tym tagu dodamy nasz formularz.

2. Dodajemy formularz

Gdy już mamy podstawowy kod przygotowany pora dodać kod odpowiedzialny za wyświetlania formularza i umieścić go pomiędzy <div id="formularz"> i </div>.
 

<form>
        
    <label>Imie i nazwisko</label>
    <input name="name" placeholder="Jan kowalski">
            
    <label>Email</label>
    <input name="email" type="email" placeholder="biuro@79level.pl">
            
    <label>Wiadomość</label>
    <textarea name="message" placeholder="Napisz tu wiadomość"></textarea>
            
    <input id="submit" name="submit" type="submit" value="Wyślij">
        
</form>
  • <form> - oznacza że tu zaczyna się nasz formularz.
  • <input> - oznacza pole które oczekuje na otrzymanie na informacje.
  • <input name="email"> - atrybut name jest wykorzystywany do nazywania naszego pola dzięki czemu potem będziemy mogli się do niego odnieść w pliku PHP.
  • <input placeholder="Jan Kowalski"> - atrybut placeholder oznacza wartość która będzie się wyświetlać gdy jeszcze nic nie wpisano w dane pole.,
  • <input type="submit"> - atrybut type oznacza jaki typ pola input chcemy dodać standardowo jest "text" ale możemy chcieć to zmienić np na "submit".
  • <textarea> - jest to również pole w które wpisujemy tekst ale to pole w przeciwieństwie do pola <input> może być większe niż 1 wiersz.

Tak na chwilę obecną wygląda nasz formularz ale teraz dodamy trochę kodu CSS i będzie wyglądał o wiele lepiej!

3. Tworzymy plik CSS

Teraz musimy stworzyć nowy plik CSS dla uproszczenia nazwijmy go style.css i umieścimy w tym samym folderze co nasz plik HTML z formularzem.

Po stworzeniu dodamy poniższy kod CSS do niego.
 

 body {
	background-color:#f3f3f3; /* ustawiamy kolor tła naszej strony */
	font-family: Arial, Helvetica, sans-serif; /* ustawiamy czcionkę z której korzystamy */
}

#formularz {
        width:260px; /* ustawiamy szerokość formularza */
        margin:0 auto; /* jeżeli nasz formularz ma ustawioną szerokość wyśrodkowujemy go */
        background-color:#fff; /* dodajemy kolor tła naszemu formularzowi */
        border:2px solid #ccc; /* dodajemy obramowanie o szerokości 2px */
        border-radius:10px; /* zaokrąglamy tło naszego formularza */
		padding:20px; /* dodajemy margines wewnątrz naszego formularza */
        margin-top:20px; /* dodajemy margines górny naszego formularza */
}

#formularz label {
    display:block;/* ustawiamy by label rozpoczynał się od nowej linii*/
    margin-bottom:5px;/* dodajemy margines dolny */
    font-weight:bold; /* pogrubiamy czcionkę */
    text-transform: uppercase; /* zamieniamy wszystkie litery na duże */
    font-size:12px; /* ustawiamy wielkość czcionki */
    color:#555555; /* ustawiamy kolor czcionki */
}

#formularz textarea,
#formularz input {
	padding:5px; /* dodajemy margines wewnątrz naszego pola */
	border-radius:3px; /* dodajemy zaokraglone rogi */
	border:1px solid #ccc; /* dodajemy obramowanie */
	margin-bottom:25px; /* dodajemy margines dolny */
	width:245px; /* ustalamy szerokość */
}

#formularz input#submit {
	width:255px; /* ustalamy szerokość */
	cursor:pointer; /* zmieniamy kursor */
	margin-bottom:0px;/* resetujemy margines dolny */
}

#formularz p.copy {
	color:#555555; /* ustawiamy kolor czcionki */
	margin-bottom:0px; /* resetujemy margines dolny */
	font-size:12px; /* ustawiamy rozmiar czcionki */
	text-align: center; /* wyśrodkowywujemy tekst */
}

#formularz p.copy a {
	color:#555555;/* ustawiamy kolor czcionki */ 
	text-decoration: none; /* usuwamy podkreślenie linku */
	font-weight:bold; /* pogrubiamy czcionkę */
}  

4. importujemy nasz plik CSS

Żeby zaimportować ten plik CSS musimy dodać w znaczniku <head> następujący kod.

Zawartość naszego pliku HTML powinna wyglądać w ten sposób:
 

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Formularz Kontaktowy - Tytuł naszej strony</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="formularz">

<form>

<label>Imię i nazwisko</label>
<input name="name" placeholder="Jan kowalski">

<label>Email</label>
<input name="email" type="email" placeholder="biuro@79level.pl">
            
<label>Wiadomość</label>
<textarea name="message" placeholder="Napisz tu wiadomość"></textarea>
            
<input id="submit" name="submit" type="submit" value="Wyślij">
</form>

<!-- byłbym wdzięczny za link zwrotny ale jak chcesz możesz go usunąć -->
<p class="copy">Formularz kontaktowy z <a href="http://www.79level.pl/blog">79LEVEL.PL</a></p>

</div>
</body>

</html>

Nasz formularz w przeglądarce powinien wyglądać o wiele lepiej, ale jeszcze mamy funkcjonalność do napisania w PHP.

5. Dodajemy kod PHP

Zacznijmy od stworzenia pustego pliku PHP o nazwie kontakt.php.

Teraz musimy edytować kod HTML naszego formularza a dokładniej ten element:
 

<form>

Dopisujemy do niego odwołanie do naszego pliku PHP:
 

<form method="post" action="kontakt.php">

Teraz dodajemy do naszego pliku kontakt.php następujący kod:

<?php

// Tworzymy zmienną dla imienia i nazwiska
$name = $_POST['name'];

// Tworzymy zmienną dla adresu email
$email = $_POST['email'];

// Tworzymy zmienną dla wiadomości
$message = $_POST['message'];

// Podajesz adres email z którego ma być wysłana wiadomość
$odkogo = "biuro@79level.pl";

// Podajesz adres email na który chcesz otrzymać wiadomość
$dokogo = "narhir@o2.pl";

// Podajesz tytuł jaki ma mieć ta wiadomość email
$tytul = "Formularz kontaktowy z 79level.pl";

// Przygotowujesz treść wiadomości
$wiadomosc = "";
$wiadomosc .= "Imie i nazwisko: " . $name . "\n";
$wiadomosc .= "Email: " . $email . "\n";
$wiadomosc .= "Wiadomość: " . $message . "\n";

// Wysyłamy wiadomość
$sukces = mail($dokogo, $tytul, $wiadomosc, "Od: <$odkogo>");

// Przekierowywujemy na potwierdzenie
if ($sukces){
  print "<meta http-equiv=\"refresh\" content=\"0;URL=potwierdzenie.php\">";
}
else{
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">";
}
?>

6. Dodajemy wyświetlanie polskich znaków.

Nasz formularz w większości wypadków powinien wysyłać wiadomości bez problemu krzaczków, ale w niektórych sytuacjach pojawiają się problemy np gdy chcemy wysyłać wiadomości na pocztę która jest na O2.pl czasami problem się też pojawia jeżeli nasz program pocztowy nie jest ustawiony na UTF-8, żeby to naprawić musimy dopisać trochę kodu do naszego formularza.
Nad komentarzem " // Wysyłamy wiadomość " dodajemy nową zmienna o nazwie $nagłówek.

// Dodajemy UTF-8 do naglowka naszej wiadomości
$naglowek = "";
$naglowek .= "Od:" . $odkogo . " \n";
$naglowek .= "Content-Type:text/plain;charset=utf-8";

Teraz jeszcze musimy zmienić naszą funkcje mail by korzystała z naszego nowo stworzonego nagłówka musimy zmienić następujący kod:

// Wysyłamy wiadomość
$sukces = mail($dokogo, $tytul, $wiadomosc, "Od: <$odkogo>");

Na taki który zawiera zmienna $naglowek:

// Wysyłamy wiadomość
$sukces = mail($dokogo, $tytul, $wiadomosc, $naglowek);

Teraz powinniśmy otrzymywać wiadomości z Polskimi znakami.

Podsumowanie

I tak nasz formularz jest gotowy do użycia, ale żeby w pełni działał musimy go umieścić na serwerze z obsługą PHP, jest to jeden z możliwie najprostszych formularzy jaki można napisać, mam nadzieję że dzięki temu również będzie tak samo łatwy by go dodać na waszej stronie internetowej.

Wersja demonstracyjna

Jeżeli podobał się wam ten artykuł zapraszam do udostępniania go swoim znajomym na facebooku.