Vytváření a zobrazování vyskakovacích formulářů

Published: 16. července 2026 · Last updated: 21. července 2026 · By Marcus Biel

Vyskakovací okno se zobrazuje nad obsahem vašeho webu. Nabídku registrace umisťuje přímo do zorného pole návštěvníka, zatímco stránka pod ním zůstává na místě.

Vyskakovací okna jsou užitečná pro nabídky newsletterů, slevy, registrace na akce, magnety na kontakty a další cílené výzvy k akci. Protože narušují běžné procházení stránky, jsou načasování a frekvence stejně důležité jako design.

Tato příručka vysvětluje nastavení specifická pro vyskakovací okna. Rozvržení, bloky obsahu, pole odběratelů, štítky, typografie, vrstvy a registrační postupy jsou popsány v hlavní příručce k tvorbě registračních formulářů.

Vytvoření vyskakovacího okna

Otevřete „Signup Forms“, klikněte na „Create Form“ a vyberte „Popup“. Zadejte srozumitelný interní název a pokračujte do editoru.

Stávající vyskakovací okno můžete také upravit kliknutím na jeho název v přehledu registračních formulářů.

Použijte název, který popisuje nabídku nebo umístění, například „Homepage Discount Popup“, „Webinar Registration Popup“ nebo „Guide Download Popup“. Interní název se návštěvníkům automaticky nezobrazuje.

Výběr šablony vyskakovacího okna

Vyskakovací okna nabízejí prázdný formulář, standardní formulář a čtyři navržené šablony:

• Čistá sleva
• Přívětivá příručka
• Tmavý webinář
• Jemná komunita

Vyberte šablonu, jejíž velikost a struktura obsahu odpovídají nabídce. Veškerý text, pole, barvy, obrázky, mezery i rozvržení lze později změnit.

Návrh vyskakovacího okna

Pomocí vizuálního editoru vyskakovací okno uspořádejte. Registrační formulář můžete kombinovat s textem, obrázky, videem, seznamy, tlačítky, odkazy na sociální sítě, počítadlem odběratelů, oddělovači a dělicími čarami.

Hlavní sdělení by mělo být dostatečně krátké, aby mu návštěvník okamžitě porozuměl. Jasný nadpis, jedno stručné vysvětlení a konkrétní tlačítko pro odeslání jsou obvykle účinnější než několik konkurenčních sdělení.

Vyberte blok registračního formuláře a nakonfigurujte pole, požadované informace, skryté štítky, indikátor průběhu, počítadlo odběratelů, vstupní pole a tlačítko pro odeslání. Otevřete „Page settings“ a změňte celkové pozadí vyskakovacího okna a výchozí nastavení vzhledu.

Vyskakovací okno se zobrazí nad webem a obsahuje ovládací prvek pro zavření. Kolem důležitých textů a polí ponechte dostatek prostoru, aby se formulář snadno používal i na malé obrazovce.

Nastavení chování vyskakovacího okna

Vyberte blok registračního formuláře a otevřete „Widget Settings“. Tato část určuje, kdy se vyskakovací okno zobrazí a jak často ho návštěvník může vidět.

Zpoždění zobrazení

„Display Delay“ určuje, kolik sekund Maildroppa počká, než vyskakovací okno zobrazí na stránce s vloženým formulářem.

Zadejte 0, pokud se má zobrazit bez dalšího zpoždění. Vyšší hodnotu použijte, když chcete návštěvníkům dopřát čas na přečtení stránky, než se nabídka zobrazí. Editor přijímá zpoždění až 86 400 sekund.

Zvolte zpoždění podle typu stránky. Krátké zpoždění může být vhodné na cílené kampanové stránce, zatímco delší zpoždění může působit méně rušivě v článku.

Frekvence zobrazení

„Display Frequency“ určuje dobu, po které se vyskakovací okno může stejnému návštěvníkovi zobrazit znovu. Dostupné možnosti jsou:

• Vždy
• Jednou za hodinu
• Jednou denně
• Jednou týdně
• Jednou měsíčně

Možnost „Always“ používejte opatrně. Vyskakovací okno, které stejného návštěvníka opakovaně vyrušuje, může být frustrující. Pro obecnou nabídku na webu bývá lepším výchozím bodem denní nebo týdenní frekvence.

Frekvence se ukládá v prohlížeči návštěvníka. Testování v jiném prohlížeči, anonymním okně nebo po vymazání úložiště prohlížeče proto může vést k odlišnému výsledku.

Použití záměru opuštění stránky

Povolte „Exit Intent Popup“, pokud se má vyskakovací okno otevřít poté, co návštěvník přesune ukazatel mimo oblast stránky, což naznačuje, že se možná chystá odejít.

Je-li záměr opuštění stránky povolen, vyskakovací okno čeká na toto chování namísto běžného zpožděného zobrazení. Zvolená frekvence zobrazení stále brání tomu, aby se zobrazilo znovu příliš brzy.

Záměr opuštění stránky je založen na pohybu ukazatele, a týká se proto především prohlížečů na stolních počítačích a noteboocích. Dotyková zařízení neposkytují stejný signál opuštění stránky. Vždy zajistěte, aby mobilní návštěvníci mohli vaši nabídku registrace objevit přímo na stránce nebo prostřednictvím jiného vhodného formuláře.

Ruční otevření vyskakovacího okna z prvku stránky

Vyskakovací okno se může otevřít, když návštěvník na vašem webu klikne na konkrétní tlačítko, obrázek nebo odkaz. Jedná se o ruční spouštěč kliknutím. Liší se od možnosti „Exit Intent Popup“, která reaguje na přesunutí ukazatele mimo stránku.

