Chciałbyś przygotować formularz na swojej stronie, ale chcesz zrobić go bez wtyczek? Duża ilość wtyczek może negatywnie wpłynąć nie tylko na prędkość naszej strony internetowej, ale też na jej bezpieczeństwo. Każdą wtyczkę możemy porównać do takich dodatkowe drzwi do naszej witryny. Wystarczy, że jedna z nich nie będzie przez nas aktualizowana lub jej twórca nie będzie wypuszczać aktualizacji, a nasze drzwi staną się luką w zabezpieczeniach naszej strony, czy furtką dla potencjalnego włamywacza.
Idealnym przykładem faktycznego zdarzenia była luka w zabezpieczeniach bardzo popularnej wtyczki do tworzenia formularzy w WordPressie: Contact Form 7. Co więcej na te podatność powstało wiele różnych exploitów, które są dostępne publicznie w internecie: np. w oficjalnym exploit database.
Dziś pokażemy Ci jak można zrobić taki prosty formularz, bez żadnych dodatkowych wtyczek! 🙂
Szkielet formularza – frontend
Przechodzimy do edycji naszego motywu: Kokpit > Wygląd > Edytor motywu.
Wybieramy aktywny motyw i wybraną przez siebie templatkę. Szkielet formularza możemy też np. umieścić jako widget, czy blok HTMLowy w builderach typu Divi, czy Elementor.
Przykładowy szkielet formularza:
<form class="form-kontaktowy" method="post" action="" >
<label for="email">Adres e-mail:</label>
<input type="email" required name="email" id="email" placeholder="np. kowalski@gmail.com"><br><br>
<label for="message">Wiadomość:</label>
<textarea type="text" required name="message" id="message" placeholder="Tu wpisz treść swojej wiadomości."></textarea><br>
<input type="submit" name="form-kontaktowy" class="form-kontaktowy-btn" value="Wyślij wiadomość">
</form>Powyższy formularz w formie widgetu, dodanego w naszym przypadku do stopki, prezentuje się następująco:
Teraz gdy mamy już przygotowany frontend dla naszego formularza, musimy przygotować dla niego odpowiednią funkcję, która go obsłuży.
Funkcja do wysyłki e-maili/formularza w WordPressie – backend
W celu stworzenia funkcji do obsługi naszego formularza w WordPressie, musimy znaleźć plik aktualnie aktywnego motywu i upewnić się, że plik, w którym umieścimy naszą funkcję, będzie wykorzystywany na stronie na której wyświetlamy jego frontend. Największą pewność będziemy mieć w przypadku takich plików jak header.php czy footer.php, które domyślnie zaczytywane są na wszystkich podstronach.
Przedstawimy teraz cały kod krok po kroku – na końcu tego punktu znajdziesz jednak cały kod – w całości, do skopiowania 🙂
Omówienie kodu do obsługi formularza
Gdy mamy już wybrany plik templatki, w którym umieścimy nasz kod do obsługi formularza, możemy przystąpić do jego pisania.
if( isset($_POST['form-kontaktowy']) && $_POST['email'] !== "" && $_POST['message'] !== "" ) {Całość kodu zaczynamy od jednego wielkiego if’a, w którym cała obsługa funkcji będzie się mieścić. Dzięki niemu funkcja ta będzie uruchamiana tylko i wyłącznie, gdy ktoś kliknie przycisk „Wyślij wiadomość” – czyli prześle formularz. Dodatkowo dodajemy dwa dodatkowe warunki w naszym if’ie, które sprawdzą, czy pola e-mail i wiadomość posiadają jakąś wartość.
$to = get_option('admin_email');
$subject = "Formularz kontaktowy ze strony: ".get_bloginfo('name');
$email = $_POST['email'];
$message = $_POST['message'];Powyższy kod stworzy dwie zmienne $to do którego zapiszemy adres administratora WordPressa oraz $subject, czyli temat wysyłanej z formularza wiadomości. Natomiast w dwóch ostatnich linijkach znajdziesz przypisanie adresu e-mail nadawcy podane w formularzu, do zmiennej $email i treści wiadomości do zmiennej $message.
Jeśli chcesz wysyłać formularz na inny e-mail, niż e-mail administratora WordPressa zamień pierwszą linijkę na poniższą:
$to = "docelowy-adres-email@domena.pl";$headers[] = 'From: Formularz <wordpress@TWOJA-DOMENA.PL>';
$headers[] = 'Reply-To: ' . $email . '';
$headers[] = 'Content-Type: text/html; charset=UTF-8';Powyższe linijki odpowiadają za e-mail, z którego będzie wysyłana treść formularza na Twoją skrzynkę. Ważne, by podmienić tutaj TWOJA-DOMENA.PL na swoją domenę, z której będzie wysyłany formularz. Odpowiadają również za przekazanie e-maila nadawcy – do którego będziemy wysyłać odpowiedź z naszej skrzynki mailowej. Ostatnia linijka odpowiada za ustawienie treści e-maila jako kod HTML, dzięki czemu możliwe jest jego wygodne formatowanie.
$sent = wp_mail($to, $subject, $message, $headers);Ta linijka kodu jest szczególnie ważna. Odpowiada ona bowiem za samo przesłanie stworzonych przez nas zmiennych na adres e-mail odbiorcy. Wynik tej operacji jest zapisywany do zmiennej $sent, co umożliwia późniejszą walidację ewentualnych błędów.
Omówiony kod w całości – do skopiowania
if( isset($_POST['form-kontaktowy']) && $_POST['email'] !== "" && $_POST['message'] !== "" ) {
$to = get_option('admin_email');
$subject = "Formularz kontaktowy ze strony: ".get_bloginfo('name');
$email = $_POST['email'];
$message = $_POST['message'];
$headers[] = 'From: Formularz <wordpress@TWOJA-DOMENA.PL>';
$headers[] = 'Reply-To: ' . $email . '';
$headers[] = 'Content-Type: text/html; charset=UTF-8';
$sent = wp_mail($to, $subject, $message, $headers);
}W ten sposób przygotowaliśmy w pełni funkcjonalny formularz do WordPressa bez potrzeby korzystania z jakichkolwiek wtyczek. Jak sami widzicie nie jest to specjalnie skomplikowane dzięki wykorzystaniu wbudowanych WordPressowych funkcji. Nie jest on szczególnie zaawansowany, ale w zupełności spełnia podstawowe funkcjonalności. Można go rozbudować o dodatkowe pola lub dodać informację o wysłaniu wiadomości lub błędzie.
