Drupal a formuláře v modálním panelu? Snadno a bez programování

Programátorské rozhraní Drupalu umožňuje relativně snadno vytvářet modální a nemodální dialogy, stejně jako boční výsuvné panely s formulářem. V základu vám stačí přidat k libovolnému odkazu třídu use-ajax a pomocí atributů data-dialog-type a data-dialog-options upřesnit nastavení. Pokud máte zároveň aktivní knihovnu core/drupal.dialog.ajax, měly by se takto v dialogu automaticky otevírat systémové formuláře, například vyhledávání.

Tip: souhrnné čtení, jak se pustit do dialogů v Drupalu najdete v článku Ajax Dialog Boxes na Drupal.org.

Já bych se ale chtěl tentokrát zaměřit na řešení čistě bez programování v kombinaci s formuláři, které si zvládne každý naklikat sám pomocí modulu Webform. Zobrazení takového formuláře v modálním dialogu je velice snadné.

Webform a modální dialogy

Nachystejte si nový formulář pomocí modulu Webform a následně upravte jeho nastavení tak, aby se dal používat v modálním okně:

1. Přejděte do administrační části Struktura > Webové formuláře > Nastavení a na kartě Formuláře vyhledejte sekci Form dialog settings a zapněte volbu Enable site-wide dialog support.
2. V políčkách hned nad tímto nastavením vidíte strojové názvy velikostí dialogů, na které se lze odkazovat. Upravte dle libosti, případně si přidejte další.
3. Vyhledejte někde na webu odkaz, kterým byste chtěli otevírat formulář v modálním okně. Do adresy odkazu vyplňte cestu k formuláři, tedy například /form/nazev-formulare.
4. Do atributu class, neboli do tříd k danému odkazu doplňte webform-dialog webform-dialog-narrow. Místo narrow lze použít strojový název jiné definované velikosti.

A to je celé, nyní si úpravu jen vyzkoušejte. Je to velice snadné, stejně jako vizuální úprava dialogu pomocí kaskádových stylů.

Image

Další možná vylepšení

Dialog v textu zvládnete vytvořit v CKEditoru jistě bez problémů (nebo s modulem Editor Advanced Link). Já na daném projektu potřeboval odkazovat z políčka typu odkaz. Ačkoli v něm můžete zadávat URL a text odkazu, možnost vložení CSS tříd chybí. Přidal jsem tedy modul Link class a ve správě formuláře pro entitu, u které se políčko vyskytuje, jsem přepnul widget na Link with class.

Ve formuláři není špatné mít předvyplněná data. Já takto používám jediný formulář pro poptávky různých produktů a služeb s tím, že do políčka se předvyplní název z URL. Odkaz na formulář stačí upravit do podoby /form/nazev-formulare?produkt=Název+produktu.

V nastavení formuláře z Webformu pak u políčka, které chcete předvyplnit názvem produktu z odkazu, vyvolejte úpravu a přepněte se na kartu Pokročilé. Rozbalte sekci Výchozí hodnota a do políčka vložte token [current-page:query:produkt:clear].