# CSS-útmutató: az űrlap felépítése és az Orbital téma

> Hogyan célozhatod CSS-sel az űrlap elemeit: azonosítók, osztályok, CSS API-változók és gyors választótáblázat az Orbital témához.

Az űrlap minden eleme megcélozható CSS-sel. A legtöbb elem újrahasznosítható osztálynevet kap, sok elemnek pedig egyedi azonosítója is van, így egy adott űrlapot vagy mezőt külön is formázhatsz. A CSS öröklődését kihasználva az űrlap bármelyik részét átszabhatod.

## Azonosítók

Az elemek azonosítói az űrlap és a mező azonosítójából épülnek fel:

- `#gform_wrapper_1`: az 1-es azonosítójú űrlap burkolója;
- `#field_1_3`: az 1-es űrlap 3-as azonosítójú mezője.

A `#gform_wrapper_{űrlap}` azonosító minden témánál működik. Az Orbital témánál érdemes a keretrendszer osztályával együtt használni (`.gform-theme--framework#gform_wrapper_1` egy űrlapra, a `.gform-theme--framework` önmagában az összes Orbital űrlapra).

Egy adott űrlap azonosítóját az oldal forrásából, vagy az **Űrlapok** listából tudod meg. Az alábbi példákban az `1` helyére a saját űrlapod azonosítóját írd.

## Az Orbital téma felépítése

Az Orbital témájú űrlap burkolója egyszerre több osztályt kap, például `gform_wrapper`, `gform-theme`, `gform-theme--foundation`, `gform-theme--framework` és `gform-theme--orbital`. Az űrlap szerkezete:

- az űrlap fejléce (`.gform_heading`) a címet és a leírást tartalmazza;
- a törzs (`.gform-body`, a régebbi nevén `.gform_body`) a mezőlistát (`.gform_fields`) tartalmazza;
- az élőláb (`.gform-footer`, a régebbi nevén `.gform_footer`) a gombot tartalmazza.

A mezőlista osztályai az űrlap beállításaiból jönnek: a címkék helye (például `top_label`), az alcímkék és a leírások helye (`form_sublabel_below`, `description_below`) és a hibaüzenetek helye (`validation_below`). Minden mező kap egy `gfield--type-<típus>` osztályt, és az állapotát, szélességét jelző módosítókat is. A Többválasztós mezőn az elrendezést a `gfield--choice-align-vertical` és a `gfield--choice-align-horizontal` osztály jelzi.

Hogy a szabályaid csak az Orbital témájú űrlapokra vonatkozzanak, mindig a `.gform-theme--framework` osztállyal kezdd a választót. Egy adott űrlapra szűkítéshez írd mellé az azonosítót is: `.gform-theme--framework#gform_wrapper_1`.

## CSS API-változók

Az Orbital téma kinézetét CSS-változók vezérlik. A legegyszerűbb, ha ezeket írod felül a `.gform-theme--framework` osztályon (vagy egy konkrét űrlap burkolóján).

| Változó | Hol hat | Mire jó |
|---|---|---|
| `--gf-color-primary` | burkoló | az elsődleges szín (gombok, hivatkozások, fókusz) |
| `--gf-ctrl-bg-color` | burkoló, mező | a beviteli elemek háttere |
| `--gf-ctrl-border-color` | burkoló, mező | a beviteli elemek keretének színe |
| `--gf-ctrl-radius` | burkoló | a beviteli elemek lekerekítése |
| `--gf-ctrl-label-color-primary` | burkoló, mező | a címkék színe |
| `--gf-ctrl-desc-color` | burkoló, mező | a leírások színe |
| `--gf-form-gap-x`, `--gf-form-gap-y` | burkoló, törzs | a mezők közti távolság |
| `--gf-padding-x`, `--gf-padding-y` | burkoló | az űrlap belső margója |
| `--gf-ctrl-btn-bg-color-primary` | burkoló, élőláb | a küldés gomb háttere |
| `--gf-ctrl-choice-size` | választómező | a rádiógomb és a jelölőnégyzet mérete |

