Formularz kontaktowy w PHP

8 listopada 2017administrator3 komentarze

Formularz kontaktowy

KategoriaProgramowanie

Ten wpis przedstawia w jaki sposób możemy stworzyć formularz kontaktowy w PHP, HTML5 i CSS3 wraz z zabezpieczeniem captcha.

Formularz taki możemy później dodać na dowolną stronę www. Na końcu wpisu znajduje się link do pobrania całego projekt z GitHub.

1. Zarys formularza

Tworzymy dowolny plik z rozszerzeniem PHP, u nas będzie to kontakt.php

Tworzymy w nim zarys naszej strony w HTML:

<!DOCTYPE HTML>
<html>
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  <title>Formularz kontaktowy</title>
</head>
<body>
</body>
</html>

Uwaga! Aby móc uruchomić plik PHP, musimy mieć zainstalowany na komputerze serwer lokalny lub wrzucić stronę na serwer/hosting.

2. Kod HTML formularza

Pomiędzy znaczniki body dodajemy kod HTML naszego formularza. Element label to opis pola, a input to kontrolka formularza. Przy tagu form dodaliśmy metodę wysyłania formularza (tutaj post, domyślnie jest get). Placeholder określa jaki tekst ma być wyświetlany domyślnie w kontrolce. Input z type=submit to przycisk wysyłania formularza. Atrybut required informuje przeglądarkę, że dane pole jest obowiązkowe.

Przy elemencie form nie został określony action, więc formularz będzie wysyłany do tego samego pliku.

<form method="post">
  <label for="name">Imię i nazwisko</label>
  <input type="text" name="name" id="name" placeholder="Jan Kowalski" required>

  <label for="email">Email</label>
  <input type="email" name="email" id="email" placeholder="example@example.com" required>

  <label for="message">Wiadomość</label>
  <textarea name="message" id="message" placeholder="Wpisz swoją wiadomość" required></textarea>

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

3. Dodajemy style CSS

Aby nasz formularz się lepiej prezentował, dodamy kilka stylów CSS. W tym samym folderze tworzymy plik style.css i w pliku kontakt.php w sekcji head dodajemy odniesienie do niego:

<link rel="stylesheet" href="style.css">

Następnie w pliku style.css dodajemy następujące style:

body { 
  font-family: Arial, Helvetica, sans-serif;
}
form{    
  width:320px;    
  margin:20px auto;    
  border:2px solid #ccc; 
  padding:20px;
}
form label {    
  display:block;    
  margin-bottom:5px;    
  font-weight:bold;    
  font-size:12px;    
  color:#555555;
}
form textarea,form input{ 
  padding:5px;  
  border:1px solid #ccc;  
  margin-bottom:25px;  
  width:100%; 
  box-sizing: border-box;
}
form input[type=submit] { 
  cursor:pointer; 
  margin-bottom:0px;
}

4. Dodanie obrazka captcha

Oczywiście, aby zabezpieczyć nasz formularz przed wysyłaniem spamu przez boty, dodamy do niego obrazek captcha. Plik captcha.php (link do pobrania wszystkich plików znajduje się na końcu wpisu) dodajemy do tego samego katalogu gdzie pozostałe pliki. Następnie w formularzu dodajemy pole (pomiędzy textarea, a input type=submit):

<label for="captcha">Przepisz kod captcha</label>
<img src="captcha.php" alt="Captcha">
<input type="text" name="captcha" id="captcha" required>

Gdy odświeżymy naszą stronę zobaczymy formularz kontaktowy z kodem captcha:

Jeśli captcha się nie wyświetla to znaczy że prawdopodobnie biblioteka GD Library nie jest zainstalowana. Poproś swojego administratora serwera o jej zainstalowanie lub włączenie. Jeśli to nie jest możliwe sugeruję wykorzystanie reCAPTCHA.

5. Kod PHP obsługujący formularz

Przyszła pora na dodanie kodu PHP obsługującego formularz.

Na początku pliku PHP dodajemy:

<?php
header('Content-Type: text/html; charset=utf-8');
session_start();
if(!empty($_POST['name']) and !empty($_POST['email']) and !empty($_POST['message']) and !empty($_POST['captcha'])){
  if($_POST['captcha']!=$_SESSION['captcha']){ 
    die('Kod captcha jest nieprawidłowy'); 
  }else{ 
    $email_odbiorcy = 'example@example.com'; 
    $header = 'Reply-To: <'.$_POST['email']."> \r\n";  
    $header .= "MIME-Version: 1.0 \r\n";  
    $header .= "Content-Type: text/html; charset=UTF-8";  
    $wiadomosc = "<p>Dostałeś wiadomość od:</p>"; 
    $wiadomosc .= "<p>Imie i nazwisko: " . $_POST['name'] . "</p>"; 
    $wiadomosc .= "<p>Email: " . $_POST['email'] . "</p>"; 
    $wiadomosc .= "<p>Wiadomość: " . $_POST['message'] . "</p>"; 
    $message = '<!doctype html><html lang="pl"><head><meta charset="utf-8">'.$wiadomosc.'</head><body>';
    $subject = 'Wiadomość ze strony...';
    $subject = '=?utf-8?B?'.base64_encode($subject).'?=';
    if(mail($email_odbiorcy , $subject, $message, $header)){ 
      die('Wiadomość została wysłana'); 
    }else{ 
      die('Wiadomość nie została wysłana'); 
    } 
  }
}
?>

W pierwszej linii dodajemy nagłówek (header) informujący o tym jakie kodowania używamy (aby polskie znaki na stronie były poprawnie wyświetlane). Następnie poleceniem session_start() uruchamiany sesje (tam jest przechowywana captcha). Sprawdzamy czy wszystkie pola formularza są przesyłane i czy nie są puste (!empty). Gdy kod captcha jest prawidłowy tworzymy nagłówek (header) oraz treść (message) wiadomości. W zmiennej $email_odbiorcy  znajduje się adres email odbiorcy wiadomości.

W tym przykładzie w przypadku wystąpienia błędu lub gdy formularz zostanie wysłany, na ekranie pokaże się sama informacja o danym zdarzeniu (funkcja die()), oczywiście możemy w lepszy sposób to rozwiązać, zapisując komunikat do danej zmiennej, a następnie wyświetlając ją w danym miejscu.

6. Podsumowanie

Mam nadzieję, że ten wpis pomoże Wam w stworzeniu formularzy kontaktowych na swoich stronach www.

Link do pobrania przykładu z GitHub: https://github.com/kamilwyremski/contact_form

Tagi