HTML: formularz kontaktowy – gotowy kod

Wstęp

Formularz kontaktowy HTML to jeden z podstawowych elementów każdej strony internetowej. Pozwala użytkownikom szybko wysłać wiadomość bez konieczności otwierania programu pocztowego. Poniżej znajdziesz gotowy kod formularza wraz z walidacją, stylami CSS oraz informacją o obsłudze po stronie serwera.

Szybkie rozwiązanie

• Dodaj pola input i textarea
• Włącz podstawową walidację HTML
• Ostyluj formularz za pomocą CSS
• Obsłuż wysyłkę wiadomości w PHP

Krok 1: Dodaj pola formularza (Input Fields)

Poniższy formularz zawiera najczęściej wykorzystywane pola kontaktowe.


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

<label for="name">Imię</label>
<input type="text" id="name" name="name" required>

<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>

<label for="subject">Temat</label>
<input type="text" id="subject" name="subject">

<label for="message">Wiadomość</label>
<textarea id="message" name="message" rows="6" required></textarea>

<button type="submit">Wyślij wiadomość</button>

</form>


Najważniejsze pola to imię, adres e-mail oraz treść wiadomości. Pole tematu jest opcjonalne.

Nie polegaj wyłącznie na placeholderach. Label poprawiają dostępność formularza i są zalecane przez WCAG.

Krok 2: Dodaj walidację (Validation)

HTML5 oferuje wbudowaną walidację formularzy bez użycia JavaScript.

Najczęściej stosowane atrybuty to:

• required – pole obowiązkowe
• type=”email” – sprawdza poprawność adresu e-mail
• minlength – minimalna liczba znaków
• maxlength – maksymalna liczba znaków
• pattern – własny wzorzec danych

Przykład:


<input type="text" name="name" required minlength="3">

<input type="email" name="email" required>


Pamiętaj, że walidacja HTML poprawia wygodę użytkownika, ale nie zastępuje sprawdzania danych po stronie serwera.

Krok 3: Dodaj style CSS

Prosty arkusz CSS sprawi, że formularz będzie wyglądał estetycznie na komputerach i urządzeniach mobilnych.


form{
max-width:600px;
margin:auto;
}

input,
textarea{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ccc;
border-radius:6px;
box-sizing:border-box;
}

