singleline
Displays enclosed elements on a single line
Form
<fieldset> <legend>singleline</legend> <ol class="singleline"> <li> tel [tel cf7s-tel-01 15/] </li> <li> mobile [tel cf7s-tel-02 15/] </li> </ol> <ol class="singleline box"> <li> Item1 [text item1] </li> <li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li> <li> Item2 [text item2] </li> </ol> </fieldset>
column
Displays enclosed elements in a vertical column
Form
<fieldset> <legend>column</legend> <ol class="column"> <ol> <li> <strong>Ready Class column</strong> </li> <li> Item1 [text item1a] </li> <li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li> <li> Item2 [text item2a] </li> </ol> <ol> <li> <strong>Ready Class column</strong> </li> <li> Item1 [text item1b] </li> <li> Item2 [text item2b] </li> <li> Item3 [text item3b] </li> <li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li> </ol> </ol> <ol class="column box"> <ol> <li> <strong>Ready Class column</strong> </li> <li> Item1 [text item1c] </li> <li> Item2 [text item2c] </li> <li> Item3 [text item3c] </li> <li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li> </ol> <ol> <li> <strong>Ready Class column</strong> </li> <li> Item1 [text item1d] </li> <li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li> <li> Item2 [text item2d] </li> </ol> <ol> <li> <strong>Ready Class column</strong> </li> <li> Item1 [text item1e] </li> <li> Item2 [text item2e] </li> <li> Item3 [text item3e] </li> <li> Dropdown Menu [select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"] </li> </ol> </ol> </fieldset>
grid
Implements a strict form grid
Form
<fieldset> <legend>grid (with grid-hover & grid-lined)</legend> <ol class="grid grid-hover grid-lined"> <ol data-row-span="1"> <li data-field-span="1"> Field 1 [text item-g1a] </li> </ol> <ol data-row-span="2"> <li data-field-span="1"> Field 1 [text item-g1b] </li> <li data-field-span="1"> Field 2 [text item-g2b] </li> </ol> <ol data-row-span="3"> <li data-field-span="1"> Field 1 [text item-g1c] </li> <li data-field-span="1"> Field 2 [text item-g2c] </li> <li data-field-span="1"> Field 3 [text item-g3c] </li> </ol> <ol data-row-span="4"> <li data-field-span="1"> Field 1 [text item-g1d] </li> <li data-field-span="1"> Field 2 [text item-g2d] </li> <li data-field-span="1"> Field 3 [text item-g3d] </li> <li data-field-span="1"> Field 4 [text item-g4d] </li> </ol> <ol data-row-span="5"> <li data-field-span="1"> Field 1 [text item-g1e] </li> <li data-field-span="1"> Field 2 [text item-g2e] </li> <li data-field-span="1"> Field 3 [text item-g3e] </li> <li data-field-span="1"> Field 4 [text item-g4e] </li> <li data-field-span="1"> Field 5 [text item-g5e] </li> </ol> <ol data-row-span="3"> <li data-field-span="2"> Field 1 [text item-g1f] </li> <li data-field-span="1"> Field 2 [text item-g2f] </li> </ol> <ol data-row-span="3"> <li data-field-span="1"> Field 1 [text item-g1g] </li> <li data-field-span="2"> Field 2 [text item-g2g] </li> </ol> <ol data-row-span="4"> <li data-field-span="1"> Field 1 [text item-g1h] </li> <li data-field-span="2"> Field 2 [text item-g2h] </li> <li data-field-span="1"> Field 3 [text item-g3h] </li> </ol> <ol data-row-span="4"> <li data-field-span="2"> Field 1 [text item-g1i] </li> <li data-field-span="1"> Field 2 [text item-g2i] </li> <li data-field-span="1"> Field 3 [text item-g3] </li> </ol> <ol data-row-span="4"> <li data-field-span="3"> Field 1 [text item-g1i] </li> <li data-field-span="1"> Field 2 [text item-g2j] </li> </ol> </ol> </fieldset>
box
Displays enclosed elements in a surrounding box
Form
<fieldset> <legend>box</legend> <ol class="box"> <ol class="singleline"> <li> Item1 [text item1a] </li> <li> Dropdown Menu [[select cf7s-menu-01 multiple include_blank "Item1" "Item2" "Item3"]] </li> <li> Item2 [text item2a] </li> </ol> </ol> </fieldset>
checkbox & radio buttons – horizontal
Displays checkboxes & radio buttons in horizontal line
Form
<fieldset> <legend>checkbox & radio buttons - horizontal</legend> <ol> <li class="checkbox-horizontal">Checkboxes (<strong>Ready Class checkbox-horizontal</strong>) [checkbox cf7s-checkbox-02 "Item1" "Item2" "Item3" "Item4"] </li> <li class="radio-horizontal">Radio Buttons (<strong>Ready Class radio-horizontal</strong>) [radio cf7s-radio-02 label_first use_label_element "Item1" "Item2" "Item3"] </li> </ol> </fieldset>
Demo Form
You can help us improve CF7 Skins Ready by completing this form. This will show you a CF7 Skins Ready form in action. In addition, as a thank-you, we’ll send you a Discount Code to use with your next purchase from CF7 Skins.
This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready + CF7 Skins Multi + CF7 Skins Logic