Formuláre, tlačidlá a widgety

Modul 4: Stránky, vzhľad a funkcie · Čas čítania: 8 minút

Cieľ lekcie: Po tejto lekcii dokážete nastaviť kontaktný formulár (príjemcu, potvrdenie, ďakovnú stránku, ochranu proti spamu, newsletter a spôsob odosielania), umiestniť plávajúce tlačidlá pre WhatsApp a kontakt, vložiť widget inej služby a budete vedieť, kedy sa hodí Vlastný kód a Vlastné HTML.

Kľúčové pojmy: kontaktný formulár, príjemca, potvrdzovací e-mail, ďakovná stránka, captcha, dvojité prihlásenie, spôsob odosielania, plávajúce tlačidlo, widget, kód na vloženie, súhlas, Vlastný kód, Vlastné HTML

Kontaktný formulár: dve miesta

Formulár na vašom webe sa skladá z dvoch častí. Samotný formulár s poľami, ktoré návštevník vypĺňa, je na stránke. Umiestnite ho pomocou sekcie Kontakt (cez Prvky alebo Pridať sekciu) alebo cez chat. Čo sa stane, keď niekto klikne na odoslanie, nastavíte v časti Nastavenia > Formuláre. Tento panel nastavujete vždy sami; chat to za vás neurobí.

Formulár má vždy polia meno, e-mail a správa. Cez chat k nemu pridáte ďalšie polia, najviac osem: textové pole, výberový zoznam (napríklad "Interiér alebo exteriér?"), e-mail, telefón, dlhé textové pole, dátum alebo číslo. Pole na odoslanie súboru alebo fotografie neexistuje. Ak chce Schildersbedrijf Example dostávať fotografie zákazky, uvedie v texte poďakovania: "Fotografie nám pokojne pošlite na našu e-mailovú adresu."

Dôležité: na bezplatnom webe bez balíka je formulár viditeľný, ale sivý a neodosiela žiadny e-mail. Formuláre skutočne odosielajú až vtedy, keď je váš web v balíku AI Builder. Nastavenia nižšie si však môžete pripraviť už teraz; potom sa použijú okamžite.

Nastavenia > Formuláre

Panel má päť blokov.

Prijímanie správ. Do poľa Správy posielať na zadajte e-mailovú adresu, na ktorú majú chodiť vyplnené formuláre. Ak ho necháte prázdne, pôjdu na e-mailovú adresu vášho účtu vo WebOké. Vyplňte ho vedome. V poli Predmet e-mailu zvolíte predmet (ak je prázdne: "Nová správa z vášho webu"). V časti Po odoslaní zvoľte Zobraziť poďakovanie s vlastným textom, alebo Presmerovať na stránku: na ďakovnú stránku, ktorú si sami vytvoríte a nezaradíte do menu (lekcia 4.1). Vďaka tomu môžete neskôr merať, koľkokrát bol formulár odoslaný.

Odosielať cez. Ako sa e-mail odosiela. Server WebOké funguje hneď, s odosielateľom noreply@weboke.site. Odporúča sa Vaša vlastná e-mailová adresa (SMTP): e-mail potom prichádza z vašej vlastnej domény a menej často skončí v spame. Pomocou Nastaviť to za mňa vytvorí nástroj túto adresu na vašej doméne. Pri vlastnej e-mailovej adrese môžete zvoliť aj e-mailovú službu, napríklad Postmark, Brevo, Mailgun alebo SendGrid. Prečo na odosielateľovi toľko záleží, sa dočítate v lekcii 5.3.

Potvrdenie pre návštevníka. Zapnite Poslať návštevníkovi kópiu a návštevník dostane potvrdzovací e-mail. Často je to prvá správa, ktorú od vás niekto dostane. Zvolíte predmet, Váš text (s {naam} pre meno návštevníka), Podpis a či sa priloží aj vyplnená správa. Nástroj vloží váš text do vzhľadu vášho webu, s vaším logom. Pomocou Nechať AI napísať tento text dostanete návrh.

Ochrana proti spamu. Každý formulár má vždy neviditeľnú kontrolu: skryté pole a časový limit. Tá zastaví väčšinu spamu bez toho, aby si to návštevníci všimli. Ak napriek tomu dostávate veľa spamu, zvoľte dodatočnú kontrolu, captcha: Cloudflare Turnstile alebo hCaptcha. Na to si v danej službe vytvoríte bezplatný účet a vyplníte Site key a Secret key. Captchu zapnite až vtedy, keď je to potrebné: každý ďalší krok vás stojí návštevníkov.

