Formuláře, tlačítka a widgety

Modul 4: Stránky, vzhled a funkce · Doba čtení: 8 minut

Cíl lekce: Po této lekci umíte nastavit kontaktní formulář (příjemce, potvrzení, děkovací stránku, ochranu proti spamu, newsletter a způsob odesílání), umístit plovoucí tlačítka pro WhatsApp a kontakt, vložit widget jiné služby a víte, kdy se hodí Vlastní kód a Vlastní HTML.

Klíčové pojmy: kontaktní formulář, příjemce, potvrzovací e-mail, děkovací stránka, captcha, dvojité přihlášení, způsob odesílání, plovoucí tlačítko, widget, kód pro vložení, souhlas, Vlastní kód, Vlastní HTML

Kontaktní formulář: dvě místa

Formulář na Vašem webu se skládá ze dvou částí. Samotný formulář s poli, která návštěvník vyplňuje, je na stránce. Umístíte ho sekcí Kontakt (přes Bloky nebo Přidat sekci) nebo přes chat. Co se stane, když někdo klikne na odeslání, nastavíte v Nastavení > Formuláře. Tento panel nastavujete vždy sami; chat to za Vás neudělá.

Formulář má vždy pole jméno, e-mail a zpráva. Přes chat k nim přidáte další pole, nejvýše osm: textové pole, rozbalovací seznam (například „Uvnitř, nebo venku?“), e-mail, telefon, dlouhé textové pole, datum nebo číslo. Pole pro odeslání souboru nebo fotografie neexistuje. Pokud chce Schildersbedrijf Example dostávat fotografie zakázky, napíše do děkovného textu: „Fotografie nám klidně pošlete na náš e-mail.“

Důležité: na bezplatném webu bez balíčku je formulář vidět, ale je zašedlý a neodesílá žádný e-mail. Formuláře opravdu odesílají až tehdy, když je Váš web v balíčku AI Builder. Níže uvedená nastavení si ale můžete připravit už teď; pak se použijí okamžitě.

Nastavení > Formuláře

Panel má pět bloků.

Příjem zpráv. Do pole Posílat zprávy na zadejte e-mailovou adresu, kam mají vyplněné formuláře chodit. Pokud ho necháte prázdné, půjdou na e-mailovou adresu Vašeho účtu u WebOké. Vyplňte ho vědomě. V poli Předmět e-mailu zvolíte předmět (prázdné: „Nová zpráva z vašeho webu“). U Po odeslání zvolíte Zobrazit poděkování s vlastním textem, nebo Přesměrovat na stránku: na děkovací stránku, kterou si sami vytvoříte a nezařadíte do menu (lekce 4.1). Díky tomu můžete později měřit, jak často se formulář odesílá.

Odesílat přes. Jak se e-mail odesílá. Server WebOké funguje hned, s odesílatelem noreply@weboke.site. Doporučujeme Vaše vlastní e-mailová adresa (SMTP): e-mail pak přichází z Vaší vlastní domény a méně často skončí ve spamu. Volbou Nastavit to za mě vytvoří builder tuto adresu na Vaší doméně. U vlastní e-mailové adresy si můžete zvolit i e-mailovou službu, například Postmark, Brevo, Mailgun nebo SendGrid. Proč na odesílateli tolik záleží, se dočtete v lekci 5.3.

Potvrzení pro návštěvníka. Když zapnete Poslat návštěvníkovi kopii, dostane návštěvník potvrzovací e-mail. To je často první zpráva, kterou od Vás dostane. Zvolíte předmět, Váš text (s {naam} pro jméno návštěvníka), Podpis a to, zda se přiloží i vyplněná zpráva. Builder Váš text vloží do vzhledu Vašeho webu, s Vaším logem. Volbou Nechat text napsat AI získáte návrh.

Ochrana proti spamu. Každý formulář má vždy neviditelnou kontrolu: skryté pole a časový limit. Ta zastaví většinu spamu, aniž by si toho návštěvníci všimli. Pokud přesto dostáváte hodně spamu, zvolte další kontrolu, captchu: Cloudflare Turnstile nebo hCaptcha. Vytvoříte si k tomu bezplatný účet u dané služby a vyplníte Site key a Secret key. Captchu zapněte, až když je potřeba: každý krok navíc Vás stojí návštěvníky.

Newsletter. Do formuláře můžete přidat zaškrtávací políčko, kterým se návštěvníci přihlásí k odběru přes Mailchimp, Laposta, Brevo nebo MailerLite. Přidán je jen ten, kdo políčko sám zaškrtne. Vždy s dvojitým přihlášením: návštěvník nejprve potvrdí odběr přes e-mail. U služeb Laposta a MailerLite to zapínáte sami přímo v dané službě; builder Vám řekne kde. Bez dvojitého přihlášení může kdokoli přidat na Váš seznam cizí adresy.

Dále: jeden návštěvník může poslat nejvýše 5 zpráv za hodinu. Pokud máte zásady ochrany osobních údajů, zobrazí se pod formulářem odkaz na ně. Formulář shromažďuje osobní údaje; co k tomu musíte zajistit, najdete v lekci 7.1.

Past: po každé změně formulář sami otestujte, a to z jiné adresy, než je adresa pro příjem. Podívejte se i do složky se spamem a zkontrolujte, zda potvrzení dorazí „návštěvníkovi“.

Plovoucí tlačítka

V Nastavení > Tlačítka nastavíte tlačítka, která zůstávají dole na obrazovce na každé stránce, vpravo nebo vlevo (Roh: Vpravo dole nebo Vlevo dole).

• Číslo WhatsApp: v mezinárodním tvaru s předvolbou země, například +420 pro české číslo nebo +31 pro nizozemské číslo bez úvodní 0. Pokud pole necháte prázdné, tlačítko WhatsApp se nezobrazí. Můžete přidat Předvyplněnou zprávu, například „Rád bych poptal malířské práce.“ Tlačítko otevře konverzaci s Vaším číslem.
• Plovoucí kontaktní tlačítko: otevře Váš kontaktní formulář v okně. Zpráva dorazí na stejnou adresu jako z Vašeho formuláře. Zvolíte Text na tlačítku.

V náhledu jsou tlačítka o něco výš než na Vašem skutečném webu, aby nebyla schovaná za tlačítkem nápovědy builderu.

Pozor: tlačítko WhatsApp slibuje rychlou odpověď. Pokud WhatsApp čtete jen večer, zvolte raději kontaktní tlačítko.

Widgety jiných služeb

Widget je kousek jiné služby na Vaší stránce: video YouTube, mapa Google Maps, rezervační kalendář Calendly, Váš Instagram, playlist Spotify. U mnoha služeb stačí odkaz; přehrávač nebo formulář vytvoří builder sám. Příklady: YouTube, Vimeo, Spotify, Calendly, Google Maps (stačí adresa), Kalendář Google, Instagram a TikTok (stačí Vaše @jméno) a Formuláře Google. U jiných služeb, například Salonized, Trustpilot nebo Bandcamp, vložíte kód pro vložení: kousek kódu, který u dané služby dostanete pro umístění na web.

Postup: napište to do chatu i s odkazem („umísti naši mapu s trasou pod kontaktní blok, adresa Návesní 1“), vložte kód do chatu, nebo v Bloky zvolte sekci Widget. Builder službu rozpozná, navrhne výšku a nadpis a upozorní Vás, pokud něco nebude fungovat. Když widget necháte umístit AI, jde o pokyn a stojí to úpravy; předem uvidíte kolik. Umístěný widget upravíte pomocí Upravit kód na bloku v náhledu.

Tři věci, které je dobré vědět:

1. Widget se načte až po udělení souhlasu. Služby třetích stran často ukládají cookies nebo sledují návštěvníky. Se zapnutou cookie lištou se widget načte až tehdy, když návštěvník udělí souhlas s daným druhem cookies. Služba se automaticky objeví ve Vaší cookie liště u „Co nyní běží na vašem webu“. Poté zkontrolujte i své zásady ochrany osobních údajů (lekce 7.1 a 7.2).
2. Kalendář Google musí být veřejný. Soukromý kalendář nikdo jiný neuvidí. V Kalendáři Google zveřejněte jen samostatný kalendář s tím, co návštěvníci smějí vidět, nikdy svůj osobní kalendář.
3. Nebezpečný kód se na web nedostane. Kód, který může přeposílat údaje návštěvníků, skrývá, co dělá, nebo načítá něco z neznámého webu, AI na Váš web neumístí. Vysvětlí Vám proč.

Vlastní kód a Vlastní HTML v kostce

Pro pokročilé jsou k dispozici dvě místa.

