CF7 Skins Ready/Styles

Last Updated on January 20, 2024 by Neil Murray

CF7 Skins Ready

Tag

Ready Classes for Contact Form 7 Skins

Ready Classes provide a range of useful pre-defined styles that can be used in all CF7 Skins forms.

Requires Contact Form 7, Contact Form 7 Skins & Contact Form 7 Skins Pro plugins. Email based support is covered in premium version.

Note: Only purchasers of this plugin have access to these Ready Classes as these classes will require considerable Documentation & Support.

Includes the following Ready classes:

  • DONE
    • singleline – displays enclosed elements on a single line
    • column – displays enclosed elements in a vertical column
    • grid – implements a CSS form grid
    • grid-lined – adds lines to a CSS form grid
    • grid-hover – highlights fields in a CSS form grid
    • box – displays enclosed elements in a surrounding box
    • checkbox-horizontal – displays checkbox elements horizontally
    • radio-horizontal – displays radio button elements horizontally
  • PLANNED
    • class – description
    • Item
  • FUTURE
    • singleline-fluid – places the field inline horizontally with other fields but does not create equally-spaced column layouts. This is useful for different sized fields or when you simply want a horizontal layout without actual column spacing.
    • iCheck – customized checkboxes & radio buttons
    • side-by-side – displays multiple elements side by side [HOLD]
    • Item

How to Use Ready Classes

To add a Ready Class to a field you need to edit your form in the Form section of the CF7 interface. Add the class to any < li > element.

Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of these pre-defined styles. You can use multiple classes together – just separate each class name by a space. You can use the Ready Classes right away without having to write any of your own CSS.

Method

Examine how Ready classes are implemented in other form plugins. From this examination, select and develop a range of suitable Ready Classes for CF7 Skins forms.

Gravity Forms

CSS Ready Classes

  • Halves (2 Columns)
    • gf_left_half – places the field in the left column (left half) of a 2 column layout
    • gf_right_half – places the field in the left column (right half) of a 2 column layout
  • Thirds (3 Columns)
    • gf_left_third – places the field in the left column (left third) of a 3 column layout
    • gf_middle_third – places the field in the middle column (middle third) of a 3 column layout
    • gf_right_third – places the field in the right column (right third) of a 3 column layout
  • Inline (Fluid One Line)
    • gf_inline – places the field inline horizontally with other fields but does not create equally-spaced column layouts. This is useful for different sized fields or when you simply want a horizontal layout without actual column spacing.
  • List Classes
    • gf_list_2col – turns a multiple choice/checkbox list into an equally-spaced 2 column format
    • gf_list_3col – turns a multiple choice/checkbox list into an equally-spaced 3 column forma
    • gf_list_4col – turns a multiple choice/checkbox list into an equally-spaced 4 column format
    • gf_list_5col – turns a multiple choice/checkbox list into an equally-spaced 5 column format
    • gf_list_inline – turns a multiple choice/checkbox list into an inline horizontal list (not evenly spaced columns)
    • gf_list_height_25 – applies a 25px height value all multiple choice/checkbox items in that list
    • gf_list_height_50 – applies a 50px height value all multiple choice/checkbox items in that list
    • gf_list_height_75 – applies a 75px height value all multiple choice/checkbox items in that list
    • gf_list_height_100 – applies a 100px height value all multiple choice/checkbox items in that list
    • gf_list_height_125 – applies a 125px height value all multiple choice/checkbox items in that list
    • gf_list_height_150 – applies a 150px height value all multiple choice/checkbox items in that list
  • Other Classes
    • gf_scroll_text – 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 tex
    • gf_hide_ampm – hides the am/pm selector in the time field- this only hides the field on the form, not in the form entry table. This works with any of the form label position settings.
    • gf_hide_charleft – hides the characters left counter beneath paragraph text fields when using the maximum characters option. This works with any of the form label position settings.
Q & A

Can I use multiple classes on the same field?
Yes, you can use multiple classes together. Just separate each class name by a space. Note: This doesn’t work for all of the styles, but many can be combined if they’re applicable to the field type. For example, you may have a 2 column primary layout, and want to use 2 column list layouts within the columns.

Can I create my own classes?
Yes, the classes are added to the parent < li > element surrounding a field so you can define your own class name and add your own rules to your theme stylesheet based on that class name being added to the field.

Note: As with any CSS rules, your particular theme CSS may override or supersede some of these styles. They’ve been tested in a variety of themes and work well, but you may have to make some adjustments to your theme styles for everything to work properly.

Ninja Forms

    • Item
    • Item
    • Item

Visual Form Builder

    • Item
    • Item
    • Item

GRID for CF7 forms

EXAMPLE
1-4-4+2-2-4+3-4-4
1-4-4 = first item – 1/4 width – in 4 wide grid
2-2-4 = second item – 1/2 width – in 4 wide grid
3-4-4 = third item (also last) – 1/4 width – in 4 wide grid

1-1-1 = first item – 1 width – in 1 wide grid