Lehetőségek oszlopokban és átállás a CSS Ready Classes osztályokról

Lehetőségek megjelenítése oszlopokban

A jelölőnégyzet, a rádiógomb és a Többválasztós mező lehetőségeit az űrlapszerkesztőben, külön CSS nélkül oszlopokba rendezheted. Korábban ehhez a CSS Ready Classes osztályok kellettek (például gf_list_2col), de ezek elavultak, és a legújabb főverzióban a régi jelölés támogatásával együtt megszűnnek.

A beállítás helye

1. Vegyél fel egy Jelölőnégyzetek, Többválasztós vagy Rádiógombok mezőt, és kattints rá az űrlapszerkesztőben.
2. A Mező beállításai oldalsávban nyisd ki az Általános szakaszt.
3. A Lehetőségek elrendezése sorban válaszd az Oszlopok lehetőséget.
4. Állítsd be az oszlopok számát és a sorrendet.

https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&id=4

A képen az Oszlopok választás után megjelenő két új beállítás látszik: az Oszlopok száma és az Oszlopok szerinti elrendezés.

A beállítások

Beállítás	Mit csinál	Alapérték
Oszlopok száma	Hány oszlopba rendeződjenek a lehetőségek (1 és 5 között: 1 oszlop … 5 oszlop).	1 oszlop
Oszlopok szerinti elrendezés	A lehetőségek sorrendje több oszlopnál. Vízszintesen: balról jobbra tölti ki a sort, utána jön a következő sor. Le: fentről lefelé tölti ki az oszlopot, utána jön a következő oszlop.

A megjelenő oszlopok száma nem mindig egyezik a beállítottal. Az elosztást a böngésző CSS-e végzi, és igyekszik elkerülni az egyenlőtlenül megtöltött oszlopokat. Például négy oszlopnál 5 vagy 9 lehetőséggel csak három oszlop jelenhet meg. Ez a CSS ismert korlátja, nem a bővítmény hibája.

Átállás a CSS Ready Classes osztályokról

Ha az űrlapjaid CSS Ready Classes osztályokat használnak, érdemes áttérned az űrlapszerkesztő elrendezés-szerkesztőjére vagy saját CSS-re, hogy a későbbi főverziókkal is működjenek. Az űrlapszerkesztő figyelmeztetést is mutat az elavult osztályokról.

A bővítmény főverziójának következő kiadása a régi jelölés (az eredeti, 2009-es szerkezet) támogatását teljesen megszünteti. A modern jelölés már a 2.5-ös kiadás óta elérhető, de sok űrlap még a régi jelölés elemeire, köztük a Ready Classes osztályokra támaszkodik az elrendezéshez.

A saját osztályt a mező Megjelenés szakaszának Egyéni CSS-osztály mezőjébe írod:

https://minta-bolt.hu/wp-admin/admin.php?page=gf_edit_forms&id=4

A képen az Egyéni CSS-osztály mezőt keresd: ide írt osztály kerül a mezőre, és erre célozhatsz a CSS-sel.

Mi az a Ready Class, és hogyan működik

A Ready Classes az 1.5-ös kiadásban jelent meg: kész osztálynevek, amelyeket a mezőre teszel, és az űrlap alap stíluslapjának előre megírt szabályai alapján másképp rendezik el a mezőt. Mivel a régi jelölésben az osztály a mezőt körülvevő szülőelemre (li) kerül, saját osztályt is megadhatsz, és a téma stíluslapjában te írhatsz rá szabályt.

• Az osztályt az űrlapszerkesztőben a mező Megjelenés szakaszának Egyéni CSS-osztály mezőjébe írd, majd mentsd az űrlapot. Az osztály hatása nem látszik az űrlapszerkesztőben, csak az előnézetben vagy a kész oldalon.
• Több osztályt szóközzel elválasztva is megadhatsz egy mezőn. Nem minden kombináció működik, de sok igen: például egy kétoszlopos elrendezésen belül lehet kétoszlopos lista.
• Az oszlopos osztályok (felek, harmadok, negyedek) csak az „a címke felül” elrendezésű űrlapon működnek, és csak egymás melletti mezőkön: az első mezőre a bal oldali, a következőre a jobb oldali osztály kerül (harmadoknál bal, középső, jobb; negyedeknél első, második, harmadik, negyedik).
• A Ready Classes mobilon nem érvényesül, ott reszponzív stílus dolgozik.
• A téma saját stíluslapja felülírhatja az osztályok hatását, ilyenkor a téma stílusán kell igazítanod.
• A listaosztályok (gf_list_*) csak jelölőnégyzetes és rádiógombos listákon hatnak, bármilyen címkehelyzetnél. A gf_list_2col … gf_list_5col soronként tölti ki az oszlopokat balról jobbra, a _vertical változat fentről lefelé, úgy osztva szét a listát, hogy az oszlopok hossza közel azonos legyen. A gf_list_height_* osztályok egyforma magasságot adnak a lista elemeinek, hogy a különböző magasságú elemek ne csússzanak szét.
• A gf_simple_horizontal az űrlap beállításainál a CSS-osztály neve mezőbe kerül, és nagyon egyszerű, egybemezős vízszintes űrlapot ad (például e-mail-mező és mellette a gomb). A mező címkéje ilyenkor rejtett, ezért helyőrzőt érdemes használni, és a mező mérete legyen „nagy”. A gf_confirmation_* osztályok szintén ide kerülnek, és csak szöveges visszaigazolásnál működnek, oldal vagy átirányítás típusúnál nem.
• A gf_alert_* osztályok a HTML mező tartalmát színes sávvá alakítják, a gf_scroll_text a Szakasz mezőt rögzített magasságú, görgethető dobozzá (hosszú szabályzatokhoz), a gf_hide_ampm elrejti az Idő mező de./du. választóját (az űrlapon, a beküldésben nem), a gf_hide_charleft a Bekezdés mező karakterszámlálóját, a gf_invisible pedig elrejti a mezőt ott is, ahol nincs Láthatóság beállítás (például a termékmezőknél).

