Piszemy wtyczkę w WordPress do obsługi formularzy

Opublikowano przez
Spis treści hide
1 Formularze w HTML
2 Wysyłanie formularza w WordPress
3 Zapisanie w bazie
4 Shortcode
5 Podsumowanie

Formularze są jednym z podstawowych narzędzi stosowanych w sieci do zbierania informacji od użytkowników. Mogą występować w wielu różnych postaciach, począwszy od prostych pól tekstowych, przez przyciski wyboru, po zaawansowane listy rozwijane. Formularze są nieodłącznym elementem stron internetowych i aplikacji, które wymagają interakcji użytkownika, takie jak sklepy internetowe, serwisy społecznościowe czy platformy edukacyjne.

Przy pomocy formularzy użytkownik może przesyłać dane na serwer, gdzie są one przetwarzane i zwykle zapisywane w bazie danych. Najprostszy przykład to formularz logowania, gdzie użytkownik wpisuje swoją nazwę użytkownika i hasło, które są następnie wysyłane na serwer w celu weryfikacji. Inne typowe zastosowania to rejestracja konta, złożenie zamówienia w sklepie internetowym czy przesłanie opinii.

Tworzenie formularzy wiąże się z pewnymi wyzwaniami. Poza samym designem i funkcjonalnością, ważne jest także zapewnienie bezpieczeństwa (by dane przesyłane były chronione i niepodatne na ataki) oraz użyteczności (by użytkownik mógł łatwo i intuicyjnie korzystać z formularza).

W dalszej części artykułu zajmiemy się konkretnym kodem do tworzenia formularzy oraz omówimy ich różne aspekty i funkcje

Formularze w HTML

Pola formularzy w HTML-u tworzy się używając taga <input>. Etykietę tekstową do pola możemy dodać za pomocą <label>. Wszystkie pola natomiast powinny znaleźć się wewnątrz <form>.

Nie będę tutaj omawiał wszystkich typów formularzy. Jeżeli ktoś nie zna tematu odsyłam do dokumentacji na w3schools – HTML input tag.

Utwórzmy nasz formularz kontaktowy (dołączymy także bibliotekę boostrap 5.3)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">

<form method="POST">

  <div class="mb-3">
    <label for="eskim_name" class="form-label">Wpisz swoje imię, nazwisko lub nick</label>
    <input class="form-control" type="text" placeholder="Imię" name="eskim_name" maxlength=30 required>
  </div>

  <div class="mb-3">
    <label for="eskim_email" class="form-label">Podaj adres e-mail</label>
    <input class="form-control" type="email" placeholder="Adres e-mail" name="eskim_email" maxlength=30 required>
  </div>

  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" name="mach1" checked>
      <label class="form-check-label" for="mach1">
        Oczywiście, że jestem maszyną
      </label>
    </div>
  </div>

  <div class="mb-3">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" name="mach2" checked>
      <label class="form-check-label" for="mach2">
        Ani myślę być robotem
      </label>
    </div>
  </div>

  <div class="mb-3">
    <div class="form-floating">

      <label for="eskim_description">W jakiej sprawie się kontaktujesz?</label>
      <textarea class="form-control" placeholder="Opis" name="eskim_description" maxlength=2000 style="height: 100px" required></textarea>

    </div>
  </div>

  <div class="mb-3">

    <input type="submit" value="Wyślij formularz"></input>

  </div>

</form>

Efekt:

Wykorzystując bootstrap utworzyliśmy całkiem schludny formularz. Jednak dodanie w środku kodu importu stylu zdecydowanie nie jest zalecane. Aby dodać css do naszej strony możemy użyć funkcji wp_register_style oraz wp_enqueue_style.

