How to Use Gravity Forms Ready Classes.

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.
• How Do I Use a Gravity Forms Ready Class?
• Two Column Layout with Ready Classes.
• Three Column Layout with Ready Classes.
• Four Column Layout with Ready Classes.
• How to Make Gravity Forms Fields Inline.

List of Current Ready Classes.

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.

3. Click on the Appearence tab.

4. Enter the Ready Class you want to use into the Custom CSS Class field.
5. Update the form.

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.

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.

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

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

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

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

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.

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.

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

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

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

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

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

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.

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.

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

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

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

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

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

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.

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

Check out my other tutorials and reviews @ TwentySixForty.

Additional Posts.

WordPress

---

How to Correctly Enable WordPress SVG Support.

Read More

Web Development

---

CSS Media Queries for all Devices.

Read More

WordPress

---

How to Make a WordPress Custom Post Type.

Read More