Az elavult osztályok és a helyettük használható megoldás

Osztály	Állapot	Mit használj helyette
gf_left_half, gf_right_half	a 2.5-ös kiadás óta elavult	az űrlapszerkesztő oszlopkezelése (a mezők húzással egymás mellé rendezése)
gf_left_third, gf_middle_third, gf_right_third	a 2.5-ös kiadás óta elavult	az oszlopkezelés
gf_first_quarter, gf_second_quarter, gf_third_quarter, gf_fourth_quarter	a 2.5-ös kiadás óta elavult	az oszlopkezelés
gf_inline	a 2.5-ös kiadás óta elavult	az oszlopkezelés
gf_list_2col, gf_list_3col, gf_list_4col, gf_list_5col	az elavulás a 4.0-ás kiadásban várható	a mező Lehetőségek elrendezése beállítása (Oszlopok)
gf_list_2col_vertical, gf_list_3col_vertical, gf_list_4col_vertical, gf_list_5col_vertical	az elavulás a 4.0-ás kiadásban várható	ugyanaz, Oszlopok szerinti elrendezés: Le
gf_list_inline	az elavulás a 4.0-ás kiadásban várható	váltás a Többválasztós mezőre és a vízszintes elrendezésre, vagy saját CSS (lásd lent)
gf_list_height_25, gf_list_height_50, gf_list_height_75, gf_list_height_100, gf_list_height_125, gf_list_height_150	az elavulás a 4.0-ás kiadásban várható	nem kell semmi: a modern CSS egyforma magasan jeleníti meg a lehetőségeket
gf_alert_green, gf_alert_red, gf_alert_yellow, gf_alert_gray, gf_alert_blue	a 2.9.15-ös kiadás óta elavult	saját CSS
gf_confirmation_simple_yellow, gf_confirmation_simple_gray, gf_confirmation_yellow_gradient, gf_confirmation_green_gradient	a 2.9.15-ös kiadás óta elavult	saját CSS
gf_simple_horizontal	a 2.6-os kiadás óta elavult	az oszlopkezelés és a küldés gomb helyének beállítása
gf_scroll_text, gf_hide_ampm, gf_invisible, gf_hide_charleft	a 2.9.15-ös kiadás óta elavult	saját CSS

Kódrészletek a saját CSS-hez

A kódot a testreszabóba (Megjelenés → Testreszabás) vagy a gyermektéma stíluslapjába másold. A gf_alert_blue osztályra nincs kész minta, azt a többi riasztás mintájára te állíthatod elő.

gf_list_inline (a lehetőségek egymás mellett, törésekkel):

.gform-theme--framework .gfield--type-choice.gf_list_inline .gfield_checkbox,
.gform-theme--framework .gfield--type-choice.gf_list_inline .gfield_radio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px 16px;
}

Riasztások a HTML mezőben (zöld, piros, sárga, szürke):

.gform_wrapper .gfield.gfield_html .gf_alert_green {
  border-radius: 3px;
  margin-block: 1.25rem !important;
  margin-inline: 0 !important;
  padding: 1.25rem !important;
  background-color: #cbeca0;
  border: 1px solid #97b48a;
  color: #030;
  text-shadow: #dfb 1px 1px;
}

.gform_wrapper .gfield.gfield_html .gf_alert_red {
  border-radius: 3px;
  margin-block: 1.25rem !important;
  margin-inline: 0 !important;
  padding: 1.25rem !important;
  background-color: #faf2f5;
  border: 1px solid #cfadb3;
  color: #832525;
  text-shadow: #fff 1px 1px;
}

