# Az űrlap kerete, fejléce, törzse, lábléce és a visszaigazolás CSS-e az Orbital témában

> Az Orbital témájú űrlap fő részeinek (burkoló, fejléc, törzs, élőláb, visszaigazoló üzenet) CSS-választói és formázási példái.

Ezek a választók csak az Orbital témájú űrlapokra érvényesek. A 2.5-ös témához a [2.5-ös téma CSS-választói](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-valasztok-regi-tema/) fejezet tartozik. A CSS API-változók áttekintése a [CSS-útmutató](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-css-attekintes/) fejezetben van.

A példák két alakban szerepelnek: az első minden Orbital űrlapra, a második egy adott űrlapra (itt a 112-es azonosítóra) vonatkozik. A saját űrlapod azonosítóját írd a `112` helyére.

## Az űrlap burkolója

A burkoló az egész űrlap gyökéreleme: ezt tartalmazza a fejlécet, a törzset, a mezőket és az élőlábat. Az összes `--gf-*` CSS-változó innen öröklődik lefelé.

- Azonosítója `gform_wrapper_{űrlapazonosító}`, például `gform_wrapper_1`.
- Osztályai: `.gform_wrapper`, `.gform-theme--framework` és `.gform-theme--orbital`.

```css
/* minden Orbital űrlap */
.gform-theme--framework {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 {
	--gf-color-primary: #2563eb;
	--gf-ctrl-btn-bg-color-primary: #2563eb;
	--gf-ctrl-label-font-size-primary: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
}
```

### Színek és témaváltozók

Az űrlap színvilágát a burkolón érdemes beállítani, mert a változók innen öröklődnek minden mezőre.

```css
/* minden Orbital űrlap */
.gform-theme--framework {
	--gf-color-primary: #2563eb;
	--gf-color-primary-darker: #1d4ed8;
	--gf-ctrl-label-color-primary: #1e3a5f;
	--gf-ctrl-desc-color: #4b5563;
}

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

### Keret és lekerekítés

```css
/* minden Orbital űrlap */
.gform-theme--framework {
	--gf-ctrl-radius: 6px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 {
	--gf-ctrl-radius: 8px;
	border: 2px solid #93c5fd;
	border-radius: 12px;
}
```

### Ellenőrzési hiba állapota

Ha az űrlap beküldésekor hiba van, a burkoló megkapja a `.gform_validation_error` osztályt.

```css
/* minden Orbital űrlap */
.gform-theme--framework.gform_validation_error {
	border: 1px solid #c02b0a;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112.gform_validation_error {
	border-color: #dc2626;
}
```

### Egyéni CSS-osztály az űrlapon

Az űrlap beállításaiban megadott egyéni CSS-osztályból a burkolón `{az_osztályod}_wrapper` osztály lesz. Így egyetlen űrlap vagy űrlapcsoport külön stílust kaphat.

```css
/* a „my_form” osztályt használó űrlapok */
.gform-theme--framework.my_form_wrapper {
	--gf-ctrl-bg-color: #fafafa;
	padding: 32px;
}

/* a 112-es űrlap, amelynek egyéni osztálya „dark_theme” */
.gform-theme--framework#gform_wrapper_112.dark_theme_wrapper {
	--gf-color-primary: #60a5fa;
	--gf-ctrl-label-color-primary: #e5e7eb;
	background-color: #1f2937;
	padding: 24px;
}
```

### Középre igazított űrlap

```css
/* minden Orbital űrlap */
.gform-theme--framework {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding: 32px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
```

### Kártyaszerű űrlap

```css
/* minden Orbital űrlap */
.gform-theme--framework {
	--gf-ctrl-bg-color: #fff;
	--gf-ctrl-border-color: #e5e7eb;
	background-color: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
	            0 2px 4px -2px rgba(0, 0, 0, 0.1);
	padding: 32px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
	            0 4px 6px -4px rgba(0, 0, 0, 0.1);
	padding: 40px;
}
```

## Az űrlap fejléce

A fejléc az űrlap felső része: az űrlap címét, a leírását és a kötelező mezők jelmagyarázatát (ha be van kapcsolva) tartalmazza. A tárolója a `.gform_heading`.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_heading {
	margin-bottom: 24px;
	border-bottom: 1px solid #eee;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_heading {
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e7eb;
}
```

### Cím

Az űrlap címe a `.gform_title`, az Orbital témában `<h2>` elem.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_heading .gform_title {
	color: #1a365d;
	font-size: 24px;
	font-weight: 600;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_title {
	color: #112337;
	font-size: 28px;
	font-weight: 700;
}
```

### Leírás

Az űrlap leírása a `.gform_description`, az Orbital témában `<p>` elem.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_heading .gform_description {
	color: #4b5563;
	font-size: 16px;
	line-height: 1.5;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_description {
	color: #374151;
	font-size: 15px;
	line-height: 1.6;
}
```

### Kötelező mezők jelmagyarázata

A jelmagyarázat osztálya `.gform_required_legend`. A csillag színét a `--gf-ctrl-label-color-req` változó adja.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_heading .gform_required_legend {
	--gf-ctrl-label-color-req: #dc2626;
	font-size: 14px;
	color: #6b7280;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_required_legend {
	--gf-ctrl-label-color-req: #b91c1c;
}
```

### Példa: visszafogott fejléc

```css
.gform-theme--framework .gform_heading .gform_title {
	color: #1e293b;
	font-size: 22px;
	font-weight: 600;
}

.gform-theme--framework .gform_heading .gform_description {
	color: #64748b;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 8px;
}

/* csak a 112-es űrlap címe nagyobb */
.gform-theme--framework#gform_wrapper_112 .gform_heading .gform_title {
	font-size: 24px;
}
```

### Példa: kiemelő szegéllyel

```css
.gform-theme--framework .gform_heading {
	border-left: 4px solid #2563eb;
	padding-left: 16px;
	margin-bottom: 24px;
}

.gform-theme--framework .gform_heading .gform_title {
	color: #1e40af;
	font-size: 24px;
}

.gform-theme--framework .gform_heading .gform_description {
	color: #3b82f6;
	font-size: 16px;
}

/* a 112-es űrlap a témaszínt használja */
.gform-theme--framework#gform_wrapper_112 .gform_heading {
	border-left-color: var(--gf-color-primary);
}
```

## Az űrlap törzse

A törzs az űrlap fő tartalma: a mezők listáját, a mezők leírásait és a beviteli elemeket foglalja magában. A tárolója a `.gform_body` és a `.gform-body`.

```css
/* a törzs körül: minden Orbital űrlap */
.gform-theme--framework .gform_body {
	border: 1px solid red;
	padding: 25px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_body {
	border: 1px solid red;
	padding: 25px;
}
```

### Mezők listája és a mezők

- A mezők listája a `.gform_fields` és a `.gform_fields_{űrlapazonosító}`.
- Minden mező egy `.gfield` elem, azonosítója `field_{űrlapazonosító}_{mezőazonosító}`.

```css
/* a lista: minden Orbital űrlap */
.gform-theme--framework .gform_fields {
	border: 1px solid red;
	padding: 25px;
}

/* az egyes mezők: minden Orbital űrlap */
.gform-theme--framework .gform_fields .gfield {
	border: 1px solid red;
	padding: 25px;
}

/* az egyes mezők: csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_fields .gfield {
	border: 1px solid red;
	padding: 25px;
}

/* egyetlen mező: a 112-es űrlap 4-es azonosítójú mezője */
.gform-theme--framework#gform_wrapper_112 #field_112_4.gfield {
	border: 1px solid red;
	padding: 25px;
}
```

### Beviteli elem tárolója

A mező beviteli elemét a `.ginput_container` veszi körül.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gfield .ginput_container {
	padding-block-start: 4px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield .ginput_container {
	padding-inline: 2px 0;
}

/* egyetlen mező */
.gform-theme--framework .gform_fields #field_112_4.gfield .ginput_container {
	--gf-ctrl-bg-color: #f9fafb;
}
```

