Skip to main content
Version: 4

Gravity PDF CSS Ready Class Support

Snapshot of the CSS Ready PDF Classes

Gravity Forms display forms in a single column, but sometimes you want to condense everything and display the fields in two or three columns. This is why Gravity Forms introduced CSS Ready Classes back in version 1.5. They included a number of pre-set class names that allow you to easily style your form.

Until recently Gravity PDF suffered from the same issue – only a single column PDF was generated. But in version 4.0 we redesigned the system to better support this feature. If you add columns to your Gravity Form they will be reflected in the PDF as well.

Supported Classes

Gravity PDF supports the following official CSS Ready Classes:

  • gf_left_half (two-column layout)
  • gf_right_half (two-column layout)
  • gf_left_third (three-column layout)
  • gf_middle_third (three-column layout)
  • gf_right_third (three-column layout)

When not already in a column the following List classes are also supported:

  • gf_list_2col
  • gf_list_3col
  • gf_list_4col
  • gf_list_5col

Bare in mind that Gravity PDF filters out empty fields by default which can cause issues with the column structure. If the PDF template supports it, you should enable the Show Empty Fields option to prevent display issues.

Four Column Classes

Four Column Classes are only supported in Gravity PDF 4.1 or higher

This four-column CSS code has become increasingly popular for Gravity Forms users and so we have added full support for these classes in Gravity PDF (make sure to include the custom CSS with your theme to get the same effect on the front end).

To start using in your PDF, add the classes gf_first_quarter, gf_second_quarter, gf_third_quarter and gf_fourth_quarter to your Gravity Form fields and supported PDF templates will automatically create a four column layout to match.

If you've previously run the Setup Custom Templates tool when creating custom templates in a version of Gravity PDF below 4.1 you'll need to re-run the tool. Alternatively you can copy the new PDF template changes to your modified custom PDF template.