.gform_wrapper .gfield.gfield_html .gf_alert_yellow {
  border-radius: 3px;
  margin-block: 1.25rem !important;
  margin-inline: 0 !important;
  padding: 1.25rem !important;
  background-color: #fffbcc;
  border: 1px solid #e6db55;
  color: #222;
  text-shadow: #fcfaea 1px 1px;
}

.gform_wrapper .gfield.gfield_html .gf_alert_gray {
  border-radius: 3px;
  margin-block: 1.25rem !important;
  margin-inline: 0 !important;
  padding: 1.25rem !important;
  background-color: #eee;
  border: 1px solid #ccc;
  color: #424242;
  text-shadow: #fff 1px 1px;
}

Visszaigazolások (egyszerű sárga és szürke):

.gform_confirmation_wrapper .gf_confirmation_simple_yellow {
  background-color: #fffbcc;
  border-block: 1px solid #e6db55;
  color: #424242;
  font-size: 25px;
  margin-block: 30px;
  margin-inline: 0;
  max-inline-size: 99%;
  padding: 32px;
}

.gform_confirmation_wrapper .gf_confirmation_simple_gray {
  background-color: #eaeaea;
  border-block: 1px solid #ccc;
  color: #424242;
  font-size: 25px;
  margin-block: 30px;
  margin-inline: 0;
  max-inline-size: 99%;
  padding: 32px;
}

Visszaigazolások (sárga és zöld átmenetes, árnyékkal):

.gform_confirmation_wrapper .gf_confirmation_yellow_gradient {
  background-color: #fffbd2;
  border: 1px solid #e6db55;
  box-shadow: 0 0 5px rgba(221, 215, 131, 0.75);
  margin-block: 30px;
  margin-inline: 0;
  position: relative;
}

.gform_confirmation_wrapper .gf_confirmation_yellow_gradient .gform_confirmation_message {
  background: linear-gradient(to bottom, #fffce5 0%, #fff9bf 100%);
  background-color: #fffbcc;
  border-block-end: 1px solid #e6db55;
  border-block-start: 2px solid #fff;
  color: #424242;
  font-size: 28px;
  margin: 0;
  max-inline-size: 99%;
  padding: 40px;
}

.gform_confirmation_wrapper .gf_confirmation_yellow_gradient::before,
.gform_confirmation_wrapper .gf_confirmation_yellow_gradient::after {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  content: "";
  inline-size: 50%;
  inset-block: 80% 15px;
  inset-inline-start: 10px;
  max-inline-size: 40%;
  position: absolute;
  transform: rotate(-3deg);
  z-index: -1;
}

.gform_confirmation_wrapper .gf_confirmation_green_gradient {
  background-color: #f1fcdf;
  border: 1px solid #a7c37c;
  box-shadow: 0 0 5px rgba(86, 122, 86, 0.4);
  margin-block: 30px;
  margin-inline: 0;
  position: relative;
}

.gform_confirmation_wrapper .gf_confirmation_green_gradient .gform_confirmation_message {
  background: linear-gradient(to bottom, rgba(219, 242, 183, 1) 0%, rgba(180, 208, 136, 1) 100%);
  background-color: #fffbcc;
  border-block-end: 1px solid #a7c37c;
  border-block-start: 2px solid #effade;
  color: #030;
  font-size: 28px;
  margin: 0;
  max-inline-size: 99%;
  padding: 40px;
  text-shadow: #dfb 1px 1px;
}

.gform_confirmation_wrapper .gf_confirmation_green_gradient::before,
.gform_confirmation_wrapper .gf_confirmation_green_gradient::after {
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 15px 10px rgba(0, 0, 0, 0.2);
  content: "";
  inline-size: 50%;
  inset-block: 80% 15px;
  inset-inline-start: 10px;
  max-inline-size: 40%;
  position: absolute;
  transform: rotate(-3deg);
  z-index: -1;
}

gf_scroll_text (görgethető szakaszszöveg), gf_hide_ampm (a de./du. választó elrejtése), gf_hide_charleft (a karakterszámláló elrejtése) és gf_invisible (a mező láthatatlanná tétele úgy, hogy az űrlap kezelni tudja):

.gform_wrapper .gsection.gf_scroll_text {
  background-color: #fff;
  block-size: 15rem;
  border: 1px solid #ccc;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 2rem;
}

.gform_wrapper .gsection.gf_scroll_text .gsection_title {
  margin-block-start: 0;
}

.gform_wrapper .gf_hide_ampm .gfield_time_ampm {
  display: none !important;
}

.gform_wrapper .gf_hide_charleft .charleft {
  display: none !important;
}

.gform_wrapper .gf_invisible {
  left: -9999px;
  position: absolute;
  visibility: hidden;
}