iTechLogixiTechLogix

CALL NOW : +92 (322) 884 8882
Menu
  • About
    • Close
    • About Us
    • Our Portfolio
    • Close
  • Register
    • Close
    • Domain Registration
    • Web Hosting
    • VPS/ Dedicated Server
    • Close
  • Design
    • Close
    • Web Design Services
    • Corporate Identity Design
    • Close
  • Develop
    • Close
    • Website Development
    • Static Website Development
    • CMS Website Development
    • E-Commerce Website
    • Basic Website Package
    • Pro Website Package
    • Pro Plus Website Package
    • E-Commerce Package
    • Close
  • Market
    • Close
    • Online Marketing
    • Social Media Marketing Services
    • Pay Per Click Services
    • Content Writing Services
    • Link Building Services
    • Basic SEO Package
    • Pro SEO Package
    • Ultimate SEO Package
    • Close
  • Apps
    • Close
    • Mobile Apps Development
    • Close
  • Contact Us
  • Blog
FREE QUOTE
Avatar
Saif
Tuesday, 02 May 2017 / Published in web development

Format Gravity Form Fields with CSS Ready Classes

To add a Ready Class to a field, just edit your form in the Form Builder and then select the field you want to add the classes to. Under the “Advanced” tab, you’ll see an input called “CSS class name”. Add the Ready Class name or names you want to add to the field here and then save the form.

 

Please note that this feature does NOT update live in the Form Builder. After you specify your Ready Class names, just save the form and you’ll see the classes being applied to your form in the preview window and on the live site.

The Ready Class Names

Here are the Ready Classes that are built in the Gravity Forms default stylesheet that you can use right away without having to write any of your own CSS.

Halves (2 Columns)

Note: These only work with the “top label” form layout option.

gf_left_half

This places the field in the left column (left half) of a 2 column layout. This only work with the “top label” form layout option.

gf_right_half

This places the field in the left column (right half) of a 2 column layout. This only work with the “top label” form layout option.

To align two fields side by side (2 equal columns) you can add these classes. The two fields have to be adjacent to each other in the Form Builder. The gf_left_half class has to be added to the first field and the gf_right_half class to the second field.

Example:

Thirds (3 Columns)

gf_left_third

This places the field in the left column (left third) of a 3 column layout. This only work with the “top label” form layout option.

gf_middle_third

This places the field in the middle column (middle third) of a 3 column layout. This only work with the “top label” form layout option.

gf_right_third

This places the field in the right column (right third) of a 3 column layout. This only work with the “top label” form layout option.

To align three fields side by side (3 equal columns) you can add these classes. The three fields have to be adjacent to each other in the Form Builder. The gf_left_third class has to be added to the first field, the gf_middle_third class to the second field and the gf_right_third class to the third field.

Example:

List Classes

gf_list_2col

This turns a multiple choice/checkbox list into an equally-spaced 2 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_3col

This turns a multiple choice/checkbox list into an equally-spaced 3 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Example:

 

gf_list_4col

This turns a multiple choice/checkbox list into an equally-spaced 4 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_5col

This turns a multiple choice/checkbox list into an equally-spaced 5 column format. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_inline

This turns a multiple choice/checkbox list into an inline horizontal list (not evenly spaced columns). This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Example:

gf_list_height_25

This applies a 25px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_50

This applies a 50px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_75

This applies a 75px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_100

This applies a 100px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_125

This applies a 125px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

gf_list_height_150

This applies a 150px height value all multiple choice/checkbox items in that list. This can be useful to avoid “hanging floats” caused by list items of unequal height. This only applies to multiple choice/checkbox lists and work with any of the form label position settings.

Other Classes

gf_scroll_text

This converts a section break field into a box with a fixed height that will automatically show a scroll bar if there’s a large amount of text. This is useful if you’re wanting to show large amounts of content to the user, but don’t want to have to link to it or make the form very long to show it (Terms of Service Agreements, etc). This class only works on section breaks and works with any of the form label position settings.

Comments

comments

Tagged under: classez, fields, format, gravity, ready

What you can read next

Set Excerpt Length in WordPress
Best Method to Add Custom CSS
Fix Tab Index Conflicts with Gravity Forms

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

RECENT POSTS

  • Best Method to Add Custom CSS
    May 7, 2017
    Modren day websites rely heavily on CSS. When using a […]
  • Linux Keep a Process Running even If SSH Session is Interrupted
    May 6, 2017
    Often a long running process like scp, zip or backup […]
  • Format Gravity Form Fields with CSS Ready Classes
    May 2, 2017
    To add a Ready Class to a field, just edit your form […]
  • Install Imagick Extension for PHP on Ubuntu
    April 24, 2017
    It’s fairly straightforward to install imagick […]
  • Vesta Control Panel – How to install ClamAV and SpamAssassin on …
    April 16, 2017
    This tutorial is created for servers with less than […]

Categories

  • Marketing
  • Servers
  • web development

Archives

  • May 2017
  • April 2017
January 2021
M T W T F S S
« May    
 123
45678910
11121314151617
18192021222324
25262728293031

About iTechLogix

iTechLogix is a US based technology consulting firm specializing in providing scalable technology solutions to small and medium-sized businesses throughout the globe. Over a course of 6 years, we have helped hundreds of businesses with our web development, design and marketing services. We offer seamless integration, re-usabty and guaranteed flexibility

iTechLogix at Twitter

over a year agoIs #Featured #Snippet #Reign #Finally over?- -https://t.co/RBJSjIyGSp https://t.co/FOkWOg2tlu
over a year agoIs #Featured #Snippet #Reign #Finally over?- -https://t.co/RBJSjIyGSp https://t.co/Kh5mD0n8Ge
over a year ago#Google Lens is #Interesting and #Promising but far from #Perfect yet- -https://t.co/s4e0HRMSim https://t.co/D2HI8vT4VU
over a year ago#Google Lens is #Interesting and #Promising but far from #Perfect yet- -https://t.co/s4e0HRMSim https://t.co/tR1tQsGAph
over a year ago#Apple #Launches its new #Search Ads #Basic for app #Store- -https://t.co/4XhnUBIlKN https://t.co/gI75lhrrb0
over a year ago#Featured #Snippets now #Offer more #Content with #Latest #Google #Search updates- -https://t.co/l5KgZgO8Nc https://t.co/1NuJzh1TRL
Follow @iTechLogix

Quick Links

Menu
  • Website Development
  • Online Marketing
  • App Development
  • VPS/ Dedicated Server

Get a Callback

  • Home
  • Contact Us

© 2017. All rights reserved. iTechLogix.

TOP
Graphic Design Quotation
  • Please enter a value between 200 and 10000.
Get Shared Hosting
VPS/ Dedicated Server Quote
Get a free Mobile App Quotatio
Get a Free Quotation
Contact Us