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

Nedávno jsem u nového webu řešil zobrazování poptávkového formuláře v popupu, nebo v modálním panelu, chcete-li. Naprogramovat to není problém, ale zajímalo mě, jestli to ve spojení s modulem Webform nestačí jen nějak nastavit. Samozřejmě, že ano.

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
Drupal a Webform v modálním okně
Drupal a Webform v modálním okně

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].

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

návštěvník

Co bohužel nefunguje správně (nebo aspoň nevím jak to udělat) je fungování webformů otevřených v modalu pomocí commandu OpenModalDialogCommand. Viz https://drupal.stackexchange.com/q/313192. Nakonec jsem tedy musel taky přejít na prostý odkaz.

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
Nové diskuze
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru