jquery-coolform
jQuery plugin for styling form fields
Author
License
Licensed under MIT
How to use
Load jQuery library and include coolForm plugin files:
<link rel="stylesheet" type="text/css" href="assets/css/jquery.coolform.css"> <script type="text/javascript" src="assets/js/jquery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.coolform.js"></script>
Enjoy!
Customizing
Color
coolForm gets your website font. Besides this, you can custom the coolButtons color. Just select the color that most fits your website and add the corresponding class to your forms:
<form class="darkgrey"> ... </form>
<form class="blue"> ... </form>
<form class="green"> ... </form>
<form class="gold"> ... </form>
<form class="red"> ... </form>
<form class="pink"> ... </form>
<form class="purple"> ... </form>
<!-- Default coolButton --> <form> ... </form>
Wide fields
You can make text fields have a 100% width for all resolutions or only for small resolutions:
<!-- Full width text fields in all devices --> <form class="wide-fields"> ... </form> <!-- Full width text fields in small devices (≤992px) --> <form class="wide-fields-s"> ... </form> <!-- Full width text fields in extra small devices (≤768px) --> <form class="wide-fields-xs"> ... </form>