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

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.

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

https://minta-bolt.hu/megjelenes-proba/

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

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ó.

/* 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:

/* 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

/* 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).

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:

/* 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 é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 fejezet gyűjti össze.