# Egyéni CSS és JavaScript

> Egy űrlap kinézetének finomhangolása saját CSS-sel az űrlap egyedi osztályával.

Ha a vizuális [stílusszerkesztő](https://hub.hellowp.io/hu/plugins/fluentformpro/stilus-urlapstilus-szerkeszto/) nem elég, saját CSS-sel és JavaScripttel bármit átállíthatsz az űrlapon: a gombokat, a betűket, a beviteli mezőket.

## Hol találod?

1. Az **Űrlapok** listán kattints a kívánt űrlap **Szerkesztés** gombjára.
2. Válaszd a **Beállítások és integrációk** fület.
3. A bal oldali menüben nyisd meg az **Egyéni CSS/JS** oldalt.

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

*Az Egyéni CSS/JS oldal két kódszerkesztővel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=settings&sub_route=form_settings)

Az oldalon két kódszerkesztő van: az **Egyedi CSS** és az **Egyéni JavaScript** mezője. A CSS-t ne tedd `<style>` címkék közé, a JavaScriptet ne `<script>` közé. Az oldal tetején látod az űrlap egyedi osztályát is, például `.fluent_form_1`. Mentéshez használd a lap alján lévő mentés gombot.

## Az űrlap egyedi osztálya

Minden űrlap kap egy egyedi CSS-osztályt `fluent_form_<azonosító>` alakban. Ha ezt a szabályaid elé írod, a stílus csak erre az űrlapra érvényes, a többit nem érinti. Az azonosító helyére a `FF_ID` is írható (`.fluent_form_FF_ID`), ezt a bővítmény az űrlap azonosítójára cseréli.

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

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

## Példák

**A beküldő gomb:**

```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;
}
```

A második szabály az egérrel fölé mutatáskori színeket adja meg.

**A 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;
}
```

**A mezők betűi:**

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

**A címkék:**

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

**A kiválasztott 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);
}
```

**Az értékelés csillagai:**

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

**A többlépéses űrlap lépésgombjai:**

```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;
}
```

A változtatások mentése után nézd meg az űrlapot az oldalon is, mert ott látszanak élesben.

## Kapcsolódó

- Kész osztályokkal CSS nélkül is változtathatsz az elrendezésen: [Kész CSS-osztályok](https://hub.hellowp.io/hu/plugins/fluentformpro/stilus-kesz-osztalyok/).