Yellow

Default

Close Live Demo

Blue

Checkbox

<div class="form-group">
	<div class="boxgroup">
		<div class="checkbox">
			<input type="checkbox" value="1" id="checkboxOneInput" name="" />
			<label for="checkboxOneInput"></label>
		</div>
		<span>Checkbox 1</span>
	</div>
</div>

Close Live Demo

Green

Select

<div class="form-group select">
	<span class="fa-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>
	<select class="form-control" name="select">
		<option value="option1">Option 1</option>
		<option value="option2">Option 2</option>
		<option value="option3">Option 3</option>
	</select>
</div>

Close Live Demo

Orange

Radio

<div class="form-group">
	<div class="boxgroup">
		<div class="checkbox">
			<input type="radio" value="1" id="radioOneInput" name="" />
			<label for="radioOneInput"></label>
		</div>
		<span>Checkbox 1</span>
	</div>
</div>

Close Live Demo

Black

Attachment

<div class="form-group">
	<span class="fa-icon"><i class="fa fa-upload" aria-hidden="true"></i></span>
	<input type="text" class="form-control" id="choose-file" autocomplete="off">
	<div id="choose-file-button" class="btn choose-file-button">Choose File</div>
	<input onChange="document.getElementById('choose-file').value = this.value;" type="file" placeholder="File" class="form-control" id="file" autocomplete="off" name="File">
</div>

Close Live Demo

Purple

Two Columns

<div class="form-group">
	<div class="col col-6">
		...input...
	</div>
	<div class="col col-6">
		...input...
	</div>
</div>

Close Live Demo

Labels

Labels Instead of Placeholders

<div class="form-group"><!--Start Field Name-->
	<label for="name">Name *:</label>
	<input type="text" class="form-control" id="name" autocomplete="off" name="Name">
</div><!--End Field Name-->
                    

Close Live Demo