Newsletter. Do formulára môžete pridať začiarkavacie políčko, ktorým sa návštevníci prihlásia do Mailchimp, Laposta, Brevo alebo MailerLite. Pridaný bude len ten, kto políčko sám začiarkne. Vždy s dvojitým prihlásením: návštevník najprv potvrdí prihlásenie cez e-mail. V Laposta a MailerLite to zapnete sami priamo v danej službe; nástroj vám povie kde. Bez dvojitého prihlásenia môže ktokoľvek pridať do vášho zoznamu cudzie adresy.

Ďalej: návštevník môže poslať najviac 5 správ za hodinu. Ak máte zásady ochrany osobných údajov, pod formulárom sa zobrazí odkaz na ne. Formulár zbiera osobné údaje; čo kvôli tomu musíte zabezpečiť, nájdete v lekcii 7.1.

Pasca: po každej zmene formulár sami otestujte, a to z inej adresy, než je adresa príjemcu. Pozrite sa aj do priečinka so spamom a skontrolujte, či potvrdenie dorazilo "návštevníkovi".

Plávajúce tlačidlá

V časti Nastavenia > Tlačidlá nastavíte tlačidlá, ktoré zostávajú viditeľné v dolnej časti obrazovky na každej stránke, vpravo alebo vľavo (Roh: Vpravo dole alebo Vľavo dole).

• Číslo WhatsApp: v medzinárodnom tvare s predvoľbou krajiny, napríklad +31 pre holandské číslo alebo +421 pre slovenské, a bez úvodnej 0. Ak ho necháte prázdne, tlačidlo WhatsApp sa nezobrazí. Môžete zadať aj Predvyplnenú správu, napríklad "Mám záujem o cenovú ponuku na maliarske práce." Tlačidlo otvorí konverzáciu s vaším číslom.
• Plávajúce kontaktné tlačidlo: otvorí váš kontaktný formulár v okne. Správa príde na rovnakú adresu ako z vášho formulára. Zvolíte Text na tlačidle.

V náhľade sú tlačidlá o niečo vyššie ako na vašom skutočnom webe, aby neboli schované za tlačidlom pomoci nástroja.

Pozor: tlačidlo WhatsApp sľubuje rýchlu odpoveď. Ak WhatsApp čítate len večer, zvoľte radšej kontaktné tlačidlo.

Widgety iných služieb

Widget je kúsok inej služby na vašej stránke: video YouTube, mapa Google Maps, plánovač stretnutí od Calendly, váš Instagram, playlist zo Spotify. Pri mnohých službách stačí odkaz; prehrávač alebo formulár vytvorí nástroj sám. Príklady: YouTube, Vimeo, Spotify, Calendly, Google Maps (stačí adresa), Kalendár Google, Instagram a TikTok (stačí vaše @meno) a Formuláre Google. Pri iných službách, ako je Salonized, Trustpilot alebo Bandcamp, vložíte kód na vloženie: kúsok kódu, ktorý v danej službe dostanete na umiestnenie na web.

Postup: napíšte to do chatu spolu s odkazom ("pridajte našu mapu s trasou pod kontaktný blok, adresa Hlavná 1"), vložte kód do chatu, alebo v Prvky zvoľte sekciu Widget. Nástroj službu rozpozná, navrhne výšku a nadpis a upozorní vás, ak niečo nebude fungovať. Ak ho necháte umiestniť AI, ide o pokyn a stojí to úpravy; vopred uvidíte koľko. Umiestnený widget upravíte pomocou Upraviť kód na bloku v náhľade.

Tri veci, ktoré treba vedieť:

1. Widget sa načíta až po udelení súhlasu. Služby tretích strán často ukladajú cookies alebo sledujú návštevníkov. Keď je zapnutý cookie banner, widget sa načíta až vtedy, keď návštevník dá súhlas s týmto druhom cookies. Služba sa automaticky objaví vo vašom cookie banneri v časti "Čo teraz beží na vašom webe". Potom skontrolujte aj svoje zásady ochrany osobných údajov (lekcia 7.1 a 7.2).
2. Kalendár Google musí byť verejný. Súkromný kalendár nikto iný nevidí. V Kalendári Google zverejnite len samostatný kalendár s tým, čo môžu návštevníci vidieť, nikdy nie svoj osobný kalendár.
3. Nebezpečný kód sa na web nedostane. Kód, ktorý môže posielať údaje návštevníkov ďalej, zakrýva, čo robí, alebo načítava niečo z neznámej webovej stránky, AI na váš web neumiestni. Vysvetlí, prečo.

Vlastný kód a Vlastné HTML v skratke

Pre pokročilých sú k dispozícii dve miesta.

