Along these lines, I've also added this line. It will then move the form up so there isn't such a gap from top of page to form. You could just place in your CSS as listed below the jQuery. The jQuery simply ensures that it is added after CSS is loaded.
top: 40px !important;
Henning Eiben Rhia Wieclawek Thanks! I suspect some of this will become obsolete with the upcoming form updates, but this really just spawned from a desire to provide contextual clues in form labels for different types of data being collected (i.e. email, phone, date-picker, etc.).
It's a rough prototype currently, but I've done some experimenting with the CSS::before selector to inject leading font-awesome icons on form labels based on a specified CSS class (i.e. faUser). Also as you saw, some custom icons for checkboxes/choice controls.
Rhia Wieclawek Here's the icons used for Checkbox 1:
Who said forms have to be ugly? :-P
I wish there was a "love" reaction. This is great. We use Font Awesome a lot in my company but mainly for their intranet product. It definitely brings the form up to the next level as far as aesthetics - as you say - contextual clues. Some folks (like myself) navigate more by colours and shapes than by letters and numbers, and this makes my soul happy.