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

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 fejezet tartozik. A CSS API-változók áttekintése a CSS-útmutató 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.

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

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

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

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

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

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

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

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

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

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

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

.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

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

/* 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ó}.

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

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

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

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

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

.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

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

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

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

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

.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

.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

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

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

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