Vlastný kód nájdete v dolnej časti Nastavenia > Prepojenia: kód, ktorý má byť na každej stránke, V hlavičke (head) každej stránky alebo Na spodku každej stránky. Napríklad načítavací skript chatovacej služby alebo widgetu s recenziami. Tento kód nástroj nekontroluje ("Tento kód nekontrolujeme"). Známe služby cookie banner zablokuje, kým nie je udelený súhlas. Možnosť Tento kód je nevyhnutný začiarknite len pri kóde, ktorý nesleduje návštevníkov, pretože potom sa načíta okamžite. V náhľade v nástroji sa vlastný kód nespúšťa, na vašom skutočnom webe áno. Na bezplatnom webe vlastný kód nefunguje. Pre meracie ID, napríklad Google Analytics, nepoužívajte Vlastný kód, ale pevné pole v časti Prepojenia (lekcia 7.2).

Vlastné HTML je sekcia v Prvky. Vložíte vlastné HTML a prípadne CSS a neskôr ho upravíte pomocou Upraviť HTML. Farby a písmo sa riadia vašou vizuálnou identitou. Skripty, iframes a formuláre tu nefungujú; na to použite widget.

Obe možnosti používajte len vtedy, keď sa to inak nedá: cudzí kód predstavuje riziko pre rýchlosť, bezpečnosť a súkromie.

V nástroji: postup

1. Pridajte na svoju kontaktnú stránku sekciu Kontakt s formulárom.
2. Otvorte Nastavenia > Formuláre. Vyplňte Správy posielať na.
3. V časti Odosielať cez zvoľte svoju vlastnú e-mailovú adresu, alebo nechajte server WebOké, kým nebude vaša doména pripravená (lekcia 5.3).
4. Zapnite Poslať návštevníkovi kópiu a napíšte vlastný text.
5. V časti Po odoslaní zvoľte poďakovanie alebo ďakovnú stránku.
6. Podľa potreby nastavte v Nastavenia > Tlačidlá tlačidlo WhatsApp alebo kontaktné tlačidlo.
7. Zverejnite web a pošlite testovaciu správu.

Zhrnutie

• Formulár je na stránke; čo sa s ním stane, nastavíte v Nastavenia > Formuláre.
• Správy posielať na vyplňte vedome; ako odosielateľa zvoľte najlepšie vlastnú e-mailovú adresu.
• Na bezplatnom webe formulár neodosiela e-mail; priložiť súbor sa nedá nikdy.
• Plávajúce tlačidlá pre WhatsApp a kontakt nájdete v Nastavenia > Tlačidlá.
• Widgety sa načítajú až po udelení súhlasu; Vlastný kód a Vlastné HTML sú pre pokročilých.

Kvíz

Úloha

Úloha D4.3: Váš kontaktný formulár a widget. Nastavte svoj formulár úplne a umiestnite jeden widget, ktorý skutočne niečo pridáva.

Kontrolný zoznam:

• [ ] sekcia Kontakt s formulárom na vašej kontaktnej stránke;
• [ ] Správy posielať na vyplnené adresou, ktorú čítate denne;
• [ ] spôsob odosielania zvolený a jasné, prečo;
• [ ] potvrdenie pre návštevníka s vlastným textom;
• [ ] nastavené poďakovanie alebo ďakovná stránka;
• [ ] umiestnený jeden widget (napríklad mapa alebo plánovač stretnutí) a overené, že je v cookie banneri;
• [ ] web zverejnený a odoslaná testovacia správa (len s balíkom; na bezplatnom webe skontrolujete nastavenia).

Otázky:

1. Na ktorú adresu vám prichádzajú správy z formulára a cez aký spôsob odosielania?
2. Ktorý widget ste zvolili, čo prináša vášmu návštevníkovi a čo uvidí návštevník, ktorý nedá súhlas?
3. Dorazila vaša testovacia správa a dorazilo potvrdenie "návštevníkovi", alebo skončilo v spame?

Po označení "hotovo" uvidíte vzorovú odpoveď: Schildersbedrijf Example posiela správy na info@example.com cez vlastnú e-mailovú adresu na doméne; widget je mapa Google Maps s adresou, ktorá sa načíta až po udelení súhlasu a inak zobrazí plochu s tlačidlom na udelenie súhlasu; testovacia správa prišla, potvrdenie tiež, nie do spamu.

Čítajte ďalej

• Kontaktný formulár na vašej webovej stránke: odosielanie polí e-mailom a ochrana pred spamom
• Bezplatný kurz E-mail v poriadku: nastavenie a správne doručovanie 7.3: Mail z vašej webovej stránky a formulárov
• Bezplatný kurz E-mail v poriadku: nastavenie a správne doručovanie 7.2: Súhlas, odhlásenie a čistý zoznam
• Používanie odkazov na chat (centrum pomoci WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Pomocník pre Kalendár Google, v angličtine): https://support.google.com/calendar/answer/37083