Module 4 Form Styles www combinedknowledge com Module

Module 4 – Form Styles www. combined-knowledge. com

Module Overview �Edit individual forms �Logo �Background �Control Settings �Rules for Conditional Formatting �Advanced Form Styles �Update the Form Template �Cascade Style Sheets

Module Objectives This module will show you how to change the way forms look. You might do this to make forms easier to use or to conform to your company brand styles. Initially you will learn how to edit the look of a single form and then you will learn how to use templates and cascade style sheets to edit the default look of all new forms.

Lesson 1: Formatting Individual Forms • • Logo Background Control Settings Conditional Formatting (using Rules)

Logos

Form Background

Control Settings • • Colour Fonts Border Picture

Conditional Formatting (using Rules) �Condition �Formatting

Lesson 2: Advanced Form Styles �Form Templates �Cascade Style Sheets �#ffffff �#013363 �#0089 d 7 �#fca 11 c

Logos /_layouts/15/nintexforms/images/NF 2013_237 x 62_Banner. Strap. Logo. png /_layouts/15/nintexforms/images/NF 2013_514 x 98_Right. Banner. Strap. png Location of file on each Share. Point server C: Program FilesCommon Filesmicrosoft sharedWeb Server Extensions15TEMPLATELAYOUTSNintex. Formsimages

Default CSS Settings Banner image (no CSS) Forms Logo (no CSS) Input Controls nf-form-input nf-section Nintex-Forms-banner Labels nf-form-label nf-section Bottom section nf-section-bottom Buttons (no CSS) Background (no CSS)

Custom CSS Example Banner image (no CSS) Input Controls Forms Logo nf-form-input nf-section Nintex-Forms-banner Labels nf-form-label nf-section Bottom section nf-section-bottom Buttons (no CSS) Background (no CSS)

Custom CSS on other devices i. Phone i. Pad

Lab Time Student Lab 10 minute Lab Time to Complete: 30 minutes – Review the Nintex Forms CSS – Apply custom CSS to a form – Use your logos on a form

Module Summary �Edit individual forms �Logo �Background �Control Settings �Rules for Conditional Formatting �Advanced Form Styles �Update the Form Template �Cascade Style Sheets

www. combined-knowledge. com