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

Czas czytania

9 min.

Instalacja wtyczki

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

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

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”.

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.

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.

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.