Dzięki formularzowi wysłanie wiadomości będzie dla klienta szybsze, a strona w odbiorze bardziej profesjonalna.
1. Tworzymy plik
Na początek tworzymy plik o nazwie kontakt.php. Po wrzuceniu go na serwer będzie dostępny pod adresem np. www.nazwa-strony.pl/kontakt.php. Pierwszy będzie szkic, a więc podstawowe tagi z języka HTML.
<html lang="pl">
<head>
<title>Formularz kontaktowy</title>
<!-- CSS Bootstrapa -->
</head>
<body>
</body>
</html>
Formularz będzie wykorzystywał style Bootstrapa (getbootstrap.com). Wyżej zdefiniowaliśmy dokument HTML z tytułem "Formularz kontaktowy".
2. Dodajemy kod PHP
Na początku BODY wkleimy kod PHP, który obsłuży walidację otrzymanych danych i wysłanie formularza na wskazany przez nas adres e-mail.
<?php
$errorMessage = null;
$successMessage = null;
if ($_POST) {
$name = isset($_POST['name']) ? filter_var($_POST['name'], FILTER_SANITIZE_STRING) : null;
$email = isset($_POST['email']) ? filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) : null;
$message = htmlspecialchars($_POST['message']);
if (empty($name) || empty($email) || empty($message)) {
$errorMessage = 'Wypełnij wszystkie pola!';
}
if (is_null($errorMessage)) {
mail(
'twoj-adres@email.pl',
'Formularz kontaktowy',
"Treść wiadomości: $message \n\n Imię: $name \n\n Adres e-mail: $email",
"From: $name <$email>"
);
$successMessage = 'Wiadomość została wysłana';
}
}
?>
Definiujemy dwie zmienne $errorMessage i $successMessage, do których będziemy przypisywać komunikaty o błędach i sukcesie. Następnie warunek if ($_POST) sprawia, że kod w jego ramach wykona się tylko podczas akcji POST (czyli po wysłaniu formularza przez klienta).
Formularz kontaktowy będzie zawierał trzy pola do wypełnienia: Imię, Adres e-mail i Treść wiadomości. Dlatego definiujemy trzy zmienne $name, $email i $message. Każda z nich odbiera dane z formularza i je waliduje.
Jeśli któreś z pól formularza jest puste (warunki z empty()), to zwrócimy komunikat z błędem "Wypełnij wszystkie pola!".
Jeśli wszystkie pola są wypełnione, to korzystamy z funkcji PHPowej mail().
Pierwszy argument to adres e-mail, na który formularz kontaktowy zostanie wysłany. Drugi to tytuł wiadomości jaki otrzymamy. Trzeci argument to treść wiadomości, czyli wklejamy do niej pola z formularza klienta. Ostatni argument to nagłówek From, czyli podstawiamy Imię klienta i jego adres e-mail (po otrzymaniu wiadomości będziemy mogli wówczas bezpośrednio klientowi odpisać).
Na koniec zwracamy komunikat w zmiennej $successMessage o tym, że wiadomość została wysłana.
3. Kod HTML
Pozostał już tylko kod HTML, który odpowiada za wyświetlenie formularza. Pod kodem jego wyjaśnienie.
<div class="container">
<div class="row">
<div class="col col-md-6 offset-md-3">
<h3 class="my-5">Formularz kontaktowy</h3>
<?php if ($errorMessage) : ?>
<div class="alert alert-danger"><?php echo $errorMessage; ?></div>
<?php endif; ?>
<?php if ($successMessage) : ?>
<div class="alert alert-success"><?php echo $successMessage; ?></div>
<?php endif; ?>
<form method="POST">
<div class="mb-3">
<label for="name" class="form-label">Imię</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Adres e-mail</label>
<input type="email" class="form-control" id="email" name="email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Treść wiadomości</label>
<textarea class="form-control" id="message" name="message" rows="3"></textarea>
</div>
<div class="mb-3">
<input class="btn btn-primary" type="submit" value="Wyślij formularz">
</div>
</form>
</div>
</div>
</div>
Na początku korzystamy z Bootstrapowych klas, dzięki którym formularz kontaktowy będzie wyświetlony na środku strony, będzie zawierał odstępy etc.
Dzięki sprawdzamy czy zmienna z PHP $errorMessage nie jest pusta. Jeśli zawiera wiadomość to wyświetlamy alert z klasą alert-danger, dzięki czemu komunikat będzie w kolorze czerwonym.
Analogicznie z $successMessage. Jeśli będzie zdefiniowany komunikat o powodzeniu, to wyświetlamy komunikat w kolorze zielonym.
Następnie dodajemy ramę formularza i jego kolejne pola: name, email i message. Na końcu znajduje się przycisk do wysłania formularza.
Warto zobaczyć
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Kwiecień 2024).
Data publikacji: Wtorek, 6.04.2021. Tagi: css, formularze, html, php, poczta, skrypty. Źródło obrazka Pixabay, Font awesome.