Prosty formularz kontaktowy w PHP

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Dzięki formularzowi wysłanie wiadomości będzie dla klienta szybsze, a strona w odbiorze bardziej profesjonalna.

Pierwsza wersja tej porady została opublikowana 18 maja 2010 roku. Poniższy artykuł został zaktualizowany.

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.

Kategorie: HTML + CSS, PHP + MySQL. Tagi: #css, #formularze, #html, #php, #poczta, #skrypty. Źródło obrazków: Pixabay, Font awesome.