# Küldés gomb, Mentés és folytatás, ellenőrzési hibák és többoldalas űrlap CSS-e az Orbital témában

> Az Orbital téma gombjainak, a Mentés és folytatás hivatkozásnak, az ellenőrzési hibáknak és a többoldalas űrlap elemeinek formázása CSS API-változókkal.

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. Az Orbital elemeit a CSS API-változók vezérlik, ezért a legtöbb esetben nem a tulajdonságot, hanem a változót érdemes felülírni. A 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 azonosítódat írd a `112` helyére.

## Küldés gomb

A **Küldés** gomb az űrlap élőlábában (`.gform_footer`) van, többoldalas űrlapnál az utolsó oldal élőlábában (`.gform_page_footer`). Ha a gomb helye „A sor végén”, a gomb a küldés mező tartójába kerül.

Az újabb kiadásokban a gombok `<button>` elemek, nem `<input>` elemek. A küldés vezérlő lehet szöveges gomb (`button[type="submit"]`) vagy képes gomb (`button.gform_image_button`, benne egy `<img>`); ezt a Küldés mező beállításai között választod ki az űrlapszerkesztőben.

### Szöveges küldés gomb

A szöveges gomb az elsődleges gombstílust kapja, ugyanazokat a változókat, mint a többi elsődleges gomb. Osztályai: `gform_button` és `button`; a teljes szélességű gomb a `gform-button--width-full` osztályt is megkapja. Azonosítója `gform_submit_button_{űrlapazonosító}`, például `gform_submit_button_1`.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_footer button[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button {
	--gf-ctrl-btn-bg-color-primary: #0096d6;
	--gf-ctrl-btn-bg-color-hover-primary: #0077b3;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-radius: 6px;
	--gf-ctrl-btn-font-size: 16px;
	--gf-ctrl-btn-font-weight: 600;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
	--gf-ctrl-btn-bg-color-primary: #1a365d;
	--gf-ctrl-btn-bg-color-hover-primary: #2c5282;
	--gf-ctrl-btn-color-primary: #ffffff;
}
```

### Képes küldés gomb

Ha a küldés típusa kép, a vezérlő `button[type="submit"]` a `gform_image_button` osztállyal, benne a saját képpel. A keretrendszer átlátszó hátteret és minimális keretet ad neki, ezért a képhez illő keretet, árnyékot vagy más tulajdonságot használj. Magát a képet a `button.gform_image_button img` választóval célozhatod. Az azonosító ugyanaz, mint a szöveges gombnál.

```css
.gform-theme--framework .gform_footer button[type="submit"].gform_image_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_image_button {
	border: 2px solid #e5e7eb;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
```

### A sor végén lévő küldés gomb

Ha a gomb helye „A sor végén”, a gomb a küldés mező tartójában jelenik meg az élőláb helyett. A tartó azonosítója az oldalon `#field_submit_{űrlapazonosító}`, például `#field_submit_1`, és mindig viseli a `.gfield--type-submit` osztályt. Az űrlapszerkesztőben a tartó azonosítója a változatlan `#field_submit`. A gomb osztályai `gform-button` és `button` (a `gform_button` itt nincs); ugyanazok az elsődleges gombváltozók érvényesek.

```css
/* minden Orbital űrlap */
.gform-theme--framework .gfield--type-submit button[type="submit"].button {
	--gf-ctrl-btn-bg-color-primary: #4f46e5;
	--gf-ctrl-btn-bg-color-hover-primary: #4338ca;
	--gf-ctrl-btn-color-primary: #ffffff;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 #field_submit_112 button[type="submit"] {
	--gf-ctrl-btn-font-size: 14px;
	--gf-ctrl-btn-radius: 4px;
}
```

### Küldési forgó jelzés

Az űrlap küldése közben a forgó jelzés a gombon belül jelenik meg, nem mellette. Küldéskor a gomb a `gform-has-spinner` osztályt kapja, és belekerül egy `<span class="gform-loader">` elem. A `gform_ajax_spinner_url`, a `gform_spinner_url` és a `gform_always_show_spinner` szűrő megszűnt, a jelzést CSS-sel alakíthatod vagy rejtheted el.

```css
/* a jelzés színe, minden Orbital űrlapon */
.gform-theme--framework {
	--gf-form-spinner-fg-color: #ffffff;
	--gf-form-spinner-bg-color: rgba(255, 255, 255, 0.35);
}

/* a jelzés elrejtése, csak a 112-es űrlapon */
.gform-theme--framework#gform_wrapper_112 button.gform-has-spinner .gform-loader {
	display: none;
}
```

### Gyakori gombstílusok

**Alapstílus** (szín, árnyék, kerekítés, betűméret, belső margó):

```css
.gform-theme--framework .gform_footer button[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button {
	--gf-ctrl-btn-bg-color-primary: #0096d6;
	--gf-ctrl-btn-bg-color-hover-primary: #0077b3;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	--gf-ctrl-btn-radius: 4px;
	--gf-ctrl-btn-font-size: 14px;
	--gf-ctrl-btn-padding-x: 20px;
}
```

**Lebegtetett állapot.** A `:hover` szabály helyett a hover-változókat írd felül:

```css
.gform-theme--framework .gform_footer button[type="submit"].gform_button,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button {
	--gf-ctrl-btn-bg-color-hover-primary: #444444;
	--gf-ctrl-btn-border-color-hover-primary: rgba(114, 114, 114, 0.6);
	--gf-ctrl-btn-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.15);
}
```

**Lenyomott állapot.** Ehhez nincs változó, ezért itt közvetlen tulajdonságot használhatsz:

```css
.gform-theme--framework .gform_footer button[type="submit"].gform_button:active,
.gform-theme--framework .gform_page_footer button[type="submit"].gform_button:active {
	transform: translateY(1px);
}
```

**Rejtett gomb.** A `display: none` miatt az űrlapküldő kód megszakad, ezért a gombot nem így, hanem láthatósággal és pozícióval rejtsd el:

```css
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
	visibility: hidden !important;
	position: absolute !important;
	left: -9999px !important;
}
```

**Teljes szélességű gomb.** Ha a Küldés mezőben a gomb szélessége **A tartály kitöltése**, a gomb megkapja a `gform-button--width-full` osztályt. CSS-sel így erőltetheted ki:

```css
.gform-theme--framework#gform_wrapper_112 .gform_footer button[type="submit"].gform_button {
	width: 100%;
}
```

## Mentés és folytatás hivatkozás

A **Mentés és folytatás** hivatkozással a kitöltő a félig kitöltött űrlapot elmentheti, és egy egyedi e-mail-hivatkozással később folytathatja. Az űrlap élőlábában (`.gform_footer`), többoldalas űrlapnál az oldal élőlábában (`.gform_page_footer`) jelenik meg. Osztályai: `.gform_save_link`, `.gform-theme-button` és `.gform-theme-button--secondary`; másodlagos gombstílust kap, az ikonja a `::before` elemben van.

Az azonosítója többoldalas űrlapnál `gform_save_{űrlapazonosító}_{oldalszám}_link` (például `gform_save_1_2_link`), egyoldalas űrlapnál `gform_save_{űrlapazonosító}_footer_link`. Külön tartója nincs, az élőlábon vagy magán a hivatkozás osztályán át célozd.

A hivatkozás a másodlagos gombváltozókat használja:

```css
/* minden Orbital űrlap */
.gform-theme--framework .gform_save_link,
.gform-theme--framework .gform_footer .gform_save_link,
.gform-theme--framework .gform_page_footer .gform_save_link {
	--gf-ctrl-btn-bg-color-secondary: #f3f4f6;
	--gf-ctrl-btn-bg-color-hover-secondary: #e5e7eb;
	--gf-ctrl-btn-border-color-secondary: #d2d5db;
	--gf-ctrl-btn-color-secondary: #1a365d;
	--gf-ctrl-btn-radius: 6px;
	--gf-ctrl-btn-font-size: 14px;
}

/* csak a 112-es űrlap */
.gform-theme--framework#gform_wrapper_112 .gform_save_link {
	--gf-ctrl-btn-bg-color-secondary: #f9fafb;
	--gf-ctrl-btn-bg-color-hover-secondary: #f3f4f6;
	--gf-ctrl-btn-color-secondary: #112337;
}

/* egy konkrét hivatkozás: az 1-es űrlap 2. oldala */
.gform-theme--framework#gform_wrapper_1 #gform_save_1_2_link {
	--gf-ctrl-btn-bg-color-secondary: #e0e7ff;
	--gf-ctrl-btn-color-secondary: #3730a3;
}
```

Az ikon színét a `--gf-ctrl-btn-icon-color-secondary` és a `--gf-ctrl-btn-icon-color-hover-secondary` változó adja, az ikont a `--gf-ctrl-btn-icon: none;` elrejti:

```css
.gform-theme--framework .gform_save_link {
	--gf-ctrl-btn-icon-color-secondary: #4b5563;
	--gf-ctrl-btn-icon-color-hover-secondary: #1f2937;
}

.gform-theme--framework#gform_wrapper_112 .gform_save_link {
	--gf-ctrl-btn-icon: none;
}
```

Egy keret nélküli, minimalista változat:

```css
.gform-theme--framework#gform_wrapper_112 .gform_save_link {
	--gf-ctrl-btn-bg-color-secondary: transparent;
	--gf-ctrl-btn-bg-color-hover-secondary: #f3f4f6;
	--gf-ctrl-btn-border-color-secondary: transparent;
	--gf-ctrl-btn-border-color-hover-secondary: #e5e7eb;
	--gf-ctrl-btn-color-secondary: #6b7280;
}
```

## Ellenőrzési hibák

Ha az ellenőrzés sikertelen, az űrlap tetején összegzés jelenik meg (`.gform_validation_errors`), a hibás mezők hibaállapotot kapnak (`.gfield_error`), és minden mező alatt megjelenik a saját üzenete (`.gfield_validation_message`).

### Összegzés az űrlap tetején

Az összegző doboz azonosítója `gform_{űrlapazonosító}_validation_container`, például `gform_1_validation_container`.

```css
.gform-theme--framework .gform_validation_errors {
	--gf-form-validation-bg-color: rgba(192, 43, 10, 0.03);
	--gf-form-validation-border-color: rgba(192, 43, 10, 0.25);
	--gf-form-validation-border-width: 1px;
	--gf-form-validation-border-style: solid;
	--gf-form-validation-radius: 8px;
	--gf-form-validation-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	--gf-form-validation-gap: 8px;
	--gf-form-validation-margin-y: 0 24px;
	--gf-form-validation-padding-y: 20px;
	--gf-form-validation-padding-x: 16px;
}
```

Az összegzés részei és a hozzájuk tartozó változók:

| Rész | Választó | Változók |
|---|---|---|
| Doboz | `.gform_validation_errors` | `--gf-form-validation-bg-color`, `-border-color`, `-border-width`, `-border-style`, `-radius`, `-shadow`, `-gap`, `-margin-y`, `-padding-y`, `-padding-x` |
| Cím | `.gform_validation_errors .gform_submission_error` | `--gf-form-validation-heading-color`, `-heading-font-size`, `-heading-font-weight`, `-heading-gap`, `-heading-line-height` |
| Cím ikonja | `.gform_validation_errors .gform-icon` | `--gf-form-validation-heading-icon-bg-color`, `-icon-border-color`, `-icon-color`, `-icon-size`, `-icon-font-size`, `-icon-radius` |
| Hibalista | `.gform_validation_errors ol` | `--gf-form-validation-summary-color`, `-summary-font-size`, `-summary-font-weight`, `-summary-line-height`, `-summary-margin-y-start`, `-summary-item-link-text-decoration` |

Mindegyiket a `.gform-theme--framework` elé írva minden Orbital űrlapra, vagy a `.gform-theme--framework#gform_wrapper_112` előtaggal egy adott űrlapra használhatod. Például a cím színe egy űrlapon:

```css
.gform-theme--framework#gform_wrapper_112 .gform_validation_errors .gform_submission_error {
	--gf-form-validation-heading-color: #b91c1c;
}
```

Az összegző doboz fókuszkeretének színét a `--gf-form-validation-border-color-focus` változó adja.

### Hibás mező

```css
.gform-theme--framework .gfield_error {
	--gf-ctrl-bg-color-error: #fff5f5;
	--gf-ctrl-border-color-error: #c02b0a;
}

/* csak a szöveges mezők */
.gform-theme--framework .gfield--type-text.gfield_error {
	--gf-ctrl-border-color-error: #dc2626;
}
```

### Mezőhöz tartozó üzenet

Az üzenet azonosítója `validation_message_{űrlapazonosító}_{mezőazonosító}`, például `validation_message_1_2`.

```css
.gform-theme--framework .gfield_validation_message {
	--gf-ctrl-desc-color-error: #c02b0a;
	--gf-ctrl-desc-font-size-error: 14px;
	--gf-ctrl-desc-font-weight-error: 500;
	--gf-ctrl-desc-line-height-error: 1.43;
}

/* csak az e-mail típusú mezők üzenete */
.gform-theme--framework .gfield--type-email .gfield_validation_message {
	--gf-ctrl-desc-font-size-error: 13px;
}
```

## Többoldalas űrlap

A többoldalas űrlap lépésekre bontja a tartalmat. Része a haladásjelző, a lépésjelzők, a lapozó gombok (**Tovább**, **Vissza**, **Küldés**) és a **Mentés és folytatás**. Az oldal burkolója a `.gform_page` osztályt és a `gform_page_{űrlapazonosító}_{oldalszám}` azonosítót kapja (például `gform_page_1_2`), az oldal élőlába a `.gform_page_footer` osztályt.

### Haladásjelző

```css
/* a haladásjelző és a lépések tartója */
.gform-theme--framework .gf_progressbar_wrapper,
.gform-theme--framework .gf_page_steps {
	--gf-field-pg-prog-margin-y-end: 32px;
}

/* a cím */
.gform-theme--framework .gf_progressbar_title {
	--gf-field-pg-prog-color: #1a365d;
	--gf-field-pg-prog-font-size: 14px;
	--gf-field-pg-prog-font-weight: 600;
	--gf-field-pg-prog-title-margin-y-end: 12px;
}

/* a sáv */
.gform-theme--framework .gf_progressbar {
	--gf-field-pg-prog-bar-bg-color: #e5e7eb;
	--gf-field-pg-prog-bar-radius: 100px;
	--gf-field-pg-prog-bar-height: 12px;
}
```

A kitöltött rész színe a választott színváltozattól függ: kékhez `.percentbar_blue` és `--gf-field-pg-prog-bar-bg-color-blue`, szürkéhez `.percentbar_gray` és `--gf-field-pg-prog-bar-bg-color-gray`, zöldhöz `.percentbar_green` és `--gf-field-pg-prog-bar-bg-color-green`. Például:

```css
.gform-theme--framework#gform_wrapper_112 .gf_progressbar .gf_progressbar_percentage.percentbar_green {
	--gf-field-pg-prog-bar-bg-color-green: #10b981;
}
```

A százalékszám alapból rejtett. Ha látni akarod, tedd láthatóvá:

```css
.gform-theme--framework#gform_wrapper_112 .gf_progressbar .gf_progressbar_percentage span {
	position: static;
	width: auto;
	height: auto;
	margin: 0 0 0 8px;
	clip: auto;
	color: #374151;
	font-size: 13px;
	line-height: 1.5;
}
```

### Lépések

A lépésjelzők tartója a `.gf_page_steps`. A távolságokat a `--gf-field-pg-steps-gap-y` és a `--gf-field-pg-steps-gap-x` változó adja, egy lépés belső távolságát a `--gf-field-pg-steps-step-gap` (a `.gf_step` elemen).

```css
/* minden lépés száma és felirata */
.gform-theme--framework .gf_page_steps .gf_step_number,
.gform-theme--framework .gf_page_steps .gf_step_label {
	--gf-field-pg-prog-color: #374151;
	--gf-field-pg-prog-font-size: 14px;
	--gf-field-pg-prog-font-weight: 600;
}

/* aktív lépés */
.gform-theme--framework .gf_step_active .gf_step_number {
	--gf-field-pg-steps-number-bg-color-active: #f3f4f6;
	--gf-field-pg-steps-number-border-color-active: transparent;
	--gf-field-pg-steps-number-color-active: #1f2937;
}

/* következő (még nem elért) lépés */
.gform-theme--framework .gf_step_pending .gf_step_number {
	--gf-field-pg-steps-number-bg-color: transparent;
	--gf-field-pg-steps-number-border-color: #d1d5db;
	--gf-field-pg-steps-number-color: #6b7280;
}

/* teljesített lépés */
.gform-theme--framework .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: #0096d6;
	--gf-field-pg-steps-number-border-color-complete: #0096d6;
	--gf-field-pg-steps-number-color-complete: #ffffff;
}
```

### Oldal és élőláb

```css
.gform-theme--framework .gform_page {
	padding-block: 24px;
}

/* egy konkrét oldal */
.gform-theme--framework#gform_wrapper_1 #gform_page_1_2 {
	border-block-start: 1px solid #e5e7eb;
	padding-block-start: 32px;
}

.gform-theme--framework .gform_page_footer {
	--gf-form-footer-margin-y-start: 24px;
	--gf-form-footer-gap: 12px;
}
```

### Lapozó gombok

```css
/* Tovább gomb */
.gform-theme--framework .gform_next_button {
	--gf-ctrl-btn-bg-color-primary: #0096d6;
	--gf-ctrl-btn-bg-color-hover-primary: #0077b3;
	--gf-ctrl-btn-color-primary: #ffffff;
	--gf-ctrl-btn-radius: 6px;
	--gf-ctrl-btn-font-size: 16px;
}

/* egy konkrét Tovább gomb */
.gform-theme--framework#gform_wrapper_1 #gform_next_button_1_2 {
	--gf-ctrl-btn-font-size: 14px;
}

/* Vissza gomb (másodlagos gombstílus) */
.gform-theme--framework .gform_previous_button {
	--gf-ctrl-btn-bg-color-secondary: #f3f4f6;
	--gf-ctrl-btn-bg-color-hover-secondary: #e5e7eb;
	--gf-ctrl-btn-border-color-secondary: #d2d5db;
	--gf-ctrl-btn-color-secondary: #374151;
	--gf-ctrl-btn-radius: 6px;
}
```

Az utolsó oldal **Küldés** gombját a fenti [Küldés gomb](#küldés-gomb) szakasz szerint formázd: a `.gform_page_footer button[type="submit"].gform_button` választóval.

### Példák egy-egy színvilágra

Egy lila kiemelés a teljesített lépésekre, csak a 112-es űrlapon:

```css
.gform-theme--framework#gform_wrapper_112 .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: #7c3aed;
	--gf-field-pg-steps-number-border-color-complete: #7c3aed;
	--gf-field-pg-steps-number-color-complete: #ffffff;
}
```

Visszafogott, szürke teljesített lépések minden űrlapon:

```css
.gform-theme--framework .gf_step_completed .gf_step_number {
	--gf-field-pg-steps-number-bg-color-complete: transparent;
	--gf-field-pg-steps-number-border-color-complete: #d1d5db;
	--gf-field-pg-steps-number-color-complete: #6b7280;
}
```