Sky Forms Documentation

Sky Forms is a set of beautiful form elements. It has large amount of customized elements, different color schemes, responsive grid system and allows you to create forms of any complexity and for any needs: login, registration, contacts, review, order, comment, checkout, etc.

If you have any questions that are beyond the scope of this documentation, please feel free to email via my user page contact form here.

Integration

Download the zipped pack from codecanyon and extract to a folder on your computer.

Include css and js files to your project.

<link rel="stylesheet" href="css/sky-forms.css">
<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/sky-forms-ie8.css">
<![endif]-->

<!--[if lt IE 10]>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/jquery.placeholder.min.js"></script>
<![endif]-->		
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<script src="js/sky-forms-ie8.js"></script>
<![endif]-->

Copy HTML code from one of demo files.
Replace demo content with yours.

HTML structure

The main HTML structure of the form consists of fieldset, legend, footer and sections. Each section contains label, form element and optional note. Here is the basic structure of registration form.

<form action="" class="sky-form">
	<header>Registration form</header>
		
	<fieldset>
		
		<section>
			<label class="input">
				<i class="icon-append icon-user"></i>
				<input type="text" placeholder="Username">
			</label>
		</section>
		
		<section>
			<label class="input">
				<i class="icon-append icon-envelope-alt"></i>
				<input type="text" placeholder="Email address">
			</label>
		</section>
		
		<section>
			<label class="input">
				<i class="icon-append icon-lock"></i>
				<input type="password" placeholder="Password">
			</label>
		</section>
		
		<section>
			<label class="input">
				<i class="icon-append icon-lock"></i>
				<input type="password" placeholder="Confirm password">
			</label>
		</section>
	<fieldset>	
		
	</fieldset>		
		<div class="row">
			<section class="col col-6">
				<label class="input">
					<input type="text" placeholder="First name">
				</label>
			</section>
			<section class="col col-6">
				<label class="input">
					<input type="text" placeholder="Last name">
				</label>
			</section>
		</div>
		
		<section>
			<label class="select">
				<select>
					<option value="0" selected disabled>Gender</option>
					<option value="1">Male</option>
					<option value="2">Female</option>
					<option value="3">Other</option>
				</select>
				<i></i>
			</label>
		</section>
		
		<section>
			<label class="checkbox"><input type="checkbox" name="terms" checked><i></i>I agree to the Terms of Service</label>
			<label class="checkbox"><input type="checkbox" name="subscription" checked><i></i>I want to receive news and  special offers</label>
		</section>
	</fieldset>
	
	<footer>
		<button type="submit" class="button">Submit</button>
	</footer>
</form>

CSS structure

Sky Forms includes 8 css files.

demo.css - demo page styles
sky-forms.css - required main styles
sky-forms-ie8.css - styles for IE8
sky-forms-red.css - red color scheme
sky-forms-orange.css - orange color scheme
sky-forms-green.css - green color scheme
sky-forms-purple.css - purple color scheme
sky-forms-pink.css - pink color scheme

The file "sky-forms.css" contains all of the specific styling and separated into sections:

defaults
file inputs
selects
textareas
radios and checkboxes
toggles
ratings
buttons
icons
grid
tooltips
normal state
hover state
focus state
checked state
error state
success state
disabled state

If you would like to edit a specific section, simply find the appropriate label in the CSS file.

Color schemes

There are 6 color schemes at your disposal. Cyan is the default scheme and to choose other you need to include appropriate css file. For example, if you want to use orange scheme include sky-forms-orange.css file:

<link rel="stylesheet" href="css/sky-forms.css">
<link rel="stylesheet" href="css/sky-forms-orange.css">
<!--[if lt IE 9]>
	<link rel="stylesheet" href="css/sky-forms-ie8.css">
<![endif]-->

<!--[if lt IE 10]>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/jquery.placeholder.min.js"></script>
<![endif]-->		
<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<script src="js/sky-forms-ie8.js"></script>
<![endif]-->

Icons

There are 302 font icons included. To use one of them you need to add <i> tag with 2 classes. First class defines icon position: icon-append or icon-prepend. Second class defines appearance of the icon. For example, if we need appended user icon:

<section>
	<label class="input">
		<i class="icon-append icon-user"></i>
		<input type="text">
	</label>
</section>

All available classes for icons you can find here.

Placeholders

You can use placeholders for inputs and textareas. Just specify placeholder attribute like in demo below.

<section>
	<label class="input">
		<input type="text" placeholder="Placeholder text">
	</label>
</section>

<section>
	<label class="textarea">
		<textarea rows="3" placeholder="Placeholder text"></textarea>
	</label>
</section>

Also there is a possibility to add placeholder for select element. To do that we need to disable first element.

<section>
	<label class="select">
		<select>
			<option value="0" selected disabled>Gender</option>
			<option value="1">Male</option>
			<option value="2">Female</option>
			<option value="3">Other</option>
		</select>
		<i></i>
	</label>
</section>

Elements states

Each element of Sky Forms has 3 additional states: error, success and disabled. To use one of them just add state-error, state-success or state-disabled class to element container.

<section>
	<label class="input state-error">
		<input type="text">
	</label>
</section>

<section>
	<label class="textarea state-success">
		<textarea rows="3" placeholder="Placeholder text"></textarea>
	</label>
</section>

When using disabled state don't forget to add disabled attribute to form element.

<section>
	<label class="input state-error">
		<input type="text" disabled>
	</label>
</section>

Credits

jQuery library by The jQuery Foundation
jQuery placeholder plugin by Mato Ilic
Font Awesome by Dave Gandy