### Mezőleírás

A mező leírása a `.gfield_description`. Három változó vezérli: `--gf-ctrl-desc-color`, `--gf-ctrl-desc-font-size` és `--gf-ctrl-desc-line-height`.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gfield .gfield_description {
	--gf-ctrl-desc-color: #4b5563;
	--gf-ctrl-desc-font-size: 14px;
	--gf-ctrl-desc-line-height: 1.5;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gfield .gfield_description {
	--gf-ctrl-desc-color: #374151;
	--gf-ctrl-desc-font-size: 15px;
}

/* egyetlen mező */
.gform-theme--framework .gform_fields #field_112_4.gfield .gfield_description {
	--gf-ctrl-desc-font-size: 16px;
}
```

### Kötelező mező jelölése

A kötelező mezők jelölése a `.gfield_required`. A színét a `--gf-ctrl-label-color-req`, a méretét a `--gf-ctrl-label-font-size-req` változó adja.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform-field-label .gfield_required {
	--gf-ctrl-label-color-req: #dc2626;
	--gf-ctrl-label-font-size-req: 14px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform-field-label .gfield_required {
	--gf-ctrl-label-color-req: #b91c1c;
}

/* egyetlen mező */
.gform-theme--framework .gform_fields #field_112_4.gfield .gform-field-label .gfield_required {
	--gf-ctrl-label-font-size-req: 12px;
}
```

### Példa: szorosabb mezőköz

