singleline

Displays enclosed elements on a single line

    singleline

    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

      column

        1. Ready Class column

        1. Ready Class column

          1. Ready Class column

          1. Ready Class column

          1. Ready Class 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

        grid Ready Class (with grid-hover & grid-lined)

        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

          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

            checkbox & radio buttons - horizontal

            1. Checkboxes (Ready Class checkbox-horizontal)
              Item1Item2Item3Item4

            2. Radio Buttons (Ready Class radio-horizontal)

            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.

              Use Ready Classes right away without having to write any CSS

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

               

              You can help us improve CF7 Skins Ready by completing this form

              You can see a detailed example of using CF7 Skins Ready and help us at the same time by simply completing this form. It will help us to understand better how you might use the CF7 Skins Ready Add-on.

              Your Details


              Ready Class singleline

              (This form uses Ready Class singleline to display two fields side by side.)

               

              In addition, as a thank-you, we'll send you a Discount Code to use with your next purchase from CF7 Skins.

              Ready Classes are Easy to Use

              You can add a Ready Class to an individual form field or a group of form fields by simply adding the Ready Class to the surrounding parent element. You can also use multiple classes together – just separate each Ready Class name by a space.

              Your WordPress Experience

                  1. Ready Class column

                  1. Ready Class column + box

                  2. FreeProNone

              (This form uses Ready Class column to group several fields into equally spaced columns. Ready Class box is added to the second column to create a surrounding box. )

              Add common styling options quickly & easily

              With CF7 Skins Ready you can add a number of common styling options that many Contact Form 7 users like to add to their forms. We're interested to find out which of the Ready Classes, included with CF7 Skins Ready, are most important to you .

              Ready Classes

                  1. Which of the available Ready Classes are important to you?

                  2. Very ImportantImportantNot Important

                  3. Very ImportantImportantNot Important

                  4. Very ImportantImportantNot Important

                  5. Very ImportantImportantNot Important

                  6. Very ImportantImportantNot Important

                  7. Very ImportantImportantNot Important

              (This form uses Ready Class grid to adjust the size of the left column to suit the form content. Ready Class radio-horizontal was used to create a more compact form.)

              Ready Class grid implements a CSS form grid

              With Ready Class grid you can control the size and position of all fields within a strict grid.

              grid Ready Class (with grid-hover & grid-lined)

              (This form uses Ready Class grid to position all fields within a strict grid.)

              Thank you for completing this form


              If you have any suggestions to improve CF7 Skins Ready you can add them below.

              Please help us to improve CF7 Skins Ready


              This page was created by selecting the Contact Template and adjusting it to our requirements.

              This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready + CF7 Skins Multi + CF7 Skins Logic