Egyéni CSS és kész osztályok

Ha a stílusszerkesztő beállításai nem elegendők, saját CSS-sel és JavaScripttel is formázhatod az űrlapot. Gyors elrendezési trükkökhöz kész CSS-osztályok is vannak, ezekhez nem kell CSS-t írnod.

Egyéni CSS és JS

1. Nyisd meg az űrlapot: Fluent Forms → Űrlapok, majd a Szerkesztő fül.
2. Kattints a Beállítások és integrációk fülre.
3. A bal oldali menüben válaszd az Egyéni CSS/JS pontot.
4. Írd be a kódot az Egyedi CSS vagy az Egyéni JavaScript mezőbe.
5. Kattints a Save CSS & JS gombra, majd nézd meg az űrlapot a weboldalon.

https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=settings&sub_route=form_settings

A képen az Egyedi CSS mező fölött látszik az űrlap egyedi osztálya (itt .fluent_form_1), alatta az Egyéni JavaScript mező.

• Az Egyedi CSS csak az adott űrlapra érvényes. Ne használd a <style></style> címkét.
• Az Egyéni JavaScript az űrlap betöltődése után fut le. Csak érvényes kódot adj meg, mert a hibás JavaScript elronthatja az űrlapot. A kódban a $form változó az űrlap jQuery DOM-objektuma. Ne használd a <script></script> címkét.

Az űrlap egyedi osztálya

Minden űrlapnak van egy egyedi osztálya fluent_form_<azonosító> alakban (például .fluent_form_40). Ezzel az előtaggal úgy formázhatsz egy űrlapot, hogy a többit nem érinted. A .fluent_form_FF_ID előtagot is használhatod: az FF_ID helyére a rendszer az űrlap azonosítóját írja.

.fluent_form_40 .ff_submit_btn {
    background-color: #0073e6;
    color: white;
    border-radius: 5px;
}

Példák

A példákban a .fluent_form_149 helyére a saját űrlapod osztályát írd.

Küldés gomb és hover állapota:

form.fluent_form_149 .ff-btn-submit {
    background-color: #000000;
    color: #ffffff;
    border-radius: 10px;
}

form.fluent_form_149 .ff-btn-submit:hover {
    background-color: #ff0606;
    color: #000000;
}

Beviteli mezők:

form.fluent_form_149 .ff-el-form-control {
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 10px;
}

Betűk a mezőkben:

form.fluent_form_149 .ff-el-form-control {
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
}

Címkék:

form.fluent_form_149 .ff-el-input--label {
    font-size: 22px;
    color: red;
}

Fókuszban lévő mező kiemelése:

.ff-el-form-control:focus {
    border-color: red;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 0, 129, 0.25);
}

Értékelő csillagok színe:

form.fluent_form_149 .ff-el-ratings label.active svg {
    fill: red;
}

Többlépéses űrlap lépésgombjai és hover állapotuk:

form.fluent_form_149 .step-nav button {
    background-color: #000000;
    color: #ffffff;
    border-radius: 10px;
}

form.fluent_form_149 .step-nav button:hover {
    background-color: #ff0606;
    color: #000000;
}

Kész CSS-osztályok

A beépített stíluslapban kész osztályok vannak, ezeket CSS írása nélkül is használhatod.

1. Nyisd meg az űrlapot a szerkesztőben, és jelöld ki a mezőt.
2. A Speciális beállítások fülön írd be az osztály nevét a Konténerosztály mezőbe (több osztály is megadható, szóközzel elválasztva).
3. Mentsd az űrlapot.

A szerkesztő nem frissül élőben: az eredményt az előnézetben vagy a weboldalon látod. A CSS-osztályok a konverzációs űrlapokon nem működnek.

Osztály	Hatás
ff_list_2col	A rádiógomb- vagy jelölőnégyzet-lista két egyenlő oszlopban jelenik meg.
ff_list_3col	Három egyenlő oszlop.
ff_list_4col	Négy egyenlő oszlop.
ff_list_5col	Öt egyenlő oszlop.
ff_list_inline	Az opciók egymás mellett, vízszintes sorban, nem egyenlő oszlopokban.
ff_scrolled_text	Az Egyéni HTML mező vagy szakaszelválasztó fix magasságú doboz lesz, hosszú szövegnél görgetősávval. Hasznos szerződési feltételek megjelenítésére, hosszú oldal nélkül.
ff_force_hide	A mező nem látszik a weboldalon. Akkor jó, ha a mezőben értéket akarsz tárolni, de a kitöltőnek nem kell látnia.
ff_pointer	Az egérkurzor kéz alakú lesz a mező fölött.
ff-read-only	A mező csak megtekinthető, a látogató nem szerkesztheti.
ff-hidden	A mező rejtett marad a látogató elől, az admin látja.

Az ff_list_* osztályok csak a rádiógomb- és jelölőnégyzet-listákon működnek, bármilyen címkepozícióval. Az ff_scrolled_text csak az egyéni HTML mezőn és a szakaszelválasztón működik. Az ff-read-only osztályt az Elem osztálya mezőbe is beírhatod.