Feedback Form
HTML
<script src="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/semantic-ui/2.2.6/semantic.min.css">
<div class="ui raised very padded text container segment">
<h2 class="ui centered header">That's Great!<br>Tell us what we got right.</h2>
<hr>
<form class="ui huge form">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="" id="">
<label>Items In Stock</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="" id="">
<label>Order Shipped On Time</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="" id="">
<label>Customer Service</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="" id="">
<label>Product Selection</label>
</div>
</div>
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="" id="">
<label>Other</label>
</div>
</div>
<div class="field">
<textarea placeholder="Let us know more..."></textarea>
</div>
<button class="fluid ui submit button">Submit</button>
</form>
</div>
CSS
.ui.checkbox{
font-size: 1.25em;
}
.field {
padding: .5em .5em;
}