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

> Egyéni CSS és JavaScript az űrlaphoz, valamint a Fluent Forms beépített, azonnal használható CSS-osztályai.

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.

![Az Egyéni CSS/JS oldal két kódmezővel](./kepek/megjelenes-beagyazas-1-egyeni-css.webp)

*Az Egyéni CSS/JS oldal két kódmezővel* (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.

```css
.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:

```css
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:

```css
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:

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

Címkék:

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

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

```css
.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:

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

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

```css
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.