Példa: éles sarkú beviteli mezők, piros küldés gomb és piros űrlapcím.

```css
.gform-theme--framework {
  --gf-ctrl-btn-bg-color-primary: #b3261e;
  --gf-ctrl-radius: 0px;
}
.gform-theme--framework .gform_heading .gform_title {
  color: #b3261e;
}
```

![A Kapcsolat űrlap az alapértelmezett kinézettel](./kepek/megjelenes-1-urlap-alap.webp)

*A Kapcsolat űrlap az alapértelmezett kinézettel* (https://minta-bolt.hu/megjelenes-proba/)

Az alapértelmezett űrlapon a beviteli mezők lekerekítettek, a küldés gomb kék.

![A Kapcsolat űrlap átírt CSS-változókkal](./kepek/megjelenes-1-urlap-css-valtozokkal.webp)

*A Kapcsolat űrlap átírt CSS-változókkal* (https://minta-bolt.hu/megjelenes-proba-css/)

A fenti CSS után a mezők sarka éles, a küldés gomb és az űrlap címe piros.

## Gyors választótáblázat

| Mit célzol | Választó |
|---|---|
| Minden Orbital űrlap | `.gform-theme--framework` |
| Egy adott űrlap | `.gform-theme--framework#gform_wrapper_{űrlap-azonosító}` |
| Az űrlap fejléce | `.gform-theme--framework .gform_heading` |
| Az űrlap törzse | `.gform-theme--framework .gform-body` (vagy `.gform_body`) |
| A mezőlista | `.gform-theme--framework .gform_fields` |
| Mezők típus szerint | `.gform-theme--framework .gfield--type-{típus}` |
| Egy adott mező | `.gform-theme--framework #field_{űrlap-azonosító}_{mező-azonosító}` |
| Név mező, Utónév | `#input_{űrlap}_{mező}_3` vagy `.name_first input` |
| Név mező, Vezetéknév | `#input_{űrlap}_{mező}_6` vagy `.name_last input` |
| Cím mező, utca | `#input_{űrlap}_{mező}_1` vagy `.ginput_address_line_1 input` |
| Cím mező, város | `#input_{űrlap}_{mező}_3` vagy `.ginput_address_city input` |
| Cím mező, irányítószám | `#input_{űrlap}_{mező}_5` vagy `.ginput_address_zip input` |
| Cím mező, ország | `#input_{űrlap}_{mező}_6` vagy `.ginput_address_country select` |
| Az űrlap élőlábja | `.gform-theme--framework .gform-footer` (vagy `.gform_footer`) |
| A küldés gomb | `#gform_submit_button_{űrlap-azonosító}` vagy `.gform_button` |

## Téma- és jelölésosztályok

Az Orbital témájú űrlap burkolója (`div.gform_wrapper`) ezt a négy osztályt kapja, és mellé egy `data-form-theme="orbital"` attribútumot:

| Osztály | Mit jelent |
|---|---|
| `gform-theme` | az alap témaosztály |
| `gform-theme--foundation` | az alaprétegek: elrendezés, reset, alapváltozók |
| `gform-theme--framework` | a keretrendszer: a beviteli elemek stílusa és a CSS API. Itt olvassa a téma a változókat, ezért a saját szabályaid ide kerüljenek |
| `gform-theme--orbital` | az Orbital téma vizuális megjelenése |

Ha egy űrlapnál be van kapcsolva a régi jelölés (legacy mode), a burkoló az Orbital osztályok helyett a `gform_legacy_markup_wrapper` osztályt kapja. Az ilyen űrlapok más szerkezetet használnak (a választómezőknél például `ul` és `li` elemeket), és nem használják a keretrendszer CSS API-ját, ezért rájuk a régi témák választói érvényesek.

## Hogyan stílusozz: változók a burkolón

A keretrendszer három csoportba osztja a változóit:

- **Tervezési értékek**: alapszínek, betűtípusok, lekerekítés (`--gf-color-*`, `--gf-font-*`, `--gf-radius`).
- **Vezérlőváltozók**: az egyes elemek stílusa, a tervezési értékekre építve (például `--gf-ctrl-bg-color`, `--gf-ctrl-label-color-primary`, `--gf-ctrl-radius`).
- **Elrendezésváltozók**: térközök és szerkezet (például `--gf-form-gap-x`, `--gf-form-gap-y`, `--gf-field-gap-x`, `--gf-padding-x`).

A legtöbb stílust úgy érdemes módosítani, hogy a változót a `.gform-theme--framework` osztályon (egy adott űrlapnál a `.gform-theme--framework#gform_wrapper_112` választón) írod felül, mert onnan az összes gyermekelemre öröklődik. Közvetlen CSS-tulajdonságot csak ott használj, ahol a tulajdonsághoz nincs változó.

```css
/* minden Orbital űrlap */
.gform-theme--framework {
	--gf-ctrl-bg-color: #f9f9f9;
	--gf-ctrl-border-color: #e5e7eb;
	--gf-ctrl-label-color-primary: #1a365d;
	--gf-color-primary: #2563eb;
	--gf-ctrl-radius: 6px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 {
	--gf-color-primary: #059669;
	--gf-ctrl-btn-bg-color-primary: #059669;
}
```

### Hatókörök

| Mit célzol | Választó |
|---|---|
| minden Orbital űrlap | `.gform-theme--framework` |
| egy adott űrlap | `.gform-theme--framework#gform_wrapper_{űrlap}` |
| az egy adott WordPress-oldalon lévő űrlapok | `.page-id-{oldal} .gform-theme--framework` |
| egy típusú mezők | `.gform-theme--framework .gfield--type-{típus}` |
| egy adott mező | `.gform-theme--framework #field_{űrlap}_{mező}` |

Minden mező kap egy `.gfield--type-{típus}` osztályt (például `.gfield--type-text`, `.gfield--type-checkbox`, `.gfield--type-email`), ezzel célozhatod a típusonként egyforma mezőket:

```css
/* minden szöveges mező címkéje */
.gform-theme--framework .gfield--type-text {
	--gf-ctrl-label-font-size-primary: 18px;
}

/* csak a jelölőnégyzetek a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 .gfield--type-checkbox {
	--gf-field-choice-gap: 16px;
}
```

### Példák: színtéma, vezérlők, térközök

```css
/* színtéma minden űrlapra */
.gform-theme--framework {
	--gf-color-primary: #2563eb;
	--gf-color-primary-darker: #1d4ed8;
	--gf-ctrl-label-color-primary: #1e3a5f;
	--gf-ctrl-desc-color: #4b5563;
}

/* beviteli elemek és gombok */
.gform-theme--framework {
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-bg-color-hover: #f5f5f5;
	--gf-ctrl-border-color: #d1d5db;
	--gf-ctrl-radius: 6px;
}

/* térközök */
.gform-theme--framework {
	--gf-form-gap-x: 24px;
	--gf-form-gap-y: 32px;
	--gf-padding-x: 20px;
	--gf-padding-y: 16px;
}

/* középre igazított, keskeny űrlap a 112-es űrlapnál */
.gform-theme--framework#gform_wrapper_112 {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
```

### Segédosztályok a keretrendszer kikapcsolásához

Ha egy űrlapnál vagy elemnél ki akarod kapcsolni a keretrendszer stílusát, tedd ezeket az űrlap burkolójára vagy egy szülőelemre:

| Osztály | Mit csinál |
|---|---|
| `.gform-theme__disable` | kikapcsolja a keretrendszer és a reset stílusait |
| `.gform-theme__disable-framework` | csak a keretrendszer stílusait kapcsolja ki |
| `.gform-theme__disable-reset` | csak a reset stílusait kapcsolja ki |
| `.gform-theme__no-reset--el` | az elemet kihagyja a resetből |
| `.gform-theme__no-reset--children` | az elem gyermekeit hagyja ki a resetből |

## Konfigurálható osztályok

### Címkék helye

Az **Űrlap beállításai → Űrlapelrendezés** szerinti címkehelyzet alapján a burkoló a `.top_label` (a címke a mező fölött, ez az alap), a `.left_label` (balra) vagy a `.right_label` (jobbra) osztályt kapja. Más elemek (szélességek, igazítások) ezekből öröklik a helyzetüket. Bal és jobb oldali címkénél a keretrendszer a `--gf-label-width` változót használja a címke szélességére.

### Mezőméret

A régi (2.5-ös) témában a mezőméret `.small`, `.medium` vagy `.large` osztályként jelent meg a beviteli elemen. Az Orbital témában a vezérlők méretét a CSS API változói adják: például `--gf-ctrl-border-size`, `--gf-ctrl-padding-block`, `--gf-ctrl-padding-inline`, a választógomboknál és jelölőnégyzeteknél a `--gf-ctrl-choice-size`. Ezeket az űrlap burkolóján vagy a mező hatókörében írd felül. Az Egysoros szöveg mezőn a méretosztály ma is rákerül a beviteli elemre, és a magasságot adja (lásd az [Orbital egysoros szöveg és legördülő lista fejezetet](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-orbital-egysoros-es-legordulo/)).

### Egyéni CSS-osztály

Az **Űrlap beállításai → Űrlapelrendezés → CSS-osztály neve** mezőbe írt osztály (például `my_form`) a burkolón `_wrapper` utótaggal jelenik meg (`my_form_wrapper`), így az űrlapra külön is stílust írhatsz:

```css
/* az „my_form” osztályú űrlap */
.gform-theme--framework.my_form_wrapper {
	--gf-ctrl-bg-color: #fafafa;
}

/* a 112-es űrlap „dark_theme” osztállyal */
.gform-theme--framework#gform_wrapper_112.dark_theme_wrapper {
	--gf-color-primary: #60a5fa;
	background-color: #1f2937;
}
```

Mezőszinten a **Megjelenés** beállítások között megadott egyéni CSS-osztály közvetlenül a mező burkolójára kerül (például `.gfield.my_custom_class`). Ezzel egyedi stílust adhatsz a mezőnek, vagy megcélozhatod más módosításokhoz.

### Elrendezés az Orbital témában

A régi oszlop- és soron belüli Ready Classes osztályokat az űrlapszerkesztő 2.5-ös megújulása óta kiváltják az űrlapszerkesztő elrendezési lehetőségei. Az Orbital témában az elrendezést az űrlapszerkesztő beépített oszlop- és sorbeállításai, a CSS API változói (`--gf-form-gap-x`, `--gf-form-gap-y`, `--gf-label-width`), valamint a mezőkre tett egyéni osztályok és változófelülírások adják. A részleteket az [Orbital törzs- és szerkezeti CSS fejezet](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-orbital-css-urlap-szerkezet/) és a mezőtípusok választói írják le.

### CSS-kész osztályok

Az előre elkészített, haladó elrendezéseket adó osztályok („Ready Classes”) a mezőt körülvevő szülőelemre kerülnek, és az űrlap alap stíluslapjában már szerepelnek. Az oszlopos és a soron belüli osztályok az űrlapszerkesztő 2.5-ös megújulása óta elavultak.

## A korábbi, 2.5-ös téma jelölése

A régebbi (2.5-ös) témájú űrlapok burkolója a `.gravity-theme` osztályt kapja, a régi jelölést használó (legacy) űrlapoké pedig a `.gform_legacy_markup_wrapper` osztályt. Ezekben a mezőlista `ul`, a mezők `li` elemek. A hozzájuk tartozó választókat a [2.5-ös téma CSS-választói](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) fejezet gyűjti össze.