Jak dodać wymagane pola do Formularza Kontaktowego w PHP HTML 5 i CSS 3

Jak dodać wymagane pola do Formularza Kontaktowego w PHP HTML 5 i CSS 3
Z uwagi na spore zainteresowanie postem który jakiś czas temu napisałem "Jak stworzyć prosty formularz kontaktowy w HTML 5, CSS 3 i PHP" i faktu że chcieliście zrobić trochę bardziej rozbudowaną wersję która sprawdza czy dane wymagane pole jest wypełnione przed wysłaniem napisałem tą krótką dość kontynuacje tamtego Postu mam nadzieje że wam przypadnie do gustu. a więc zaczynamy!
Przed rozpoczęciem ściągnijcie kod źródłowy z "prostej" wersji formularza kontaktowego:

Zaproponuje dwa sposoby rozwiązania tego problemu jedna metoda trochę łatwiejsza a druga trochę trudniejsza.

Metoda 1: Dodanie wymaganych pól tylko za pomocą HTML 5

Ta metoda jest bardzo prosta ale  niestety nie wspierana przez wszystkie przeglądarki

  • Chrome 5 (wspiera)
  • IE 10 (wspiera)
  • Firefox 4.0 (wspiera)
  • Safari (nie wspiera)
  • Opera 9.6 (wspiera)

Wszystko co wystarczy zrobić to dodać "required" do pola "input" przykład z formularz.html

<input name="name" placeholder="Jan Kowalski">

Wystarczy że dodamy do tego "required" i Pole będzie wymagane przez wyżej wymienione przeglądarki.

<input name="name" placeholder="Jan Kowalski" required>

Calość powinna wyglądać tak:

<!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 method="post" action="kontakt.php">

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

    <label>Email</label>
    <input name="email" type="email" placeholder="biuro@79level.pl" required>

    <label>Wiadomość</label>
    <textarea name="message" placeholder="Napisz tu wiadomość" required></textarea>

    <input id="submit" name="submit" type="submit" value="Wyślij">

</form>
</div>
</body>
</html>

Prawda że bardzo proste rozwiązanie ? niestety nie wszystkie przeglądarki to wspierają dlatego mamy metodę nr 2 opisaną poniżej warto stosować obie metody razem dla najlepszego efektu.

Metoda 2: Dodanie wymaganych pól tylko za pomocą PHP

dla przypomnienia ostatnio skończyliśmy na tym etapie kodu w pliku kontakt.php:

<?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 = "TwojAdresEmail1@gmail.com";

// Podajesz adres email na który chcesz otrzymać wiadomość
$dokogo = "TwojAdresEmail2@gmail.com";

// 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">";
}
?>

A teraz ciąg dalszy!

Najpierw musimy dodać nasze zmienne do tablicy czyli do "array();" robimy to w bardzo prosty sposób po prostu wpisujemy nad naszymi zmiennym następujący kawałek kodu.

// Sprawdzamy czy sa bledy tzn. nie uzupelnione pola
$errors = array();
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

// Podajesz adres email z którego ma być wysłana wiadomość
$odkogo = "TwojAdresEmail1@gmail.com";

// Podajesz adres email na który chcesz otrzymać wiadomość
$dokogo = "TwojAdresEmail2@gmail.com";

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

Teraz sprawdzimy czy są jakieś błędy edytując tą linie kodu:

$sukces = mail($dokogo, $tytul, $wiadomosc, $naglowek);

Teraz musimy stworzyć zapytanie "Jeżeli".

// Jeżeli nie ma bledow do policzenia i sa wymagane zmienne wiadomosc jest wysylana
if(!count($errors) && mail($to, $subject, $body, $headers)){
$sukces = mail($dokogo, $tytul, $wiadomosc, $naglowek);
}

I teraz tak jeżeli się udało wysłać wiadomość przekierowujemy na potwierdzenie i wszystko działa, ale jężeli się wiadomości nie udało wysłać trzeba wypisać nasze błędy i poinformować dlaczego się tej wiadomości wysłać nie udało tak więc musimy całkowicie przebudować ten kawałek kodu w pliku kontakt.php.

else{
  print "<meta http-equiv=\"refresh\" content=\"0;URL=error.html\">";
}

Musimy go zamienić w tym celu najpierw kopiuje kod html z pliku blad.html a nastepnie dodajemy sformułowania "jeżeli coś jest puste to dodaj błąd do tablicy.

else{ ?>

<!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">

<?php

// sprawdzamy czy pole name jest puste jeżeli jest zapisujemy do tablicy errors
if (empty($name)) {
    $errors['name'] = 'Prosze podaj swoje imie!';
}

// sprawdzamy czy pole email jest puste jeżeli jest zapisujemy do tablicy errors 
if (empty($email)) {
    $errors['email'] = 'Prosze podaj swoj adres email!';
}

// sprawdzamy czy pole message jest puste jeżeli jest zapisujemy do tablicy errors
if (empty($message)) {
    $errors['message'] = 'Prosze podaj tresc wiadomosci!';
}

$errors['wysylanie'] = 'Wystąpił błąd z wysyłaniem twojej wiadomości i twoja wiadomość nie zostala wyslana.';

// teraz dla każdego bledu w tablicy bledow tworzymy paragraf
foreach ($errors as $error) {
    print '<p class="blad">' . $error . '</p>';
}
?>

<a class="powrot" href="formularz.html">Powrót do formularza</a>

</div>
</body>

</html>

<?php } ?>

Podsumowanie

Żeby wszystko dobrze działało, należy umieścić na serwerze z obsługą PHP, Jest jeszcze parę innych metod które można zastosować by wszystko działało jeszcze lepiej, to jest sprawdzanie poprawności wypełnienia pól od strony serwera można też sprawdzać poprawność wypełnienia pól poprzez Javascript i jQuery ale o tym może kiedy indziej napisze poradnik, jak macie jakieś inne życzenia o czym chcielibyście poczytać to piszcie a postaram się napisać o tym posty.

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