jquery-coolform

jQuery plugin for styling form fields

Author

13ugman

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>