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.
