Formularze, przyciski i widżety

Moduł 4: Strony, wygląd i funkcje · Czas czytania: 8 min

Cel lekcji: Po tej lekcji potrafią Państwo skonfigurować formularz kontaktowy (odbiorca, potwierdzenie, strona z podziękowaniem, ochrona przed spamem, newsletter i sposób wysyłki), dodać pływające przyciski WhatsApp i kontaktu oraz osadzić widżet innej usługi. Wiedzą też Państwo, kiedy warto użyć opcji Własny kod i Własny HTML.

Kluczowe pojęcia: formularz kontaktowy, odbiorca, e-mail z potwierdzeniem, strona z podziękowaniem, captcha, podwójna rejestracja (double opt-in), sposób wysyłki, pływający przycisk, widżet, kod do osadzenia, zgoda, Własny kod, Własny HTML

Formularz kontaktowy: dwa miejsca

Formularz na stronie składa się z dwóch części. Sam formularz, z polami wypełnianymi przez odwiedzającego, znajduje się na stronie. Dodają go Państwo za pomocą sekcji Kontakt (przez Sekcje lub Dodaj sekcję) albo przez czat. To, co dzieje się po kliknięciu przycisku wysyłania, ustawiają Państwo w Ustawienia > Formularze. Ten panel zawsze konfigurują Państwo samodzielnie; czat tego nie robi.

Formularz zawsze zawiera pola imię i nazwisko, e-mail oraz wiadomość. Przez czat mogą Państwo dodać pola dodatkowe, najwyżej osiem: pole tekstowe, listę wyboru (na przykład "Wewnątrz czy na zewnątrz?"), e-mail, telefon, długie pole tekstowe, datę lub liczbę. Pole do przesłania pliku lub zdjęcia nie istnieje. Jeśli Schildersbedrijf Example chce otrzymywać zdjęcia zlecenia, umieszcza w tekście podziękowania: "Zdjęcia mogą Państwo przesłać na nasz adres e-mail."

Ważne: na darmowej stronie bez pakietu formularz jest widoczny, ale wyszarzony i nie wysyła wiadomości. Formularze faktycznie wysyłają wiadomości dopiero wtedy, gdy strona jest objęta pakietem AI Builder. Poniższe ustawienia mogą Państwo jednak przygotować już teraz; zostaną wtedy od razu zastosowane.

Ustawienia > Formularze

Panel składa się z pięciu bloków.

Odbieranie wiadomości. W polu Wysyłaj wiadomości na adres wpisują Państwo adres e-mail, na który trafiają wypełnione formularze. Jeśli pole pozostanie puste, wiadomości trafią na adres e-mail Państwa konta w WebOké. Prosimy wypełnić je świadomie. W polu Temat wiadomości e-mail wybierają Państwo temat (puste pole: "Nowa wiadomość przez stronę internetową"). W Po wysłaniu wybierają Państwo Pokaż podziękowanie z własnym tekstem albo Przekieruj na stronę: na stronę z podziękowaniem, którą tworzą Państwo sami i pomijają w menu (lekcja 4.1). Dzięki temu można później mierzyć, jak często formularz jest wysyłany.

Wysyłka przez. Sposób wysyłania wiadomości. Serwer WebOké działa od razu, z nadawcą noreply@weboke.site. Zalecany jest Własny adres e-mail (SMTP): wiadomość przychodzi wtedy z Państwa własnej domeny i rzadziej trafia do spamu. Opcja Skonfiguruj to za mnie sprawia, że kreator tworzy ten adres w Państwa domenie. W ramach własnego adresu e-mail można też wybrać usługę pocztową, taką jak Postmark, Brevo, Mailgun lub SendGrid. Dlaczego nadawca ma tak duże znaczenie, wyjaśniamy w lekcji 5.3.

Potwierdzenie dla odwiedzającego. Po włączeniu opcji Wyślij kopię odwiedzającemu odwiedzający otrzymuje e-mail z potwierdzeniem. To często pierwsza wiadomość, jaką ktoś od Państwa dostaje. Wybierają Państwo temat, Treść wiadomości (z {naam} w miejscu imienia odwiedzającego), Podpis oraz to, czy wypełniona wiadomość ma zostać dołączona. Kreator umieszcza Państwa tekst w szacie graficznej strony, z logo. Opcja Niech AI napisze ten tekst przygotuje propozycję.

Ochrona przed spamem. Każdy formularz ma zawsze niewidoczne zabezpieczenie: ukryte pole i limit czasowy. Zatrzymuje ono większość spamu, a odwiedzający niczego nie zauważają. Jeśli mimo to otrzymują Państwo dużo spamu, prosimy wybrać dodatkowe zabezpieczenie, czyli captcha: Cloudflare Turnstile lub hCaptcha. Należy w tym celu założyć bezpłatne konto w tej usłudze i wpisać Site key oraz Secret key. Captchę warto włączyć dopiero wtedy, gdy jest potrzebna: każdy dodatkowy krok zniechęca odwiedzających.

