This asset seeks to demonstrate how CSS can be used in tandem with Font Awesome’s icon suite to create more ascetically pleasing forms in Office 365.
|Long Description||This prototype 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.). The attached sample form and code snippet is intended to provide a starting point for extending Nintex Forms with more robust CSS styling to improve readability and aesthetics. CSS can be a little tricky to wrangle sometimes, so hopefully this asset will provide some insight into what’s possible! I’m a big fan of the Font Awesome (FA) suite of icons, so one of the main things I’m doing in the CSS here is leveraging the CSS ::before Selector to inject leading font-awesome icons on form labels based on a specified CSS class (i.e. faUser). For example, you can drop a label control on your form and by providing a CSS class value of “faEmail“, your control will prepend an email icon: Beyond Label enhancements, I have also built out samples for extending the following with font-awesome icons as well:Choice controlsYes/No controlsButton controls (Save and Cancel) Based on what we saw at InspireX this year, I suspect aspects of this solution will become obsolete with the upcoming form updates but I hope this is helpful nonetheless. Thanks!|
|Dependencies||This solution is dependent upon the Font Awesome icon suite (referenced through a CDN in the CSS code).|
|Support Info||Patrick Abel | Summit 7 Systems | email@example.com|
|Compatibility||Nintex Forms for Office 365|
|Platform||SharePoint Online (Office 365)|
|Additional Information||The sample form included (attached below) in this asset was built using Nintex Forms for SharePoint Online (Office 365). However, none of the CSS techniques used in this asset are limited to the cloud product and can be implemented in Nintex Forms for SharePoint on-premises as well.|