Demo - CF7 Skins

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

After trying CF7 Skins for one website I cannot do without it for the second site I’m working on as a volunteer. Very easy to work with, it’s not complicated to follow examples already done and modify for my need.

It’s simple enough that I didn’t need help from support but they were very fast to fix an issue with my order when I upgraded. Very pleased with all of it!

Martin RoyVolunteer

This plugin rocks! I’m building a new website for the company I work for and I’m a beginner. The CF7 Skins templates were super easy to figure out and do everything I need them to, seamlessly.

So far I’ve been able to build a customer survey, a sales quote form and an employment application that all work perfectly! Thank you.

Tyler NixonTulsa Fin Tube

Many of my clients depend on custom forms and I’ve had experience with many of the plugins on WordPress.

CF7 Skins has made life so much easier and allows the ability to quickly and efficiently customize and tailor forms to suit your needs. Highly recommended. Support is A+.

Blake RDirector

I love CF7 Skins. I’ve been using it now on a number of lead generation websites I’ve built where a well-designed form is key to getting customer data submitted.

We are now using it on Expert Pension Claims with great success.

It’s easy to use, I can customise it further, and the support I’ve received has been excellent. Get this plugin, you won’t regret it. It will save you masses amount of time messing around with style sheets and the complications of making a Contact Form 7 look good!

Marc AaronOnline Marketing Consultant

I manage websites. I recently migrated a Joomla site to WordPress. There was an online referral form which needed to be rebuilt to work with the newly designed site.

My design and coding chops were not quite up to the task. CF7 Skins was perfect. I set up a multi-page form with a little assistance from tech support. The designer was wowed by the results.

Tech support was responsive and spot on. The plugin itself was a dream to use. I look forward to the next time I set up a form.

Scott JohnsonOwner, Scott's Web Shop

CF7 Skins has proven to be one of the best and easiest to use WordPress plugins, which greatly enhances the functionality and user friendliness of Contact Form 7. I can’t rave enough about this plugin!

And the technical support for CF7 Skins is fantastic! I had a minor issue integrating CF7 Skins with Ubermenu and the CF7 Skins support team did an incredible job resolving this matter within a few hours.

I strongly recommend CF7 Skins to any WordPress site developer who wants to give their contact forms an amazing professional appearance and superior functionality!

Michael SheldonWebmaster, Township of Belleville, NJ

Use Ready Classes right away without having to write any CSS

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

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

Add common styling options quickly & easily

Ready Class grid implements a CSS form grid

Thank you for completing this form