A complete know-how on tweaking Gravity Forms using CSS Ready Classes

A complete know-how on tweaking Gravity Forms using CSS Ready Classes

Recent years have witnessed the release of tremendously improved versions of WordPress CMS. Trendy features introduced along with these WP versions have served as the backbone of hundreds and thousands of websites prevalent over the web. Numerous plugins have added a unique charm to the effectiveness of traditional as well as latest WordPress versions. One such plugin is the Gravity Forms plugin which has been readily used for creating excellent forms that need to be included within the web pages. The version 1.5 of Gravity Forms comes equipped with something innovative called “Ready Classes” These classes enable you to create advanced and eye-catchy layouts for the fields incorporated within the web page forms. In this post, I’ll be offering you a handy guide on performing tweaks to Gravity forms using these CSS ready classes.

What exactly are CSS ready classes?

CSS ready classes are basically the class names that can be easily added to the parent element that surrounds each field within a specific web page form. These classes can be used for taking full advantage of all the pre-defined styles which come included within the default CSS stylesheet of the form under focus.

A closer look at moderating Gravity forms using CSS ready classes

For adding a CSS Ready class to a particular form field, all you need to do is simply edit the form using the Form Builder, followed by choosing the field to which you want to add the css-ready classes.  Just go to your Advanced tab and you’ll find an input field named “CSS Class Name”. Here, simply enter the Ready class name or names which you want to add to the field. Finally, click on “Save” button to save the changes made to the gravity form. Have a look at the below screen-shot:

Here’s a list of built-in Ready Classes which exist by default with the Gravity Forms original stylesheet. The best part of these CSS ready classes is that you need not work on your existing CSS  stylesheet.

Halves(2 Columns)

Both the below explained ready classes work with only the “top label” option that’s available for form layout styling.

  • gf_left_half- This ready class places the field within the left column of the 2-column layout.
  • gf_right_half- This ready class places the field within the right column of the 2-column layout.

Hence, in order to align the two sides adjacent to each other, you simply need to add the gf_left_half class to the first field and the gf_right_half class to the second one.

List Classes

Below is an array of Ready classes which allows you to moderate the lists which have been incorporated as fields within the gravity forms:

  • gf_list_2col

This ready class transforms a multiple choice/checkbox list into a 2-column format. Applicable to just the multiple choice/checkbox lists, this ready class can also work well with other form label position settings.

  • gf_list_3col

This ready class transforms a multiple choice/checkbox list into a 3-column format. Just like the gf_list_2col, this ready class can also work with any form label position setting.

  • gf_list_4col

This ready class transforms a multiple choice/checkbox into a 4-column format. It works well with every form label position setting.

  • gf_list_5col

This ready class transforms a multiple choice/checkbox into a 5-column format and works with any form label position setting.

  • gf_list_inline

This ready class will transform a multiple choice/checkbox list into an inline horizontal list. It works well with a variety of form label position settings.

  • gf_list_height_25

This ready class applies 25px height value to all multiple choice/checkbox items within the list. It works as a handy option for avoiding “hanging floats” caused due to list items with unequal heights.

  • gf_list_height_50

This ready class applies 50px height value to all multiple choice/checkbox items within the list. It also plays a significant role in avoiding the “hanging floats” error caused due to list items with different height values.

  • gf_list_height_75

This ready class applies 75px height value to different multiple choice/checkbox items available within a list. Serving as a useful class for avoiding “hanging floats” problem, this ready class is just applicable to multiple choice/checkbox lists.

  • gf_list_height_100

This ready class applies 100px height value to all multiple choice/checkbox items within a list. As an effective means to avoid the “hanging floats” issue, this CSS ready class works with any form label position settings.

  • gf_list_height_125

This ready class applies 125px height value to different multiple choice/checkbox items within the list. You can use this CSS-ready class for avoiding any “hanging floats” issue caused due to list items with unequal heights.

  • gf_list_height_150

This ready class applies 150px height value to different multiple choice/checkbox items within the list. It also helps in avoiding “hanging floats” error caused due to list items with different values for the ‘height’ field.

That’s it for now!

Conclusion

CSS ready class has undoubtedly served as an excellent means of customizing the gravity forms in your own unique way. I’m sure after reading the above post, you too would have gathered a greater understanding of how things can be done in a simple and highly convenient way and if you have any request of psd to WordPress I accept that too.

Related Articles

  • The Easy Way to Build A WooCommerce Restaurant Website

    As a restaurant owner, there are a number of ways you can benefit from building a WooCommerce restaurant website. For example, you can offer online ordering options to customers, automate order processing, and potentially increase sales. Creating a functional restaurant…

  • The Three Types of Service Organization Control Reports

    The primary purpose of a service organization control (SOC) report is to help your service organization or company communicate information in regards to your controls. The report will be given by an independent service auditor (who must be a certified…

  • Bar Preparty Identity

    The unique identity of a bar attracts thousands of customers and increases sales. Let’s see how the unusual bars around the world look and let’s learn more about the trends in their design. Types of bars: Lux-format. To decorate such…

Written By
Samuel Dawson

Samuel Dawson is a excellent web developer, he has also interest in various web development languages and he use to find new information on it.

Leave a Reply

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