Beágyazás blokkszerkesztőbe, Elementorba, Oxygenbe és widgetként

Az űrlapot a rövidkódon kívül több módon is elhelyezheted az oldalon, kód nélkül. Az űrlapnak előbb léteznie kell: ha még nincs, hozz létre egyet (lásd az Űrlap létrehozása: áttekintés fejezetet).

Blokkszerkesztő (Gutenberg)

1. Nyisd meg az oldalt vagy bejegyzést a szerkesztőben.
2. Kattints a plusz (+) ikonra új blokk hozzáadásához, keress rá a Fluent Forms névre, és kattints a blokkra.
3. A blokk legördülő menüjéből válaszd ki a mentett űrlapot. Az űrlap rögtön megjelenik a szerkesztő előnézetében.
4. Kattints a Frissítés vagy Közzététel gombra.

Az űrlapot a rövidkóddal is beteheted: illeszd a rövidkódot a Rövidkód vagy az Egyéni HTML blokkba (a rövidkódokról a Rövidkódok és SmartCode-ok fejezetben olvashatsz).

A blokk stílusbeállításai

Ha kijelölöd a Fluent Forms blokkot, a jobb oldali blokkbeállító oldalsávban három fül jelenik meg: General, Misc és Advanced. Itt az űrlap kinézetét közvetlenül a blokkban állíthatod.

General (általános) fül: az egyes mezők és elemek stílusa.

• Form Style Template: kész sablon (Modern, Classic, Bootstrap style, Inherit style, vagy Custom a részletes testreszabáshoz).
• Label Styles: a címkék színe és tipográfiája.
• Input & Textarea: szövegszín, háttérszín, tipográfia, térközök és szegélyek, külön a normál és a fókuszban lévő (kattintott) állapotra.
• Placeholder Styles: a helykitöltő szöveg színe.
• Radio & Checkbox Styles: a rádiógombok és jelölőnégyzetek mérete és színe.
• Button Styles: a küldés gomb igazítása és szélessége, valamint normál és hover állapotban a szövegszín, háttérszín, tipográfia, padding és margó, dobozárnyék és szegély.

Misc fül: az űrlap konténere.

• Background Type: klasszikus (egyszínű vagy háttérkép) vagy színátmenetes háttér az egész űrlapnak.
• Padding & Margin: belső és külső térköz.
• Box Shadow: árnyék az űrlap körül.
• Form Border Settings: keret az űrlap körül.

Elementor

1. Nyisd meg az oldalt az Elementor szerkesztőben.
2. A kereső mezőbe írd be: Fluent Forms, és húzd az oldalra a Fluent Forms widgetet.
3. A widget legördülő menüjéből válaszd ki az űrlapot.

A Style (stílus) fülön az alábbiakat állíthatod:

Szakasz	Beállítások
Form Container	Háttér típusa (egyszínű vagy kép), szín (globális szín vagy színválasztó), háttérkép, hivatkozások színe, legnagyobb szélesség, igazítás (balra, középre, jobbra), külső és belső térköz, szegély típusa (egyszerű, dupla, szaggatott, pontozott, barázdált és mások), szegély lekerekítése, dobozárnyék (vízszintes és függőleges eltolás, elmosás, kiterjedés).
Input & Textarea	Háttérszín, szövegszín, szegély típusa (egyszerű, szaggatott, pontozott vagy nincs) és lekerekítése. Ezen kívül a szöveg behúzása, a mezők és a szövegterület szélessége és magassága, a térközök.
Submit Button	A gomb szöveg- és háttérszíne, belső térköz, tipográfia.

Oxygen Builder

1. Telepítsd és aktiváld az Oxygen Builder bővítményt.
2. Hozz létre egy új oldalt, és kattints az Edit with Oxygen gombra.
3. A bal felső sarokban kattints a plusz (+) ikonra, keress rá a Fluent Form névre, és add hozzá a blokkot.
4. Válaszd ki az űrlapot a legördülő menüből.

A Primary szakasz beállításai:

• Form Container: háttérszín, legnagyobb szélesség, térközök, szegély színe, vastagsága és stílusa (egyszerű, szaggatott, pontozott vagy nincs), lekerekítés.
• Labels: a címke és a csillag színe, valamint a betűcsalád, méret, vastagság, igazítás, betűköz, sormagasság, dekoráció és stílus.
• Input & Textarea: címkeszín, háttér, szélesség, magasság, térközök, szöveg behúzása, szegély tulajdonságai és lekerekítése.
• File Upload Field: a fájlfeltöltő gomb színe, alakja, tipográfiája és szegélye.
• Multi-step Forms: a többlépéses űrlap szakaszelválasztójának és folyamatjelzőjének stílusa.
• Box Shadow: árnyék színe, iránya, elmosása és kiterjedése.
• Submit Button: a küldés gomb színe, szélessége, margója, paddingje és más tulajdonságai.

Az Advanced szakaszban egyszerű effektek állíthatók: animációk, szövegárnyék, átmenetek, az űrlap és a küldés gomb átlátszósága, szűrők és átalakítások.

A tervezés végén kattints az Apply Params, majd a Save gombra. Ezután közzéteheted az oldalt, vagy megoszthatod a hivatkozását.

Widget az oldalsávban vagy a láblécben

1. Hozd létre az űrlapot, amit kitennél.
2. A WordPress felületén nyisd meg a Megjelenés → Widgetek oldalt. (Blokk-témánál ez a menüpont nincs: ott az oldalsáv és a lábléc a Megjelenés → Szerkesztő oldalon szerkeszthető, a Fluent Forms blokkot ugyanúgy hozzáadhatod.)
3. Válaszd ki a területet, ahová az űrlapot szeretnéd tenni: az oldalsávot vagy a láblécet.
4. Kattints a plusz (+) ikonra, a keresőbe írd be: Fluent Forms, és kattints a Fluent Forms widgetre.
5. Add meg a widget címét, és a legördülő menüből válaszd ki az űrlapot.
6. Mentsd a változtatást (Frissítés).

Nyisd meg a weboldalt: az űrlap megjelenik az oldalsávban vagy a láblécben.