Ruční spouštěč kliknutím nakonfigurujete a nainstalujete takto:

1. Otevřete vyskakovací okno v nástroji Signup Form Builder.
2. Klikněte na blok registračního formuláře na plátně a vpravo otevřete „Settings“.
3. Rozbalte „Widget Settings“ a povolte „Open popup when a customer clicks a page element“.
4. Klikněte na „Save changes“.
5. Vraťte se do přehledu registračních formulářů a vyskakovací okno aktivujte, pokud je neaktivní.
6. V řádku tohoto vyskakovacího okna klikněte na „Show Code Snippet“.

Dialog obsahuje dvě hodnoty potřebné na vašem webu:

1. Zkopírujte celý kód z karty „JavaScript“ a přidejte ho na stránku webu, na které má být vyskakovací okno dostupné.
2. Pod kódem zkopírujte ID zobrazené pod textem „Add this ID to element from which you want to manually trigger Popup“.
3. Přidejte tuto přesnou hodnotu do atributu id tlačítka, obrázku nebo odkazu, který má vyskakovací okno otevřít.

ID má tento formát:

maildroppa-popup-btn-[form-id]

Například:

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

JavaScript načte vyskakovací okno. ID propojí vyskakovací okno s vybraným prvkem stránky. Obojí musí být na stejné publikované stránce. Když návštěvník klikne na prvek s přesně tímto ID, skript Maildroppa vyskakovací okno otevře.

Pokud už má tlačítko na vašem webu ID z jiného systému vyskakovacích oken, nahraďte ho ID spouštěče Maildroppa, pokud má kliknutí zpracovávat Maildroppa. Nevkládejte vyskakovací okno Maildroppa do druhého vyskakovacího okna poskytovaného nástrojem pro tvorbu webu.

Každé HTML ID použijte na stránce pouze jednou. Pokud má stejné vyskakovací okno otevírat několik prvků, požádejte osobu implementující web, aby tyto prvky propojila bez duplikování stejného ID.

Propojení registračního postupu

V záhlaví editoru zkontrolujte přiřazený registrační postup. Určuje okamžitou reakci po odeslání, e-mail s dvojitým potvrzením přihlášení a výsledek po potvrzení.

Můžete vybrat existující postup, upravit ho nebo pro toto vyskakovací okno vytvořit samostatný postup. Samostatný postup je užitečný, když nabídka vyžaduje vlastní potvrzovací zprávu nebo doručení magnetu na kontakty.

Náhled a uložení

Kliknutím na „Preview“ zkontrolujete design a chování vyskakovacího okna, aniž byste změnili verzi používanou na webu. Zkontrolujte rozvržení, ovládací prvek pro zavření, pořadí polí, prostor pro validaci a reakci po odeslání.

Až bude vyskakovací okno připravené, klikněte na „Save changes“. Poté se vraťte do přehledu registračních formulářů.

Aktivace a automatické vložení vyskakovacího okna

Pokud vyskakovací okno ještě není aktivní, aktivujte ho v nabídce akcí se třemi tečkami. Poté klikněte na „Show Code Snippet“ a zkopírujte celý kód z karty „JavaScript“.

Přidejte skript na každou stránku webu, na které má být vyskakovací okno dostupné. Kód obsahuje jedinečné ID formuláře vyskakovacího okna a načte jeho aktuální uloženou konfiguraci.

Karta „HTML“ poskytuje vygenerované značky pro vlastní implementace. Pokud ji použijete, pečlivě otestujte veškeré chování a kroky odeslání, protože výsledek mohou ovlivnit kód a styly vašeho webu.

Tato část se týká případů, kdy se má vyskakovací okno otevřít automaticky na základě zpoždění zobrazení nebo chování při záměru opuštění stránky. Pokud má vyskakovací okno otevírat kliknutí na tlačítko, obrázek nebo odkaz, postupujte podle části

.

Obecné pokyny k vložení najdete v části Tvorba a vložení vloženého formuláře.

Testování vyskakovacího okna na webu

Po přidání kódu otestujte vyskakovací okno na skutečné stránce webu:

1. Zkontrolujte nastavené zpoždění.
2. Otestujte tlačítko pro zavření a kliknutí mimo formulář.
3. Pokud je povolen záměr opuštění stránky, přesuňte ukazatel mimo stránku a otestujte ho.
4. Pokud je povolen ruční spouštěč, kliknutím na nakonfigurovaný prvek stránky ho otestujte.
5. Zkontrolujte rozvržení na úzké obrazovce.
6. Odešlete formulář a dokončete proces dvojitého potvrzení přihlášení.
7. Ověřte odběratele a skryté štítky v Maildroppa.

Nastavení frekvence může během opakovaných testů zabránit opětovnému zobrazení vyskakovacího okna. Když potřebujete čistou testovací návštěvu, použijte anonymní okno nebo vymažte příslušné úložiště prohlížeče.

Aktualizace nebo deaktivace vyskakovacího okna

Chcete-li vyskakovací okno aktualizovat, otevřete ho v Maildroppa, upravte design nebo chování, zobrazte náhled a klikněte na „Save changes“. Úryvek JavaScriptu bude nadále používat stejné ID formuláře.

Chcete-li jeho zobrazování dočasně zastavit, vyberte v nabídce akcí možnost „Deactivate“. Deaktivace zachová vyskakovací okno i jeho předchozí data reportů. Pokud už skript nebo spouštěcí prvek na webu nepotřebujete, odstraňte je také.