Jak zrobić Formularz zgodny z RODO na mojej stronie w WordPress

Obrazek dla Jak zrobić Formularz zgodny z RODO na mojej stronie w WordPress

Instalacja wtyczki

Potrzebujemy do tego popularnej wtyczki do formularzy kontaktowych zwanej Contact Form 7.

Instalujemy ją z oficjalnego repozytorium.
Wtyczki->Dodaj nową

cf7 wtyczka instalacja

Po czym aktywujemy wtyczkę, klikając przycisk Włącz.

Konfiguracja formularza

Następnie pojawi nam się nowa pozycja w Menu bocznym -> Formularze.

Tworzymy nowy formularz Formularze->Dodaj nowy

Nadajemy nazwę formularza np. „Mój Formularz Kontaktowy”.

nowy formularz cf7 rodo

Tworzenie nowego formularza

Następnie w pole formularza w okienku poniżej wklejamy następujący kod.

<label> Imię i nazwisko (wymagane)
    [text* imie-nazwisko] </label>

<label> Telefon (wymagane)
    [tel* telefon] </label>

<label> Twój email (wymagane)
    [email* adres-email] </label>

<label> Temat
    [text* temat] </label>

<label> Treść wiadomości
    [textarea tekst] </label>

[acceptance zgoda-rodo]
Administratorem Państwa danych osobowych jest XXXX, tel: +48 XXX XXX XXX, e-mail: XXX@XXX.XX. Państwa dane będą przetwarzane w celu obsługi wysłanego zapytania i tak długo, jak to konieczne do obsługi tego zapytania. Mają Państwo prawo do dostępu do swoich danych, ich sprostowania, usunięcia, ograniczenia przetwarzania, wniesienia sprzeciwu wobec przetwarzania oraz przeniesienia danych. Mogą Państwo również wnieść skargę do organu nadzorczego. Podanie danych jest dobrowolne, ale niezbędne do obsługi zapytania. Podstawa prawna: przetwarzanie jest niezbędne do podjęcia działań na żądanie osoby, której dane dotyczą, przed zawarciem umowy.

[submit "Wyślij"]

Informacja:
Jest to podstawowy kod formularza z podświetloną w linii 17  z bazową regułką wyrażania zgody RODO. Zawsze należy zasięgnąć opinii prawnej czy treść zgody odpowiada własnej sytuacji prawnej.

kod formularza contact form 7 przykład

Oczywiście miejsca XXX wypełniamy własnymi danymi (Podmiot, telefon, e-mail – czyli np. specjalną w tym celu utworzoną skrzynkę email – ado@mojadomena.pl)

Wersja dla Bootstrap

Jeśli Wasz motyw korzysta z frameworka Bootstrap – możecie użyć poniższego kodu.

<div class="row">
    <div class="col-lg-6 col-sm-12">
        <div class="form-group">
            <label> [text* imie-nazwisko placeholder "Imię i Nazwisko"] </label>
        </div>
    </div>
    <div class="col-lg-6 col-sm-12">
        <div class="form-group">
            <label> [email* adres-email placeholder "Adres E-mail"] </label>
        </div>
    </div>
    <div class="col-lg-6 col-sm-12">
        <div class="form-group">
            <label> [text* temat placeholder "Temat"] </label>
        </div>
    </div>    
    <div class="col-lg-6 col-sm-12">
        <div class="form-group">
            [tel* telefon placeholder "Telefon kontaktowy"]
        </div>
    </div>
    <div class="col-lg-12 col-sm-12">
        <div class="form-group">
            [textarea* tekst placeholder "Wiadomość"]
        </div>
    </div>
    <div class="col-xs-12">
        <div class="form-group rodo"> [acceptance zgoda-rodo] Administratorem Państwa danych osobowych jest XXXX, tel: +48 XXX XXX XXX, e-mail: XXX@XXX.XX. Państwa dane będą przetwarzane w celu obsługi wysłanego zapytania i tak długo, jak to konieczne do obsługi tego zapytania. Mają Państwo prawo do dostępu do swoich danych, ich sprostowania, usunięcia, ograniczenia przetwarzania, wniesienia sprzeciwu wobec przetwarzania oraz przeniesienia danych. Mogą Państwo również wnieść skargę do organu nadzorczego. Podanie danych jest dobrowolne, ale niezbędne do obsługi zapytania. Podstawa prawna: przetwarzanie jest niezbędne do podjęcia działań na żądanie osoby, której dane dotyczą, przed zawarciem umowy.
        </div>
    </div>

[submit "Wyślij"]

</div>


Następnie przełączamy się na zakładkę E-mail.

Widnieje tam wykrzyknik (!) z informacją o błędzie.

Tak, ponieważ używając kodu formularza wprowadziliśmy własne nazwy elementów formularza (zamiast angielskich) takie jak [imie-nazwisko] [telefon] [adres-email] [temat] [tekst] [zgoda-rodo] te elementy należy wprowadzić do ustawień wysyłanego e-maila.

cf7 formularz rodo zgoda

  • Odbiorca: tu podajmy swój mail, na który ma przyjść wiadomość do Was
  • Nadawca: tak będzie zaadresowany e-mail w polu 'Nadawca’
  • Temat: tu podajemy nazwę [temat]  z pola formularza
  • Additional headers: czyli dodatkowe nagłówki to Reply-To: wstawiamy naszą wartość [adres-email]

I przechodzimy do sekcji Message Body: czyli Ciało Wiadomości

Tu analogicznie zmieniamy wartości na nasze pola. Możemy posłużyć się gotowym kodem poniżej kopiując i wklejając go w pole.

Nadawca: [imie-nazwisko] <[adres-email]>
Temat: [temat]

Telefon: [telefon]

Treść wiadomości:
[tekst]

Zgoda RODO: [zgoda-rodo]

Zapisujemy ustawienia naszego formularza, klikając w przycisk Zapisz. Uzyskamy dzięki temu shortcode, który wkleimy w dowolne miejsce na stronie.

shortcode cf7 formularz rodo

Nasz shorctode

Następnie wklejamy nasz shortcode w miejscu, w którym chcemy aby pojawił się formularz. Może być to np. podstrona Kontakt.

shortcode formularz recaptcha

Jak przystało na każdy shortcode – zostanie on zamieniony na odpowiedni element na froncie strony, w tym przypadku – nasz formularz kontaktowy.

klauzula rodo formularz zgoda

formularz contact form 7 Wersja Bootstrap

formularz contact form 7 Wersja Bootstrap

Następnie zajmiemy się zabezpieczeniem naszego formularza przed BOT-ami czyli Google reCaptchą.

Miniaturka Adam
Adam

Idealistyczny DevOps/Backend developer po służbie w formacji I-szej linii wsparcia, od 9 lat sercem związany z HitMe, przez którego teraz na blogu pojawia się tyle artykułów poświęconych platformie WordPress ;-).