Jumpeye framework

Forms

The framework includes a custom style for the forms. To use this style you only need to set the "style-1" class for the form tag and this will apply the CSS settings to all the included inputs: text inputs, radio buttons, checkboxes, combo boxes and some custom inputs.

Note! To design the input buttons in a form you can use the CSS classes from the button styles.

Basic inputs

Below you can see an example of form, its layout structured with rows and columns.

Include for form style-1

// Common CSS file for the forms
<link rel="stylesheet" href="css/forms/JFForm.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/forms/JFFormStyle-1.css" />

// For IE8


// For IE9+


// JS file for the forms
<script type="text/javascript" src="js/JFForms.js"></script>

Usage for form style-1

<form class="style-1">
	<div class="row">
		<div class="grid_12 columns">
			<label>Name</label>
			<input placeholder="Your name" type="text" />
		</div>
	</div>
												
	<div class="row">
		<div class="grid_6 columns">
			<label>Email</label>
			<input placeholder="Your email address" type="text" />
		</div>
		<div class="columns grid_6">
			<label>Telephone</label>
			<input placeholder="Your telephone number" type="text" />
		</div>
	</div>
		
	<div class="row">
		<div class="grid_12 columns">
			<label>Subject</label>
			<input placeholder="Subject of your email" type="text" />
		</div>
	</div>
	
	<div class="row">
		<div class="grid_12 columns">
			<label>Message</label>
			<textarea placeholder="Leave us a message"></textarea>
		</div>
	</div>
</form>

Fieldsets

To group related elements in a form you can use fieldsets.

Usage for fieldset style-1

<form class="style-1">
	<fieldset>
		<legend>Fieldset title</legend>
		<label>Name</label>
		<input placeholder="Type your name" type="text" />
		
		<label>Adress</label>
		<input placeholder="Type your address" type="text" />
		
		<label>City</label>
		<input placeholder="Type your city" type="text" />
		
		<label>Country</label>
		<input placeholder="Type your country" type="text" />
	</fieldset>
</form>

Custom inputs and states

We have included some custom inputs and states in the framework, which can be very useful when you create form layouts.

Error state for text inputs

<form class="style-1">
	<div>
		<label>Error state</label>
		<input class="error" placeholder="Invalid entry" type="text" />
	</div>
</form>

Radio button and checkbox

<form class="style-1">
	<div>				
		<input type="radio" id="radio-1" name="radio" />
		<label for="radio-1">Radio button 1</label>
		<input type="radio" id="radio-2" name="radio" />
		<label for="radio-2">Radio button 2</label>
		<input type="radio" id="radio-3" name="radio" />
		<label for="radio-3">Radio button 3</label>		
	</div>
	<div>				
		<input type="checkbox" id="check-1" />
		<label for="check-1">Checkbox 1</label>
		<input type="checkbox" id="check-2" />
		<label for="check-2">Checkbox 2</label>
		<input type="checkbox" id="check-3" />
		<label for="check-3">Checkbox 3</label>
	</div>
</form>

Drop-down select and search box

<form class="style-1">	
	<select class="custom-select" id="select-1">
		<option selected="selected">Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
		<option>Option 5</option>
	</select>
	<div class="search-box">
		<div class="search-input">
			<input placeholder="Search ..." type="text" />
		</div>
		<div class="search-icon"><a href=""></a></div>
	</div>
</form>