Newsletter. Mogą Państwo dodać do formularza pole wyboru, za pomocą którego odwiedzający zapisują się w Mailchimp, Laposta, Brevo lub MailerLite. Dodawane są tylko osoby, które same zaznaczą to pole. Zawsze z podwójną rejestracją: odwiedzający najpierw potwierdza zapis przez e-mail. W Laposta i MailerLite włączają to Państwo samodzielnie w danej usłudze; kreator podpowie, gdzie. Bez podwójnej rejestracji każdy mógłby dopisać do Państwa listy cudze adresy.

Ponadto: jeden odwiedzający może wysłać najwyżej 5 wiadomości na godzinę. Jeśli mają Państwo politykę prywatności, pod formularzem pojawia się do niej link. Formularz zbiera dane osobowe; co należy w związku z tym zapewnić, opisujemy w lekcji 7.1.

Pułapka: po każdej zmianie prosimy samodzielnie przetestować formularz, z innego adresu niż adres odbiorczy. Prosimy też zajrzeć do folderu spam i sprawdzić, czy potwierdzenie dociera do "odwiedzającego".

Pływające przyciski

W Ustawienia > Przyciski dodają Państwo przyciski, które pozostają widoczne na dole każdej strony, po prawej lub po lewej (Róg: Prawy dolny lub Lewy dolny).

• Numer WhatsApp: w formacie międzynarodowym, z numerem kierunkowym kraju (na przykład +31 dla numeru holenderskiego, bez początkowego 0, lub +48 dla numeru polskiego). Jeśli pole pozostanie puste, przycisk WhatsApp się nie pojawi. Można dodać Wstępnie wypełnioną wiadomość, na przykład "Poproszę o wycenę prac malarskich." Przycisk otwiera rozmowę z Państwa numerem.
• Pływający przycisk kontaktu: otwiera formularz kontaktowy w okienku. Wiadomość trafia na ten sam adres co z formularza. Wybierają Państwo Tekst na przycisku.

W podglądzie przyciski są umieszczone nieco wyżej niż na prawdziwej stronie, aby nie zasłaniał ich przycisk pomocy kreatora.

Uwaga: przycisk WhatsApp obiecuje szybką odpowiedź. Jeśli czytają Państwo WhatsApp tylko wieczorem, lepiej wybrać przycisk kontaktu.

Widżety innych usług

Widżet to fragment innej usługi na Państwa stronie: film YouTube, mapa Google Maps, kalendarz rezerwacji Calendly, Państwa Instagram, playlista Spotify. W przypadku wielu usług wystarczy link; kreator sam tworzy odtwarzacz lub formularz. Przykłady: YouTube, Vimeo, Spotify, Calendly, Google Maps (wystarczy adres), Kalendarz Google, Instagram i TikTok (wystarczy Państwa @nazwa) oraz Formularze Google. W przypadku innych usług, takich jak Salonized, Trustpilot czy Bandcamp, wklejają Państwo kod do osadzenia: fragment kodu, który otrzymują Państwo w danej usłudze, aby umieścić go na stronie internetowej.

Jak to zrobić: wystarczy napisać w czacie, dodając link ("umieść mapę dojazdu pod blokiem kontaktowym, adres ul. Wiejska 1"), wkleić kod w czacie albo wybrać w Sekcje sekcję Widżet. Kreator rozpoznaje usługę, proponuje wysokość i nagłówek oraz ostrzega, jeśli coś nie będzie działać. Jeśli umieszczenie widżetu zlecą Państwo AI, jest to polecenie i zużywa edycje; wcześniej widzą Państwo, ile. Umieszczony widżet zmieniają Państwo przyciskiem Edytuj kod na bloku w podglądzie.

Trzy rzeczy, o których warto wiedzieć:

1. Widżet ładuje się dopiero po wyrażeniu zgody. Usługi zewnętrzne często zapisują pliki cookie lub śledzą odwiedzających. Przy włączonym banerze cookie widżet ładuje się dopiero wtedy, gdy odwiedzający zgodzi się na ten rodzaj plików cookie. Usługa automatycznie pojawia się w banerze cookie w części "Co teraz działa na stronie". Następnie prosimy sprawdzić również politykę prywatności (lekcje 7.1 i 7.2).
2. Kalendarz Google musi być publiczny. Prywatnego kalendarza nikt inny nie zobaczy. W Kalendarzu Google prosimy udostępnić publicznie tylko osobny kalendarz z informacjami, które mogą widzieć odwiedzający, nigdy kalendarz osobisty.
3. Niebezpieczny kod nie trafi na stronę. Kodu, który może przesyłać dalej dane odwiedzających, ukrywa swoje działanie lub ładuje coś z nieznanej strony, AI nie umieści na Państwa stronie. Wyjaśni też, dlaczego.

Własny kod i Własny HTML w skrócie

Dla zaawansowanych użytkowników są dwa miejsca.

