Gravity Forms CSS Ready Classes

Læsetid: 3 minutter

Hvis du arbejder med WordPress og Gravity Forms vil det næste sikkert være ganske hjælpsomt at læse. Hvis du ikke allerede kender Gravity Forms vil jeg anbefale dig, at lære pluginnet, at kende. Det er uden tvivl et af de bedste, mest veldokumenteret og velfungerende plugins til WordPress, til at lave formularer og har integrationer med et væld af services out-of-the-box. Nogle af de spørgsmål jeg ofte får ang. Gravity Forms er “Hvordan sætter jeg to felter ved siden af hinanden?”, “Kan jeg få radio-buttons til, at stå på ÉN linje?”, “Kan jeg inddele mine checkboxe i kolonner?”, etc. En af de super fede, men relativt ukendte features ved Gravity Forms er, at der følger en masse klasser med, som gør det nemt at style dine forms. Gravity Forms kalder dem for CSS Ready classes.

Hvordan anvendes de?

Fælles for alle CSS Ready Classes er, at de sættes på felterne gennem “Advanced” (Avanceret) fanen under indstillingerne på det enkelte felt. Dette kan måske virke en smule besværligt, at skulle gøre for alle felter i en form, men det giver samtidig en kæmpe mængde fleksibilitet. Hvis du vil gøre det for alle felter på én gang, vil jeg anbefale du skriver din egen CSS til formularen.

To input felter ved siden af hinanden

Disse to kombineres i par, således, at du har en venstre halvdel og en højre halvdel.

  • gf_left_half
  • gf_right_half

Tre input felter ved siden af hinanden

Som med foregående, kombineres disse også i par, dog med ventre, midte, højre.

  • gf_left_third
  • gf_middle_third
  • gf_right_third

Inddel lister i kolonner

Anvendes på lister af checkboxe og radio-buttons, til at lave kolonner med valg muligheder.

  • gf_list_2col
  • gf_list_3col
  • gf_list_4col
  • gf_list_5col

Sæt radio-buttons og checkboxe ved siden af hinanden (inline)

Anvendes hvis du ønsker, at sætte alle valgmulighederne ved siden af hinanden på et fortløbende liste.

  • gf_list_inline

Sæt højden på radio-buttons / checkboxe i en liste

Anvendes til, at styre hvor højt området om hvert input felt er, tallet angiver højden pixels.

  • gf_list_height_25
  • gf_list_height_50
  • gf_list_height_75
  • gf_list_height_100
  • gf_list_height_125
  • gf_list_height_150

Scroll Texts

Anvendes f.eks. til EULA, Accept tekster, etc.

  • gf_scroll_text

Skjul AM/PM vælger på tidsfelter

Skjuler AM/PM vælgeren for tidsfeltet på tidsfelter med 12-timers format. Bemærk, denne skjuler kun feltet på formen, værdien vil stadig fremgå af formularens indsendte svar.

  • gf_hide_ampm

Skjul feltet der viser antal karakterer tilbage

Skjuler tælleren der viser hvor mange karakterer der er tilbage, på felter der har et maksimum antal karakterer indstillingen sat.

  • gf_hide_charleft

Kombinér Gravity Forms CSS Ready Classes

Og hvis disse klasser som gør Gravity Forms endnu bedre og fleksibelt, bliver bestemt ikke værre af, at du kan kombinere klasserne, f.eks. gf_left_half og gf_right_half med gf_list_2col.

Skriv en kommentar

Din e-mailadresse vil ikke blive publiceret.

Klar på mere inspiration?

Lyt til vores WordPress podcast!