Dodanie formularza kontaktowego na stronie internetowej to kluczowy element umożliwiający użytkownikom szybki kontakt z administratorem lub działem obsługi. Właściwie zaprojektowany formularz kontaktowy wpływa na poziom zaangażowania odwiedzających, stanowi też ważny kanał pozyskiwania leadów i opinii. Niniejszy artykuł prowadzi przez kolejne etapy tworzenia i integracji formularza, zaczynając od planowania, poprzez kodowanie, aż do zabezpieczeń i wysyłki danych.
Planowanie i wymagania wstępne
Przed przystąpieniem do implementacji warto dobrze określić, jakie pola powinien zawierać formularz. Każda niepotrzebna pozycja może zniechęcać odwiedzającego do wysłania wiadomości. Najczęściej stosowane pola to:
- Imię i nazwisko – pozwala na personalizację odpowiedzi
- Adres email – niezbędny do kontaktu zwrotnego
- Temat – ułatwia segregację wiadomości
- Wiadomość – właściwe pole treści
- CAPTCHA lub ukryte pole antyspamowe
Wymagania techniczne
- Serwer z obsługą PHP lub innego języka po stronie serwera
- Możliwość wysyłania wiadomości przez SMTP lub funkcję mail()
- Dostęp do plików CSS i JavaScript w strukturze projektu
- Podstawowe zabezpieczenia przed antyspam i atakami typu XSS/form injection
Tworzenie formularza HTML i walidacja
W tej części skoncentrujemy się na kodzie: od podstawowego markup do prostych skryptów walidujących. Przykładowy formularz można zapisać tak:
Formularz:
Walidacja po stronie klienta
Podstawowe sprawdzanie można zrealizować za pomocą atrybutów HTML5, takich jak required czy type=”email”. Aby zwiększyć interaktywność, dodajmy fragment JavaScript:
Walidacja po stronie serwera
W pliku send.php należy sprawdzić, czy wszystkie wymagane pola nie są puste i czy email ma poprawny format. Przykład w PHP:
send.php:
Stylizacja CSS i responsywność
Aby formularz wyglądał profesjonalnie, stosujemy CSS. Poniżej przykładowy styl:
style.css:
form {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: #f5f5f5;
border-radius: 8px;
}
input[type=”text”], input[type=”email”], textarea {
width: 100%;
padding: 8px;
margin-top: 4px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=”submit”] {
background: #007BFF;
color: #fff;
border: none;
padding: 10px 16px;
border-radius: 4px;
cursor: pointer;
}
input[type=”submit”]:hover {
background: #0056b3;
}
@media (max-width: 480px) {
form {
padding: 10px;
}
}
Responsywność
Dzięki regułom @media formularz dopasowuje się do urządzeń mobilnych. Warto także zwiększyć rozmiar pól i przycisków na mniejszych ekranach oraz zadbać o duże odstępy dla wygody użytkownika.
Bezpieczeństwo i antyspam
Formularz kontaktowy jest często celem botów i ataków. Dlatego niezbędne jest wdrożenie kilku zabezpieczeń:
- Token CSRF – zapobiega podmianie formularza przez zewnętrzne strony
- Ukryte pole honeypot – prosta technika wykrywająca boty
- ReCAPTCHA – rozwiązanie Google, sprawdzające, czy użytkownik to człowiek
- Filtrowanie i oczyszczanie danych – usuwanie niebezpiecznych tagów HTML, XSS i kodu wykonanego po stronie serwera
Przykład ukrytego pola
W formularzu dodajemy pole niewidoczne dla użytkownika:
Na etapie walidacji w send.php sprawdzamy, czy pole jest puste; gdy zawiera wartość, traktujemy zgłoszenie jako podejrzane.
Integracja z systemami i rozszerzenia
W zależności od potrzeb można połączyć formularz z CRM, Google Sheets lub systemem ticketowym:
- Wysyłka do API zewnętrznej aplikacji
- Import bezpośrednio do bazy danych MySQL
- Automatyczne powiadomienia przez Slack lub MS Teams
Webhook i JSON
Przykładowo po otrzymaniu wiadomości wysyłamy JSON do end-pointa:
$name,
’email’ => $email,
'message’ => $message
];
$options = [
'http’ => [
'header’ => „Content-Type: application/jsonrn”,
'method’ => 'POST’,
'content’ => json_encode($data),
],
];
$context = stream_context_create($options);
file_get_contents(’https://api.twojcrm.pl/webhook’, false, $context);
?>
Powyższa metoda pozwala na płynne rozszerzenie funkcjonalności bez konieczności zmiany front-endu.
