Font Awesome Forms using CSS

Document created by patrickabel Champion on Jul 19, 2017
Version 1Show Document
  • View in full screen mode

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.

Who said forms have to be ugly?

 

 

AuthorPatrick Abel
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 controls
  • Yes/No controls
  • Button 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 | patrick.abel@summit7systems.com

Compatibility

Nintex Forms for Office 365

Platform

SharePoint Online (Office 365)

Screenshots

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.

Nintex Xchange Terms of Use Policy

Nintex makes no warranty or guarantee about the reliability, performance, quality, or functionality of any assets, and any assets you install are therefore provided as is. By downloading this asset, you agree to the terms of use.

6 people found this helpful

Outcomes