Jak zrobić formularz kontaktowy w Divi?

W tym artykule powiem Ci jak zrobić formularz kontaktowy w Divi – z obowiązkowym checkboxem. Wiem, że część osób nie chciała korzystać z tego formularza, bo RODO, a checkboxa ustawić się nie da. A jednak! Da się. I ja Ci pokażę jak 😉

Zaczynamy oczywiście od wejścia w edytor wizualny (lub edytor na zapleczu) w Divi. Dodajemy moduł – formularz kontaktowy – i możemy zaczynać pracę.

Nasz formularz po dodaniu go do strony ma już kilka pól automatycznie dodanych – czyli nazwę, adres mejlowy i pole na treść wiadomości. Ale my oczywiście możemy sobie to przeedytować.

Jak zrobić formularz kontaktowy? – edycja pól

Żeby zmienić pola w formularzu kontaktowym, musimy wejść w ustawienia modułu, a następnie z listy pól wybrać to, które chcemy zmienić – również klikając na ikonę ustawień.

Jeśli nie potrafisz jeszcze poruszać się po edytorze w Divi – zachęcam Cię do skorzystania z artykułu na ten temat.

No dobrze, ale wróćmy do naszych pól. W ustawieniach pojedynczego pola znajdziemy odpowiednie informacje do uzupełnienia/zmiany:

• Tekst – tu możemy zmienić nazwy naszego pola:
  • Pole ID – to jest ID naszego pola, które możemy potem wykorzystać w szablonie wiadomości, które zostanie do nas wysłana. Najlepiej żeby ID było bez polskich znaków i bez spacji. ID widoczne jest również na liście pól w ustawieniach formularza,
  • Tytuł – to jest nazwa pola, widoczna dla użytkownika formularza.
• Opcje pól – tu możemy ustawić opcje dla naszego pola:
  • Rodzaj – tu wybieramy rodzaj, czyli czy to ma być np. pole wprowadzania tekstu, czy np. checkbox,
  • Opcje – ta część ustawień wyświetla się tylko w polach, w których mamy kilka opcji do wyboru (czyli w polu wyboru, przyciskach opcji i menu rozwijanym). Możemy tu dodać odpowiednie opcje do wyboru – czyli dodać kilka checkboxów, kilka opcji (z której wybrać można tylko jedną) lub pozycje w menu rozwijanym. Do każdej opcji możemy dodać link, klikając na ikonę łańcuszka/przekreślonego kwadratu,
  • Minimalna długość – tu możemy określić minimalną długość pola wprowadzenia,
  • Maksymalna długość – tu możemy określić maksymalną długość pola wprowadzenia,
  • Dozwolone znaki – tu możemy określić dozwolone znaki pola wprowadzenia – np. tylko cyfry, tylko litery, lub mieszane,
  • Wymagane pole – tę opcję zaznaczamy, jeśli chcemy by nasze pole było polem wymaganym do przesłania formularza.
• Warunki logiczne – tu możemy ustawić warunki logiczne (które omówimy w dalszej części artykułu).

Jak już mamy ustawione wszystkie pola, które chcemy dodać w naszym formularzu, możemy zająć się checkboxem.

Jak dodać checkbox do formularza?

Żeby dodać checkbox do formularza, musimy w jego ustawieniach na liście pól kliknąć ikonę plusa – wtedy doda nam się kolejne pole – a następnie wejść w edycję tego pola. Ustawiamy odpowiednie opcje w formularzu:

• Pole ID – np. checkbox,
• Tytuł – np. zgody RODO, albo checkbox – oba ustawienia zależą od Twoich preferencji.
• Rodzaj – ople wyboru,
  • Opcje – zostawiamy jedną opcję, a w miejscu „Nazwa” wpisujemy treść naszej zgody marketingowej (najlepiej ją skopiować, np. z notatnika). Następnie klikamy na ikonę dodania linku i w polu Link URL wklejamy link do polityki prywatności, a w miejscu Nowa nazwa odsyłacza wpisujemy „Polityka prywatności”,
  • Wymagane pole – zaznaczamy, że tak.

I już! Nasz checkbox jest gotowy!

Jak ustawić formularz kontaktowy w Divi, żeby działał prawidłowo?

Teraz omówimy sobie pozostałe ustawienia formularza kontaktowego. W zakładce Zawartość znajdziemy jeszcze kilka opcji, które trzeba uzupełnić

Tekst

Tutaj możemy ustawić dodatkowe teksty, które będą się przy naszym formularzu wyświetlać:

• Tytuł – tu nadajemy tytuł formularza – jeśli chcemy taki mieć – np. „Skontaktuj się z nami”,
• Wiadomość o zakończeniu sukcesem – tutaj wpisujemy treść wiadomości, która wyświetli się osobom po wypełnieniu i poprawnym przesłaniu formularza,
• Przycisk przesyłania – tu wpisujemy tekst, który chcemy, żeby znalazł się w przycisku (domyślnie jest to „Prześlij).

Adres mejlowy

Tutaj ustawiamy sobie wysyłkę wiadomości, która została napisana przez osobę uzupełniającą formularz:

• Adres mejlowy – tutaj podajemy nasz adres mejlowy, na który chcemy otrzymywać wiadomości,
• Wzór wiadomości – tutaj wpisujemy wzór wiadomości, która ma się do nas wysyłać. Jeśli chcemy, by w treści znalazły się informacje z formularza (a chcemy!) – musimy dodać ID konkretnego pola, zawartego między znakami %%, np. %%Email%%.

Przekieruj

Zamiast po wypełnieniu formularza wyświetlać wiadomość o zakończeniu sukcesem – możemy przekierować użytkownika do innej strony. W tym celu włączamy opcję Włącz przekierowanie URL. Następnie w polu Przekieruj URL wklejamy link strony, do której chcemy przekierowywać użytkownika.

Spam protection

Tutaj możemy uruchomić jedną z dwóch opcji, która ma chronić naszą skrzynkę przed zalewem SPAMu:

• Use A Spam Protection Service – zaznaczając tę opcję, możemy użyć ReCaptchy od Google. W tym celu trzeba kliknąć na duży, szary przycisk DODAJ, a następnie uzupełnić pola Nazwa konta, Site Key oraz Secret Key. Wszystkie te dane możesz wygenerować na stronie reCaptchy od Google,
• Use Basic Captcha – jeśli zostawisz tę opcję zaznaczoną, przy przycisku przesyłania formularza pojawi się proste zadanie matematyczne, które musi zostać wykonane przez użytkownika by mógł przesłać formularz.

Jak ustawić wygląd formularza?

Jak wszystko w Divi – również w formularzu kontaktowym możemy bardzo ładnie ustawić wygląd naszego formularza kontaktowego. Wystarczy przełączyć się na zakładkę Design i ustawić wygląd. W tym artykule poruszę ustawienia, które pojawiają się tylko w ustawieniach formularzy:

• Pola – tu ustawiamy wygląd pól formularza, uzupełnianych przez użytkownika:
  • Pola kolor tła – kolor tła pola naszego formularza,
  • Kolor tekstu Pola – kolor tekstu pola naszego formularza (zarówno tego, który się w nim pojawia, jak i tego, który użytkownik wpisuje w formularzu),
  • Pola Kolor tła ostrości – kolor tła pola, które jest aktualnie wypełniane przez użytkownika,
  • Pola kolor tekstu ostrzenia – kolor tekstu pola, które jest aktualnie wypełniane przez użytkownika,
  • Margines Pola – margines ustawiamy, jeśli chcemy odsunąć pola od siebie,
  • Wypełnienie Pola – wypełnienie uzupełniamy, jeśli chcemy zmienić wysokość naszego pola, lub odsunąć tekst od krawędzi.
• Captcha tekst – jeśli korzystamy z matematycznej captchy, możemy ustawić wygląd tekstu – dokładnie tak samo jak w każdym module tekstowym.

No dobrze, to ustawienia formularza mamy już ogarnięte. Teraz została nam ostatnia – najbardziej zaawansowana rzecz. Warunki logiczne!

Warunki logiczne – o co chodzi?

Warunki logiczne służą do ukrywania pól. Jeśli chcemy uzależnić wyświetlanie określonego pola w zależności od tego, jak zostało uzupełnione inne – użyjemy właśnie warunku logicznego. Jak to zrobić? Wchodzimy w ustawienia pojedynczego pola (tego, które chcemy ukryć) -> Zawartość -> Warunki logiczne. Ustawiamy opcje:

• Włączyć – jeśli chcemy skorzystać z warunków logicznych, to ta opcja musi być ustawiona na „tak”,
• Związek – jeśli określimy więcej niż jedną regułę – możemy wybrać czy wszystkie warunki mają być spełniane automatycznie, czy wystarczy nam, że zostanie spełniony jeden. Odpowiednio będzie to zaznaczenie opcji wszystkie/dowolne,
• Reguły – tu określamy jak mają być uzupełniane pozostałe pola, żeby wyświetliło nam się obecnie edytowane. Z pierwszej listy wybieramy pole, na bazie którego chcemy wyświetlić nasze. Z drugiej – wybieramy jedną z zasad:
  • równe – gdy chcemy, by wybrane pole było równe określonej przez nas wartości (określone wartości wpisujemy w kolejnym okienku),
  • różne – gdy chcemy, by wybrane pole było różne od określonej przez nas wartości,
  • większe niż – gdy chcemy, by wybrane pole miało większą wartość niż określona przez nas (działa tylko dla pól liczbowych),
  • mniejsze niż – gdy chcemy, by wybrane pole miało niższą wartość niż określona przez nas,
  • zawiera – gdy chcemy, by wybrane przez nas pole w części pokrywało się z określoną przez nas wartością,
  • nie zawiera – gdy chcemy, by wybrane przez nas pole nie zawierało określonej przez nas wartości,
  • puste – gdy chcemy, by wybrane przez nas pole pozostało puste,
  • nie puste – gdy chcemy, by wybrane przez nas pole zostało wypełnione.

Jeśli – mimo tej rozpiski – nie do końca rozumiesz użycie warunków logicznych, polecam Ci zajrzeć do filmu, w którym pokazuję je w akcji!