Vlastní kód najdete dole v Nastavení > Propojení: kód, který má být na každé stránce, V hlavičce (head) každé stránky nebo Na konci každé stránky. Například načítací skript chatovací služby nebo widgetu s recenzemi. Tento kód builder nekontroluje („Tento kód nekontrolujeme“). Známé služby cookie lišta zablokuje, dokud není udělen souhlas. Možnost Tento kód je nezbytný zaškrtněte jen u kódu, který nesleduje návštěvníky, protože se pak načte okamžitě. V náhledu v builderu se vlastní kód nespouští, na Vašem skutečném webu ano. Na bezplatném webu vlastní kód nefunguje. Pro měřicí ID, například Google Analytics, nepoužívejte Vlastní kód, ale pevné pole v Propojení (lekce 7.2).

Vlastní HTML je sekce v Bloky. Vložíte vlastní HTML a případně CSS a později ho upravíte pomocí Upravit HTML. Barvy a písma se řídí Vaším firemním stylem. Skripty, iframy a formuláře zde nefungují; k tomu použijte widget.

Obojí používejte jen tehdy, když to jinak nejde: cizí kód je riziko pro rychlost, bezpečnost a soukromí.

V builderu: postup

1. Umístěte na svou kontaktní stránku sekci Kontakt s formulářem.
2. Otevřete Nastavení > Formuláře. Vyplňte Posílat zprávy na.
3. U Odesílat přes zvolte svou vlastní e-mailovou adresu, nebo ponechte server WebOké, dokud nebude Vaše doména připravená (lekce 5.3).
4. Zapněte Poslat návštěvníkovi kopii a napište vlastní text.
5. U Po odeslání zvolte poděkování nebo děkovací stránku.
6. V případě potřeby nastavte v Nastavení > Tlačítka tlačítko WhatsApp nebo kontaktní tlačítko.
7. Zveřejněte svůj web a odešlete testovací zprávu.

Shrnutí

• Formulář je na stránce; co se s ním stane, nastavíte v Nastavení > Formuláře.
• Posílat zprávy na vyplňte vědomě; jako odesílatele zvolte nejlépe svou vlastní e-mailovou adresu.
• Na bezplatném webu formulář neodesílá e-maily; přiložit soubor nelze nikdy.
• Plovoucí tlačítka pro WhatsApp a kontakt najdete v Nastavení > Tlačítka.
• Widgety se načtou až po udělení souhlasu; Vlastní kód a Vlastní HTML jsou pro pokročilé.

Kvíz

Úkol

Úkol D4.3: Váš kontaktní formulář a widget. Nastavte svůj formulář kompletně a umístěte jeden widget, který opravdu něco přidá.

Kontrolní seznam:

• [ ] sekce Kontakt s formulářem na Vaší kontaktní stránce;
• [ ] Posílat zprávy na vyplněno adresou, kterou čtete každý den;
• [ ] způsob odesílání zvolen a víte proč;
• [ ] potvrzení pro návštěvníka s Vaším vlastním textem;
• [ ] nastaveno poděkování nebo děkovací stránka;
• [ ] umístěn jeden widget (například mapa nebo rezervační kalendář) a ověřeno, že je uveden v cookie liště;
• [ ] web zveřejněn a odeslána testovací zpráva (jen s balíčkem; na bezplatném webu zkontrolujete nastavení).

Otázky:

1. Na jakou adresu Vám chodí zprávy z formuláře a přes jaký způsob odesílání?
2. Jaký widget jste zvolili, co přináší Vašim návštěvníkům a co uvidí návštěvník, který souhlas neudělí?
3. Dorazila Vaše testovací zpráva a dorazilo potvrzení „návštěvníkovi“, nebo skončilo ve spamu?

Po označení „hotovo“ uvidíte vzorovou odpověď: Schildersbedrijf Example posílá zprávy na info@example.com přes vlastní e-mailovou adresu na doméně; widget je mapa Google Maps s adresou, která se načte až po udělení souhlasu a jinak zobrazí plochu s tlačítkem pro udělení souhlasu; testovací zpráva dorazila, potvrzení také, ne do spamu.

Další čtení

• Kontaktní formulář na Vašem webu: odesílání polí e‑mailem a ochrana proti spamu
• Bezplatný kurz E-mail v pořádku: nastavení a správné doručování 7.3: Mail z Vašeho webu a formulářů
• Bezplatný kurz E-mail v pořádku: nastavení a správné doručování 7.2: Souhlas, odhlášení a čistý seznam adres
• Používání odkazů pro chat přes WhatsApp (centrum nápovědy WhatsApp): https://faq.whatsapp.com/5913398998672934
• Vytvoření a správa veřejného kalendáře Google (nápověda Kalendáře Google, v angličtině): https://support.google.com/calendar/answer/37083