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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.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

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

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

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