• Facebook Icon Link
    • Instagram Icon Link

    How to Use Gravity Forms Ready Classes.


    gravity forms ready classes graphic

    Tutorial Overview.

    Gravity Forms is possibly the best forms plugin you can get for WordPress. If you want the ability to customize your Gravity Forms you should really learn about their Ready Classes. Ready Classes help you create different layout structures and make other modifications to your Gravity Forms fields. Gravity Forms ready classes are pre-written CSS classes that are included with the plugin, all you need to do is call the class.

    Quickies.

    List of Current Ready Classes.

    • gf_left_half
    • gf_right_half
    • gf_left_third
    • gf_middle_third
    • gf_right_third
    • gf_first_quarter
    • gf_second_quarter
    • gf_third_quarter
    • gf_fourth_quarter
    • gf_inline
    • gf_list_2col
    • gf_list_3col
    • gf_list_4col
    • gf_list_5col
    • gf_list_inline
    • gf_list_height_25
    • gf_list_height_50
    • gf_list_height_75
    • gf_list_height_100
    • gf_list_height_125
    • gf_list_height_150
    • gf_simple_horizontal
    • gf_scroll_text
    • gf_hide_ampm
    • gf_hide_charleft
    • gf_section_right

    How Do I Use a Gravity Forms Ready Class?

    1. Open the form you want to edit.
    2. Find the field you want to edit and open it.

    Gravity Forms ready classes

    1. Click on the Appearence tab.

    gravity forms css field

    1. Enter the Ready Class you want to use into the Custom CSS Class field.
    2. Update the form.

    SiteGround WordPress Hosting Banner

    How to Create a Two Column Layout Using Gravity Forms Ready Classes.

    Two-column layouts will only work if Top Aligned is selected for Label Placement under Settings so verify that this setting is selected before proceeding. The fields need to be placed in the same order from top to bottom as you want them to appear from left to right on the front-end of your website.

    form layout label placement

    1. Open the form you want to edit or create a new form.
    2. Order the fields, starting at the top, alternating the left field and right field. Start with a left-field at the very top and then a right field below it and repeat.

    two column field order

    1. Open one of the fields that is going to be placed in the left column.
    2. Click on the Appearance tab.
    3. In the Custom CSS Class field, enter gf_left_half.

    gravity forms left half

    1. Repeat this for all of the fields you want to be placed in the left column.
    2. Open one of the fields that is going to be placed in the right column.
    3. Click on the Appearance tab.
    4. In the Custom CSS Class field, enter gf_right_half.

    gravity forms right half

    1. Repeat this for all of the fields you want to be placed in the right column.
    2. Update or Save the form.

    two column example

    This is how the form will appear on the front-end of your website.

    bluehost wordpress hosting banner

    How to Create a Three Column Layout in Gravity Forms.

    Three column layouts will only work if Top Aligned is selected for Label Placement under Settings so verify that this setting is selected before proceeding. The fields need to be placed in the same order from top to bottom as you want them to appear from left to right on the front-end of your website.

    form layout label placement

    1. Open the form you want to edit or create a new form.
    2. Order the fields, starting at the top, in an order of left, middle, right. Start with a left-field at the very top, then a middle field below it and a right field below that and repeat.

    three columns field order

    1. Open one of the fields that is going to be placed in the left column.
    2. Click on the Appearance tab.
    3. In the Custom CSS Class field, enter gf_left_third.

    gravity forms left third

    1. Repeat this for all of the fields you want to be placed in the left column.
    2. Open one of the fields that is going to be placed in the middle column.
    3. Click on the Appearance tab.
    4. In the Custom CSS Class field, enter gf_middle_third.

    gravity forms middle third

    1. Repeat this for all of the fields you want to be placed in the middle column.
    2. Open one of the fields that is going to be placed in the right column.
    3. Click on the Appearance tab.
    4. In the Custom CSS Class field, enter gf_right_third.

    gravity forms right third

    1. Repeat this for all of the fields you want to be placed in the right column.
    2. Update or Save the form.

    three column example
    This is how the form will appear on the front-end of your website.

    Divi WordPress Theme Banner

    How to Create a Four Column Layout Gravity Forms Ready Classes.

    Four-column layouts will only work if Top Aligned is selected for Label Placement under Settings so verify that this setting is selected before proceeding. Place the field you want in the first column at the top. Place the field you want to go in the second column below the first one. Place the one you want to go in the third column below the second one. Place the one you want to go in the fourth column below the third one. Repeat this for each row.

    form layout label placement

    1. Open the form you want to edit or create a new form.
    2. Place the fields in order from top to bottom for each row.

    four columns example

    1. Open one of the fields that is going to be placed in the first column.
    2. Click on the Appearance tab.
    3. In the Custom CSS Class field, enter gf_first_quarter.

    gravity forms first quarter

    1. Repeat this for all of the fields you want to be placed in the first column.
    2. Open one of the fields that is going to be placed in the second column.
    3. Click on the Appearance tab.
    4. In the Custom CSS Class field, enter gf_second_quarter.

    gravity forms second quarter

    1. Repeat this for all of the fields you want to be placed in the second column.
    2. Open one of the fields that is going to be placed in the third column.
    3. Click on the Appearance tab.
    4. In the Custom CSS Class field, enter gf_third_quarter.

    gravity forms third quarter

    1. Repeat this for all of the fields you want to be placed in the third column.
    2. Open one of the fields that is going to be placed in the fourth column.
    3. Click on the Appearance tab.
    4. In the Custom CSS Class field, enter gf_fourth_quarter.

    gravity forms fourth quarter

    1. Repeat this for all of the fields you want to be placed in the fourth column.
    2. Update or Save the form.

    four column example
    This is how the form will appear on the front-end of your website.

    How to Make Gravity Forms Fields Inline.

    The gf_inline class places the fields with this class in one line horizontally. It does not make equally spaced columns.

    1. Open the form you want to edit or create a new form.
    2. Open one of the fields you want to put inline.
    3. In the Custom CSS Class field, enter gf_inline.

    gravity forms inline fields

    1. Repeat this step to all of the fields you want to place inline.
    2. Update or Save the form.

    gravity forms inline

    Check out my other tutorials and reviews @ TwentySixForty.

     

    Additional Posts.

    Leave a Reply

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

    Pin It on Pinterest

    Share This