• Košík je prázdný.
Vyberte stránku

Plugin pro WordPress Bloom umožňuje vkládat vizuálně příjemné formuláře do pop-upů, sidebarů, fly-inů či přímo do článků a stránek. Plugin lze přímo propojit s několika poskytovateli e-mailingu, mezi které zatím nepatří Mautic. Formulář z Mauticu lze ale snadno vložit manuálně, s několika drobnými úpravami.

Nejprve vytvoříme požadovaný formulář přímo v Mauticu, a nastavíme akce, které se mají stát po jeho vyplnění (přesměrování na děkovací stránku, odeslání e-mailu…). Formulář uložíme a do schránky zkopírujeme plný HTML kód (Manual Copy – kopírujeme pouze část ve spodním okně).

V administraci webu (WordPress) otevřeme položku Bloom a klikneme na tlačítko New optin. Zvolíme tip opt-inu (pop-up, fly-in…), pojmenujeme ho a v části Form Integration zvolíme poslední položku Custom HTML form. Do pole pod roletkou vložíme zkopírovaný kód z Mauticu. Zatím neukládáme.

Samotný kód z Mauticu obsahuje 2 části – styl (vzhled) formuláře a samotný formulář. Vzhledem k tomu, že vzhled formuláře bude řídit vybraný styl v Bloomu, potřebujeme se stylu nadefinovaného v Mauticu zbavit. Označíme tedy část kódu mezi tagy <style> a </style> a smažeme je (včetně tagů). Jedná se zhruba o první polovinu kódu.

Místo smazaného kódu vložíme hned na začátek následující kód:

<style type="text/css" scoped>
    .mauticform-button-wrapper .mauticform-button.btn-default {width:100%;}
    .mauticform-row {margin-bottom: 10px !important;}
</style>
Styl pro Bloom a Mautic

Tento kód ponechává většinu stylování na Bloomu, ale řeší drobné problémy se zobrazením tlačítek a odsazením textu ve formuláři, které se u některých stylů vyskytují (při použití s Mauticem).

Dále už pokračujeme samotným nastavením Bloom formuláře – výběrem stylu a nastavením textů a barevnosti. Jen malé upozornění na okraj – výběr stylu formuláře je jediný krok, ke kterému se nedá vrátit a změnit výběr, pokud se vám zvolený typ nebude líbit, budete muset začít znovu.

Na stránce Design nastavte texty, obrázek a barevnost formuláře, vynechat můžete položky, které řídí texty formuláře (text tlačítka, e-mail, zpráva o úspěchu) – máte je nastavené přímo v Mauticu, a tedy v kódu formuláře.

Na stránce Display settings pak můžete nastavit, kde a kdy se má zvolený opt-in objevovat. V základním nastavení je zobrazování v příspěvcích, 20 sekund po načtení stránky.

Chcete-li pop-up aktivovat stisknutím tlačítka, zvolte pouze možnost Trigger On Click a vyplňte pole CSS Selector (string), které se po zaškrtnutí objeví. Zvolený řetězec musí začínat tečkou, text bude bez mezer a české diakritiky.

.popup_ebook
Příklad CSS Selectoru

Display on v tomto případě nastavte na Everything (pop-up se bude zobrazovat po stisknutí tlačítka, i při nastavení Everything se tak zobrazí pouze tam, kde tlačítko vložíte).

Bloom formulář uložte a přejděte na stránku, kam chcete tlačítko s pop-upem vložit. Do stránky vložte zvolený modul – obvykle tlačítko, ale pop-up můžete spouštět např. i kliknutím na obrázek či jiný modul. Pro tuto chvíli budeme předpokládat, že se jedná o tlačítko. Nastavte text a vzhled tlačítka, pole pro odkaz ponechte volné. Nakonec se přepněte do poslední záložky Pokročilé a v ID a třídy CSS vyplňte 2. pole – Třída CSS. Použijte stejný řetězec, jako u CSS Selectoru, ale již bez tečky na začátku:

popup_ebook
Třída CSS

Uložte a vyzkoušejte.