A mezők közötti függőleges és vízszintes távolságot a `--gf-form-gap-y` és a `--gf-form-gap-x` változó adja.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_fields {
	--gf-form-gap-y: 24px;
	--gf-form-gap-x: 16px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_fields {
	--gf-form-gap-y: 20px;
}
```

### Példa: leírások betűtípusa

```css
.gform-theme--framework .gform_body .gfield .gfield_description {
	--gf-ctrl-desc-color: #6b7280;
	--gf-ctrl-desc-font-size: 14px;
	--gf-ctrl-desc-line-height: 1.6;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_body .gfield .gfield_description {
	--gf-ctrl-desc-font-size: 15px;
}
```

### Példa: a törzs kerettel

```css
.gform-theme--framework .gform_body {
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_body {
	border-color: #d1d5db;
	padding: 32px;
}
```

## Az űrlap lábléce

A láb az űrlap alján van: a **Küldés** gombot, a Mentés és folytatás hivatkozást (ha be van kapcsolva) és többoldalas űrlapnál az **Előző** gombot tartalmazza. Rugalmas (flex) elrendezést használ, a távolságait CSS-változók adják.

- Egyoldalas űrlapnál a tárolója `.gform_footer`.
- Többoldalas űrlapnál `.gform_page_footer`.
- A felső külső margót a `--gf-form-footer-margin-y-start`, az elemek közti távolságot a `--gf-form-footer-gap` változó adja.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_footer,
.gform-theme--framework .gform_page_footer {
	--gf-form-footer-margin-y-start: 32px;
	--gf-form-footer-gap: 12px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_footer,
.gform-theme--framework#gform_wrapper_112 .gform_page_footer {
	--gf-form-footer-margin-y-start: 40px;
	--gf-form-footer-gap: 16px;
}

/* a 112-es űrlap lába belső térrel és elválasztó vonallal */
.gform-theme--framework#gform_wrapper_112 .gform_footer {
	padding: 20px 0;
	border-top: 1px solid #e5e7eb;
}
```

### Példa: a láb távolságai

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_footer,
.gform-theme--framework .gform_page_footer {
	--gf-form-footer-margin-y-start: 48px;
	--gf-form-footer-gap: 20px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_footer {
	--gf-form-footer-margin-y-start: 32px;
	--gf-form-footer-gap: 12px;
}
```

### Példa: elválasztó vonal a láb fölött

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_footer,
.gform-theme--framework .gform_page_footer {
	--gf-form-footer-margin-y-start: 32px;
	border-top: 1px solid #e5e7eb;
	margin-top: 24px;
	padding-top: 24px;
}

/* a 112-es űrlap vonala a témaszínt használja */
.gform-theme--framework#gform_wrapper_112 .gform_footer {
	border-top-color: var(--gf-color-primary);
}
```

A gombok formázásáról a [Küldés gomb, Mentés és folytatás, ellenőrzési hibák és többoldalas űrlap CSS-e](https://hub.hellowp.io/hu/plugins/gravityforms/megjelenes-orbital-css-gombok-lapozas-hibak/) fejezetben olvashatsz.

## A visszaigazoló üzenet

A visszaigazolás szövegét az űrlap beküldése után az Orbital téma saját burkolóban jeleníti meg. A betűszín, a betűméret, a sormagasság és a szövegdíszítés a szokásos CSS-tulajdonságokkal állítható a `.gform_confirmation_message` elemen és a belső elemein (`p`, `li`, `a`). Ha szükséges, szűkítsd a szabályt a `.gform-theme--framework` és a `#gform_confirmation_wrapper_{űrlapazonosító}` választóval.

| Rész | Választók |
|---|---|
| Burkoló | `#gform_confirmation_wrapper_{űrlapazonosító}`, `.gform_confirmation_wrapper`, `.gform_wrapper`, `.gform-theme`, `.gform-theme--foundation`, `.gform-theme--framework`, `.gform-theme--orbital` |
| Üzenet | `#gform_confirmation_message_{űrlapazonosító}`, `.gform_confirmation_message`, `.gform_confirmation_message_{űrlapazonosító}` |

### Burkoló

```css
.gform-theme--framework.gform_confirmation_wrapper {
	padding: 20px;
	border-radius: 8px;
}

/* csak a 112-es űrlap */
#gform_confirmation_wrapper_112.gform-theme--framework {
	padding: 24px;
}
```

### Üzenet és szövegtörzs

```css
.gform-theme--framework .gform_confirmation_message,
.gform-theme--framework .gform_confirmation_message :where(p, li) {
	color: #1a365d;
	font-size: 16px;
	line-height: 1.6;
}
```

### Hivatkozások az üzenetben

```css
.gform-theme--framework .gform_confirmation_message a {
	color: #2563eb;
	text-decoration: underline;
}
```

### Mentés és folytatás üzenetei

A mentési hivatkozás megjelenése után a visszajelzés az `#gform_wrapper_{űrlapazonosító}` burkolón belül van, és a `.form_saved_message` osztályt használja.

```css
.gform-theme--framework .form_saved_message,
.gform-theme--framework .form_saved_message :where(p, li) {
	color: #374151;
	font-size: 15px;
}
```

Amikor a rendszer elküldi az e-mailt a mentett űrlap hivatkozásával, a visszajelzés a `#gform_confirmation_wrapper_{űrlapazonosító}` burkolón a `.form_saved_message_sent` osztályt kapja. Ebben az állapotban nincs `.gform_confirmation_message` elem, ezért a közvetlen gyerekelemeket vagy a `:where(p, li)` választót formázd.

```css
.gform-theme--framework.form_saved_message_sent,
.gform-theme--framework.form_saved_message_sent :where(p, li) {
	color: #1a365d;
	font-size: 16px;
}
```