## Űrlap formázása szakértői módban Ebből az útmutatóból kiderül, hogyan formázhatod az űrlapodat CSS-kód segítségével – akkor hasznos, ha a haladó beállítások már nem elégek. Szakértői módban való szerkesztéskor sokkal több módosítást végezhetsz el, mint a haladó beállításoknál. #### Új űrlapvarázsló ### **Saját CSS** Haladó felhasználók saját CSS-kódot adhatnak hozzá az űrlaphoz – ez a **Megjelenés fülön** érhető el, az alján. *A saját CSS-kód hibás megadása megzavarhatja az űrlap megjelenítését. Csak akkor használd, ha ismered a CSS szintaxist.* ![Űrlapok - Űrlapvarázsló - Külső - haladó - CSS](/sites/default/files/inline-images/51.png)#### Korábbi űrlapvarázsló ### **Általános** fül alatti beállítások - **CSS szerkesztése** - Saját, előre megírt CSS kódot is használhatsz az űrlapodhoz. Ehhez kattints a CSS szerkesztése gombra, majd a megjelenő ablakba illeszd be a CSS kódot. - **Alaphelyzetbe állítás** - Ha bármilyen formázási beállítást elrontottál, és esetleg nem találod a hiba okát, akkor az alaphelyzetbe való állítással gyorsan kitörölheted az űrlapod ÖSSZES eddig beállított formázását. **Vigyázz! A művelet nem visszavonható!!** - **ReCaptcha** - Fontos a robotok elleni védelem szempontjából. Választhatsz a **láthatatlan egyszerű,** a **láthatatlan**, és a **látható reCaptcha** közt. A reCaptcha kódok használatáról és a reCaptchás űrlapok beillesztéséről [ITT ](https://www.listamester.hu/utmutato-listamesterhez/robotok-elleni-vedelem-recaptcha-kod-az-urlapban "Robotok elleni védelem, recaptcha kód az űrlapban")írtunk. A **látható reCaptcha**: ![Űrlapok - Űrlapvarázsló - Külső - haladó - reCaptcha](/sites/default/files/inline-images/k%C3%A9p_2022-08-04_134559370.png) - **Html kód** - A **Html kód** gombra kattintva megjelenik egy új ablak, ahol könnyedén ki tudod másolni az adott űrlap Html, CSS és Javascript kódját. Ha az űrlapot formázással együtt szeretnéd másolni, másolás előtt pipáld be a **formázás a kódban** checkboxot. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - Általános fül - Html kód](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_195515746.png) - **Űrlap publikálása** - Az űrlap publikálásával az űrlap kódját lementjük a ListaMester szerverére, ahonnan egy link segítségével bárhonnan hivatkozhatsz rá. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - Általános fül](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_194539299.png) ### **Teljes űrlap** fül alatti beállítások - Az **Elrendezés** rész alatt az űrlap szélességét, a mezők elrendezését, a mezőfeliratok elrendezését és szélességét, valamint az űrlap gombjának a helyét tudod módosítani. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - teljes űrlap fül - elrendezés rész](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_200949732.png) A **Dizájn** résznél módosíthatod a - **stílust**, ahol az adatmezők kinézetét tudod változtatni. Az adatmező kinézete lehet *kerekített*, *szögletes* és *material*. ![Listamester - Kézikönyv - Űrlapok - Külső - Stílusok](/sites/default/files/inline-images/Urlapvarazslo-kulso-1.png) - **függőleges térközt**, ahol az egyes mezők közti térközt tudod módosítani - **színsablon** kiválasztásával egy kattintással csodás színeket adhatsz az űrlapodnak. Figyelj az *áttetsző* sablonokra! Ekkor ugyanis az oldal háttere, ahova az űrlapod beilleszted kis mértékben látható lesz. A következő példa jól szemlélteti a két típusú sablon közti különbséget. Az első képen a *zöld* színsablont, míg a második képen az *áttetsző világos* sablont használtuk. ![Űrlapok - Űrlapvarázsló - Külső - Színsablon](/sites/default/files/inline-images/Urlapvarazslo-kulso-5.png) - A **szöveg** részen módosíthatod az űrlap összes szövegének a betűtípusát, stílusát, vastagságát, méretét és színét. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - szöveg fül](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_202300443.png) - Az **Adatmezők nevei** részben a mezők feliratának a helyzetét, színét, betűtípusát, stílusát, vastagságát és méretét tudod módosítani. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - adatmezők nevei](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_202647163.png) - A **Beviteli mezők** részben a mezők szélességét, a betű- és háttérszínét, a betűk stílusát, méretét, vastagságát, a különböző margók nagyságait, a mező felső és alsó margóinak stílusát, szélességét, és színét, illetve a kerekítési sugarát tudod módosítani. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - Beviteli mezők](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_204219156.png) - A **megjegyzés, leírás alatt** a megjegyzés adatmező külső beállításait tudod szerkeszteni. Szintén az elrendezést, a betűtípust, stílust, méretet, színt és vastagságot tudod még állítani. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - megjegyzés, leírás](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_204614357.png) - A **Doboz** részben az űrlap doboz részének a margóját, illetve az átlátszóságát tudod módosítani. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - Doboz](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_205533338.png) - A **Háttér** részben beállíthatsz háttérként egy színt, színátmenetet, és akár képet is, amelyet URL linkkel tudsz megadni. Beállíthatod, hogy a háttérkép ismétlődjön-e, kezdő pozíciót is beírhatsz, illetve árnyékolást is állíthatsz be hozzá. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - Háttér](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_210454941.png) - Az **Asztal** részben az űrlap külső sávjának színét, és hátterét tudod beállítani. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - Asztal](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_210742622.png) - A **Keret** rész beállításainál egy plusz keretet adhatsz az asztal illetve a háttér rész közé. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - keret](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_211213305.png) ### Az **Adatmező** fül beállításai - a kiválasztott adatmező **szövegeinek** betűtípusát, stílusát, vastagságát, méretét és árnyékát tudod beállítani - **doboz** részben különböző margókat adhatsz az adatmezőidnek - a **háttér**nél színátmenetet és árnyékot adhatsz a mezőknek - a **keret** részen a keret vonalainak színét, stílusát, és szélességét tudod beállítani Az adatmezők módosításához először a jobb oldalon kattints az adott mezőre, majd a bal oldalon módosítsd a kiválasztott mező külsejét. ![Űrlapok - Űrlapvarázsló - szakértői beállítások - adatmezők beállításai](/sites/default/files/inline-images/k%C3%A9p_2022-08-09_212403969.png)