button{
padding:12px 20px;
background:#0073aa;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}

button:hover{
background:#005f8d;
}

input:focus,
textarea:focus{
outline:none;
border-color:#0073aa;
box-shadow:0 0 5px rgba(0,115,170,.3);
}




Możesz dowolnie zmieniać kolory, odstępy oraz szerokość formularza zgodnie z wyglądem swojej strony.

Krok 4: Obsługa formularza w PHP (Backend)

Sam HTML nie wysyła wiadomości e-mail. Formularz musi zostać obsłużony przez skrypt działający po stronie serwera, najczęściej napisany w PHP.

W pliku kontakt.php możesz:

• odebrać dane z formularza
• zweryfikować poprawność przesłanych informacji
• usunąć niebezpieczne znaki
• wysłać wiadomość funkcją mail() lub biblioteką PHPMailer
• zapisać zgłoszenie do bazy danych

W nowoczesnych projektach często wykorzystuje się bibliotekę PHPMailer, która zapewnia większą niezawodność oraz obsługę serwerów SMTP.

Formularz powinien działać przez HTTPS, aby dane użytkowników były szyfrowane podczas przesyłania.

Gotowy plik kontakt.php

Jeżeli korzystasz z hostingu obsługującego PHP, utwórz plik kontakt.php i wklej do niego poniższy kod. Skrypt odbiera dane z formularza, sprawdza ich poprawność i wysyła wiadomość na wskazany adres e-mail.


<?php

if ($_SERVER["REQUEST_METHOD"] === "POST") {

$name = trim(filter_input(INPUT_POST, 'name', FILTER_SANITIZE_SPECIAL_CHARS));
$email = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
$subject = trim(filter_input(INPUT_POST, 'subject', FILTER_SANITIZE_SPECIAL_CHARS));
$message = trim(filter_input(INPUT_POST, 'message', FILTER_SANITIZE_SPECIAL_CHARS));

if (!$name || !$email || !$message) {
exit("Uzupełnij wszystkie wymagane pola.");
}

$to = "kontakt@twojadomena.pl";
$mailSubject = "Nowa wiadomość z formularza";

$body = "Imię: $name\n";
$body .= "E-mail: $email\n";
$body .= "Temat: $subject\n\n";
$body .= "Wiadomość:\n$message";

$headers = "From: Formularz kontaktowy \r\n";
$headers .= "Reply-To: $email\r\n";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

if (mail($to, $mailSubject, $body, $headers)) {
echo "Dziękujemy! Wiadomość została wysłana.";
} else {
echo "Wystąpił błąd podczas wysyłania wiadomości.";
}

}
?>


Zmień adres kontakt@twojadomena.pl na własny adres e-mail, na który mają trafiać wiadomości.

Uwaga dotycząca wysyłki wiadomości

Wskazówka: Nie ustawiaj adresu e-mail użytkownika jako nadawcy wiadomości (From). Lepszym rozwiązaniem jest użycie stałego adresu z własnej domeny, np. noreply@twojadomena.pl, a adres użytkownika umieszczenie w nagłówku Reply-To. Takie rozwiązanie poprawia bezpieczeństwo oraz zwiększa szansę na poprawne dostarczenie wiadomości.

Jeżeli wiadomości nie docierają do odbiorcy lub trafiają do folderu SPAM, warto skonfigurować wysyłkę przez SMTP (np. z użyciem PHPMailer) oraz zadbać o poprawne rekordy SPF, DKIM i DMARC.

Jak zabezpieczyć formularz przed spamem?

• CAPTCHA
• honeypot
• ograniczenie liczby wysyłek
• walidacja po stronie serwera

Najczęstsze błędy formularzy kontaktowych

• brak walidacji po stronie serwera
• niepoprawny adres e-mail odbiorcy
• brak zabezpieczenia przed spamem
• nieprawidłowa konfiguracja SMTP
• brak komunikatu o poprawnym wysłaniu wiadomości

Dlaczego formularz nie wysyła wiadomości?

Jeżeli formularz działa poprawnie, ale wiadomości nie docierają do odbiorcy, problem często nie leży w kodzie HTML ani PHP. Przyczyną może być nieprawidłowa konfiguracja poczty, brak rekordów SPF, DKIM lub DMARC albo korzystanie z funkcji mail() zamiast SMTP.

W przypadku własnej domeny warto również sprawdzić konfigurację rekordów DNS oraz poprawność ustawień serwera pocztowego.

Uwaga: Jeżeli formularz korzysta z funkcji mail() i wiadomości nie docierają do odbiorców, warto skonfigurować wysyłkę przez SMTP (np. z użyciem PHPMailer). Dodatkowo upewnij się, że domena ma poprawnie skonfigurowane rekordy SPF, DKIM i DMARC – zwiększa to szansę, że wiadomości nie będą trafiały do folderu SPAM.

FAQ

Czy formularz HTML może sam wysłać e-mail?

Nie. HTML odpowiada jedynie za wyświetlenie formularza. Do wysłania wiadomości potrzebny jest backend, np. PHP.

Czy atrybut required wystarczy jako zabezpieczenie?

Nie. Walidacja HTML działa tylko w przeglądarce. Dane zawsze należy ponownie sprawdzić po stronie serwera.

Czy warto używać PHPMailer?

Tak. Biblioteka umożliwia wysyłkę wiadomości przez SMTP, poprawia dostarczalność e-maili i oferuje więcej możliwości niż standardowa funkcja mail().

Podsumowanie

Gotowy formularz kontaktowy HTML składa się z pól input, podstawowej walidacji oraz stylów CSS. Aby formularz rzeczywiście wysyłał wiadomości, konieczna jest obsługa po stronie serwera, np. w PHP. Dzięki temu rozwiązaniu szybko wdrożysz prosty i funkcjonalny formularz kontaktowy na swojej stronie.