Nintex Forms – Simple Branding

When clicking on the Nintex Forms button on a SharePont List or Library, you will inevitably getting the following type of form :

If you’re happy with that, that’s great.  Or, if you work for a company called “Nintex Forms” and your color scheme is orange-ish, then the default form is perfect for you.   But those of you who want to customize the form and brand it to your suite your company, there are some simple steps you can follow.

Cleanup

I have big plans for my company site when it comes to using Nintex Forms.  There will be so many forms, my employees won’t know what to do with themselves.  So I don’t want to have to rebrand every form design.

So the first step here is to get rid of all the controls that will not be available on all the designs, leaving only the logo and the bottom border line that will make my forms look purty.

Company Logo

The next thing to change is the company logo.  You can put that logo anywhere you like.  In the SharePoint hive, which is where the Nintex Forms logo lives, or you could put an image file into a document library.

I’ll put mine into a document library called “MyImages” and then I simply update the url of the image in my form.

We can see that because my image is probably a lot bigger than the out-of-the-box image, I’ll need to rearrange bottom border control, resize my image control and place it where I want it.

Changing the Bottom Border Color

We have a border line that will eventually separate the logo from the rest of the form.  Currently, it’s an orange-ish color, but I plan to make my forms have a dreary grey color scheme.

Open the settings of the Border control by double-clicking on it and for the Border Color, I’m going to keep it simple.  I click on the color wheel on the right and select my dreary grey.  Take note of the color that we chose #DDDDDD. We’ll use that later.

Updating the Background Color of Input Controls

Now we come to the final stage of updating what will be the background color of Input controls on your form.

You saw how when a form is dynamically generated for you, it has labels on the left and input controls on the right.  For now, the labels will have white backgrounds and the input controls have a type of orange.  I want to update those to now have my dreary grey.

To do this, we update some CSS (Cascading Style Sheets).

In the ribbon, click on Settings.

We update the specific piece of CSS that is titled nf-form-input.  Here we change the background color to the #DDDDDD that we set for the border color.

We also need to change a few other CSS object backgrounds (.nf-section and .nf-section-bottom) :

You won’t see any difference to your form after you save the settings, because we currently don’t have any input controls.  But if you were to drag one on there, you’d see the background has changed.

Globalize this Form Template

Now we have the design we want, we don’t save or publish this form, because we aren’t doing this for the list we are on.  We’re building a template to be used throughout our farm.

Export this form by clicking on the Export button in the ribbon.

Store it somewhere on your computer.

To make this available thorughout the farm, we need to go to Central Administration > Nintex Forms Management > Manage Device Layouts.

Under the devices, there’s the template section where you can browse to your form.xml and Upload it. 

Now that you’ve done that, when you got to any list or library and click on the Nintex Forms button in the ribbon, it will use this template.

Notice how we have our company logo, the color colors on the border and also on the Input controls.  This will save you from having to do this everytime you want to build out a form for yourself.

BEFORE FORM

AFTER FORM