Własny kod znajduje się na dole w Ustawienia > Integracje: kod, który ma być na każdej stronie, W sekcji head każdej strony lub Na dole każdej strony. Na przykład skrypt ładujący usługi czatu lub widżetu z opiniami. Kreator nie sprawdza tego kodu ("Tego kodu nie sprawdzamy"). Znane usługi są blokowane przez baner cookie do czasu wyrażenia zgody. Opcję Ten kod jest niezbędny prosimy zaznaczać tylko dla kodu, który nie śledzi odwiedzających, ponieważ wtedy ładuje się on od razu. W podglądzie w kreatorze własny kod nie jest wykonywany, na prawdziwej stronie już tak. Na darmowej stronie własny kod nie działa. Do identyfikatora pomiarowego, takiego jak Google Analytics, nie używają Państwo opcji Własny kod, lecz stałego pola w Integracje (lekcja 7.2).

Własny HTML to sekcja w Sekcje. Wklejają Państwo własny HTML i ewentualnie CSS, a później zmieniają go przyciskiem Edytuj HTML. Kolory i czcionki są zgodne z Państwa identyfikacją wizualną. Skrypty, ramki iframe i formularze nie działają w tym miejscu; do tego służy widżet.

Z obu opcji prosimy korzystać tylko wtedy, gdy nie ma innego wyjścia: cudzy kod stanowi ryzyko dla szybkości, bezpieczeństwa i prywatności.

W kreatorze: jak to zrobić

1. Prosimy umieścić sekcję Kontakt z formularzem na stronie kontaktowej.
2. Prosimy otworzyć Ustawienia > Formularze i wypełnić pole Wysyłaj wiadomości na adres.
3. W Wysyłka przez prosimy wybrać własny adres e-mail albo pozostawić serwer WebOké, dopóki domena nie będzie gotowa (lekcja 5.3).
4. Prosimy włączyć Wyślij kopię odwiedzającemu i napisać własny tekst.
5. W Po wysłaniu prosimy wybrać podziękowanie lub stronę z podziękowaniem.
6. W razie potrzeby prosimy dodać w Ustawienia > Przyciski przycisk WhatsApp lub przycisk kontaktu.
7. Prosimy opublikować stronę i wysłać wiadomość testową.

Podsumowanie

• Formularz znajduje się na stronie; co się z nim dzieje, ustawiają Państwo w Ustawienia > Formularze.
• Pole Wysyłaj wiadomości na adres należy wypełnić świadomie; jako nadawcę najlepiej wybrać własny adres e-mail.
• Na darmowej stronie formularz nie wysyła wiadomości; dołączenie pliku nie jest nigdy możliwe.
• Pływające przyciski WhatsApp i kontaktu znajdują się w Ustawienia > Przyciski.
• Widżety ładują się dopiero po wyrażeniu zgody; Własny kod i Własny HTML są przeznaczone dla zaawansowanych.

Quiz

Zadanie

Zadanie D4.3: Formularz kontaktowy i widżet. Prosimy w pełni skonfigurować formularz i umieścić jeden widżet, który naprawdę coś wnosi.

Lista kontrolna:

• [ ] sekcja Kontakt z formularzem na stronie kontaktowej;
• [ ] pole Wysyłaj wiadomości na adres wypełnione adresem, który czytają Państwo codziennie;
• [ ] wybrany sposób wysyłki i zrozumienie, dlaczego;
• [ ] potwierdzenie dla odwiedzającego z własnym tekstem;
• [ ] ustawione podziękowanie lub strona z podziękowaniem;
• [ ] umieszczony jeden widżet (na przykład mapa lub kalendarz rezerwacji) i sprawdzone, że widnieje w banerze cookie;
• [ ] strona opublikowana i wysłana wiadomość testowa (tylko z pakietem; na darmowej stronie sprawdzają Państwo ustawienia).

Pytania:

1. Na jaki adres trafiają wiadomości z formularza i przez jaki sposób wysyłki?
2. Jaki widżet Państwo wybrali, co daje on odwiedzającym i co widzi odwiedzający, który nie wyrazi zgody?
3. Czy wiadomość testowa dotarła i czy potwierdzenie trafiło do "odwiedzającego", czy do spamu?

Po kliknięciu "Gotowe" zobaczą Państwo przykładową odpowiedź: Schildersbedrijf Example wysyła wiadomości na info@example.com przez własny adres e-mail w swojej domenie; widżet to mapa Google Maps z adresem, która ładuje się dopiero po wyrażeniu zgody, a w przeciwnym razie pokazuje pole z przyciskiem do wyrażenia zgody; wiadomość testowa dotarła, potwierdzenie również, nie do spamu.

Więcej informacji

• Formularz kontaktowy na Państwa stronie internetowej: wysyłanie danych z pól e-mailem i ochrona przed spamem
• Bezpłatny kurs Poczta e-mail w porządku: konfiguracja i prawidłowe dostarczanie 7.3: Poczta ze strony internetowej i z formularzy
• Bezpłatny kurs Poczta e-mail w porządku: konfiguracja i prawidłowe dostarczanie 7.2: Zgoda, wypisanie się i czysta lista
• Korzystanie z funkcji „Kliknij, aby czatować” (Centrum pomocy WhatsApp): https://faq.whatsapp.com/5913398998672934
• Tworzenie publicznego Kalendarza Google i zarządzanie nim (Pomoc Kalendarza Google, w języku angielskim): https://support.google.com/calendar/answer/37083