wp_register_style ('eskim_bootstrap53', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css');
wp_enqueue_style ('eskim_bootstrap53');

Pierwsza funkcja zapamiętuje styl, druga natomiast „wywołuje” go po nazwie (nazwa musi być unikatowa) i dołącza do aktualnej strony. W ten sposób będziemy go ładować tylko wtedy gdy potrzebujemy. Rejestrację stylu ustawiamy np. podczas inicjowania strony.

add_action('init', function () { 
  wp_register_style ('eskim_bootstrap53', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css');
});

Natomiast sam styl dodajemy w miejscu, gdzie go będziemy używać.

W podobny sposób możemy dodać skrypty JavaScript

wp_register_script ('eskim_bootstrap53', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.min.js');
wp_enqueue_script ('eskim_bootstrap53');

Bootstrap jest powszechnie używaną biblioteką i często może być już dołączony do szablonu, którego używasz. Ponadto jego dodanie może też wpłynąć na szatę graficzną całego serwisu. Miej to na uwadze.

Wysyłanie formularza w WordPress

WordPress posiada zabezpieczenie formularzy przed atakami hakerskimi. Działa to w ten sposób, że podczas wysyłania formularza z poziomu WordPressa do samego siebie, dodawana jest losowa wartość, która następnie jest sprawdzana podczas odczytu formularza. Inaczej mówiąc poza danymi, które wypełnił użytkownik, należy dodać również pola ukryte zawierające losowy ciąg znaków.

Aby dodać ukryte pole <input> z losową wartością wystarczy wywołać funkcję wp_nonce_field np. tak.

wp_nonce_field ( 'eskim_contact_form' );

Przy odbieraniu danych powinniśmy weryfikować to pole. Służy do tego funkcja wp_verify_nonce

if (isset ($_REQUEST['_wpnonce']) && wp_verify_nonce ($_REQUEST['_wpnonce'], 'eskim_contact_form')) {

  // zapisz formularz
}

Zapisanie w bazie

Po odebraniu danych od użytkownika możemy chcieć je zapisać w bazie lub np. wysłać na maila. Zapisywanie w bazie WordPressa omówiłem szczegółowo w tym artykule – Korzystanie z bazy danych WordPress.

Najprostszym sposobem obsługi wiadomości będzie jednak dodanie ich jako komentarza za pomocą funkcji wp_insert_comment oraz sanityzujemy dane używając wp_slash.

$data = [
  'comment_post_ID' => 1,
  'comment_author' => $_POST['eskim_name'],
  'comment_author_email' => $_POST['eskim_email'],
  'comment_content' => $_POST['eskim_description']
];

wp_insert_comment ( wp_slash ($data) );

Dzięki takiemu podejściu nie musimy budować osobnego interfejsu do przeglądania wiadomości. Ponadto zyskujemy też kontrolę nad np. spamem, bo dowolnie oprogramowujemy, które wiadomości mają być zapisane.

Identyfikator posta z którego zostało wywołane zapytanie możemy przekazać dodatkowo w formularzu za pomocą <input type="hidden">

<input type="hidden" name="postID">
<?php get_the_ID(); ?>
</input>

Shortcode

Na koniec wypadałoby jakoś dodać nasz formularz do strony. Możemy to zrobić z użyciem skrótów kodowych. Szczegóły związane z ich używaniem opisałem tutaj – Kurs tworzenia wtyczek w WordPress – skróty kodowe, więc nie będę się zagłębiał w temat. Wystarczy pod add_shortcode podpiąć funkcję zawierająca nasz formularz:

add_shortcode('eskim_pl_contact_form', 'eskim_pl_contact_form');

Tradycyjnie kod na GitHub

Podsumowanie

  1. Do rejestracji stylu w WordPress służy funkcja wp_register_style.
  2. Aby wywołać zajestrowany styl użyjemy funkcji wp_enqueue_script.
  3. Dla bezpieczeństwa podczas wysyłania formularza można dodać losową wartość w ukrytym polu input. Do wygenerowania pola służy funkcja wp_nonce_field, a jego weryfikacji – wp_verify_nonce.
  4. Aby dodać komentarz do bazy danych WordPress możemy użyć wp_insert_comment.
  5. Aby pobrać identyfikator wpisu lub strony możemy skorzystać z funkcji get_the_ID.
  6. Dodanie shortcode odbywa się z wykorzystaniem funkcji add_shortcode.

Powiązane wpisy:

updateDystrybucja własnej wtyczki WordPress z prywatnego serwera witamyKorzystanie z bazy danych WordPress Rower WordpressKurs tworzenia wtyczek w WordPress