Vadim Tabakman

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 :

 Default 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.

 Clean Form

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.

 Change Image

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.

 Positioned Logo

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.

Color Selection

 Border Updated

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.

Form Settings Button

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.

 Input Controls

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

Other CSS

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. 

 Import Template

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.

 Result

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

Before Form

AFTER FORM

 Form

Gravatar
Posted by Vadim Tabakman Wednesday, August 28, 2013 8:56:00 AM Categories: Nintex Nintex Forms Nintex Forms 2013 SharePoint
Copyright Vadim Tabakman
Rate this Content 0 Votes

Comments

Thursday, January 9, 2014 6:59:10 AM
Skhumbuzo

re: Nintex Forms - Simple Branding

Hi.

Great article. how do we reset it back to the default nintex layout?

Thank You

Friday, January 10, 2014 11:48:45 AM

re: Nintex Forms - Simple Branding

Hi Skumbuzo,

there is a Reset button on the ribbon when you're designing a form that you should be able to click.

cheers,

Vadim

Monday, January 13, 2014 2:14:42 AM
Skhumbuzo

re: Nintex Forms - Simple Branding

Thank You very much for your response. Much appreciated

can one load more than one form layout template?

We have got different divisions with different branding. is it possible to have 3 different templates?

so when trying to customize the form there'll be 3 different items to choose from under the 'Nintex Forms' drop down on the ribbon of any list.

Thursday, February 6, 2014 11:54:01 AM
Steve

re: Nintex Forms - Simple Branding

Reset resets it back to the current template that has been uploaded in Central Admin.  I think the question (and also my question) was how do we return to the original, out of the box, orange Nintex template?  I haven't found it on the farm anywhere to re upload it.

Many thanks,

Steve

Sunday, February 16, 2014 11:21:27 AM

re: Nintex Forms - Simple Branding

Hi Steve,

I would recommend you email support@nintex.com and get the default template from them.  You should then be able to import that into Central Admin and be back to what it used to be.

cheers,

Vadim

Monday, March 10, 2014 1:10:08 AM

re: Nintex Forms - Simple Branding

Hello,

If you problem is not get solve then you have to contact or mail your particular concern.

Thanks

Monday, March 17, 2014 7:43:15 AM
Ian Hall

re: Nintex Forms - Simple Branding

Hi Vadim,

I'm new to nintex forms. Is there an easy way to brand disabled fields to a colour other than grey. Our users often complain that disabled fields are not readable.

Cheers

 

Ian

Thursday, April 17, 2014 12:18:39 PM

re: Nintex Forms - Simple Branding

Hi Vadim,

I understand that only one template can be used per SharePoint Farm. Is that correct? And that it also drives the mobile layout?

Cheers

Twan

Thursday, April 17, 2014 1:30:48 PM

re: Nintex Forms - Simple Branding

Hi Twan,

that is correct.

Nintex is looking at extending this, but at this stage, it's one template for the farm.

cheers,

Vadim

Thursday, August 7, 2014 4:55:54 AM
Harsh
Gravatar

re: Nintex Forms - Simple Branding

Hi Vadim, I want to change the 'Save' caption on the Ribbon of the Nintex form. It should be dynamic based on some condition like it should from 'Save' to 'Submit' on some condition and vice versa. Can you please help me how it could be achieved.
Thursday, August 7, 2014 8:40:53 AM

re: Nintex Forms - Simple Branding

HI Harsh,

I don't know how to do that.  Maybe we some customized CSS, but it's not something I've looked into.

Sorry.  Maybe post a message on http://community.nintex.com because someone else may have done this.

cheers,

Vadim

Thursday, May 14, 2015 8:44:06 AM
Darren
Gravatar

re: Nintex Forms - Simple Branding

Hi Vadmin,

 

I'm trying to add an image /style the repeater panel delete button image in the Nintexform. Using browser developer tools I can see class is:

nf-repeater-deleterow-image

So I added following CSS in fprm settings at the end:

.nf-repeater-deleterow-image {

background-image: url ('/publishingImages/binClosed.png') !important ;
background repeat: no-repeat !important;

}
 

The image is in the images folder on the site. If I add a width and height style it changes the origin nal image height, width, so I know I am targeting it, but not sure how to change the image.

 

 

 

Thursday, May 14, 2015 8:51:07 AM

re: Nintex Forms - Simple Branding

Hi Darren,

I'm messing around with the JS/CSS of NF right now, so I'll see what I can find.

No promises as CSS is the bane of my existence :)

cheers

Vadim

Saturday, July 18, 2015 3:51:21 PM
Merildo
Gravatar

re: Nintex Forms - Simple Branding

Hi!

I would like to transform the content of “single line control” named “Teste” to caps (uppercase). Can you show an example?

 

Wednesday, August 19, 2015 12:25:51 AM
Orkan
Gravatar

re: Nintex Forms - Simple Branding

If I upload the new template, does it effect the recent forms I created before?

Because I want to change all my recent forms in the workflow with a single change in CSS. Is it possible?

Thanks.

Wednesday, August 19, 2015 7:48:56 AM

re: Nintex Forms - Simple Branding

Hi Orkan,

if you create the template and the template, in Form Settings - Advanced, adds CSS files, then any form you build from then on with inherit those links to the CSS files.

That way, you can update the CSS file and any form that links to it will pick that up automatically.

cheers,

Vadim

Wednesday, August 19, 2015 7:49:29 AM

re: Nintex Forms - Simple Branding

Hi Merildo,

you'll need to convert text to uppercase using JavaScript.

cheers,

Vadim

Sunday, December 20, 2015 3:24:45 PM
James McLafferty
Gravatar

re: Nintex Forms - Simple Branding

Hi There

How would I go about changing the back ground colours of the input box when the control is disabled? I want the text box to appear as ready only.

Thanks

James

You must sign in to this site to post comments.
Already Registered?
Sign In
Not Yet Registered?
Register

Statistics

  • Entries (279)
  • Comments (1769)

Categories