Nintex forms for Office 365 – How to use in SharePoint Online

Nintex forms are one of the best list form customization tools that you can use to customize your SharePoint list forms. In this Nintex forms tutorial, let us discuss how to add Nintex forms to Office 365 SharePoint Online sites.

  • Introduction to Nintex forms
  • Benefits of using Nintex forms
  • Install Nintex forms for Office 365 to SharePoint Online sites
  • Customize SharePoint Online list forms using Nintex
  • How to Auto populate current user name in Nintex Forms for Office 365
  • How to add custom CSS in Nintex form for Office 365
  • Add Custom JavaScript in Nintex Forms for Office 365

By using Nintex forms for Office 365, you can design powerful responsive forms without writing a single line of code.

Nintex Forms for Office 365

We can achieve all the business requirements by using the out of box SharePoint Online list forms. So we need to customize list forms in SharePoint to achieve the functionalities.

To customize SharePoint list forms we can use InfoPath, Client-side technologies like HTML, JavaScript, jQuery, CSS, Bootstrap, etc. or we can even use various 3rd party tools like Nintex Forms.

Nintex Forms for Office 365 allows users to quickly and easily create or customize SharePoint Online list forms by using the browser. It is a browser-based form designer that is used to build forms based on SharePoint Online lists.

One of the most significant differences between InfoPath and Nintex forms is the support for mobile devices provided by Nintex Forms. There are three aspects to this: support for mobile-friendly layouts; mobile apps for working with forms; and Nintex Live.

Nintex has platforms for bothe SharePoint On-premises version as well as SharePoint Online Office 365 version. Here are a few products:

  • Nintex for SharePoint 2019
  • Nintex for SharePoint 2016
  • Nintex for SharePoint 2013
  • Nintex App Studio
  • Nintex Workflow for Project Server 2013
  • Nintex Forms for Office 365
  • Nintex Workflow for Office 365

Nintex forms Benefits and Features

Below are some of the features and benefits of Nintex Forms for Office 365.

  • Build forms with features that validate data, offer dynamic fields, conditional display areas, and customizable formatting for rich interaction
  • Installs directly into SharePoint or Office 365 so you can create forms directly in your SharePoint sites
  • Integrates with Nintex Workflow
  • Integrates with other databases or business applications
  • Nintex forms encrypt, authenticates, and  your cloud-to-Sharepoint traffic

Below are a few benefits of Nintex forms for Office 365.

  • Quickly create, customize, preview, and publish web and mobile-ready forms.
  • Work straight from SharePoint or Office 365 without involving other outside applications, vendors, or partners.
  • When integrated with workflow, specific workflow forms are generated which can then be customized to become its own workflow solution.
  • Easily create forms from existing lists and metadata on SharePoint to work on virtually any device.
  • Work online or offline on the Nintex mobile app that allows you to complete tasks, forms, and capture data from anywhere.

Add Nintex forms for Office 365 to SharePoint

Before using the Nintex forms to customize any list or library, we need to add Nintex forms to SharePoint Online sites.

Step-1: Here first, I will show you how can you add the “Nintex forms for Office 365” app to the SharePoint Online site, so that you can use Nintex forms to customize lists or document library forms.

Open your SharePoint online site, go to the Settings menu on the right corner of your site -> Click on Add an app.

Step-2: It will open the apps page. Here click on SharePoint Store which you will find on the left side of your site as shown below.

nintex forms
Add Nintex Forms

Step-3: In the SharePoint Store, Choose Nintex Forms for Office 365 and click on it. Follow the below screen.

nintex forms sharepoint online
nintex forms sharepoint online

Step-4: It’s A free app, now click on “ADD IT” button.

nintex forms for office 365
nintex forms for office 365

Step-5: Now you will come to the trust page, click on “Trust it” as shown below.

sharepoint nintex forms
sharepoint nintex forms

Step-6: Once it is completed, App will be added on your Site Contents as shown below.

sharepoint online nintex forms
sharepoint online nintex forms

This is how to install Nintex forms in SharePoint Online Office 365.

Customize SharePoint List Forms using Nintex

Once you add/install Nintex forms for Office 365 into a SharePoint site collection, each list or document library will have a Nintex Forms icon in the ribbon-like below. Go to any list/library on your site, click on List/library tab. now you can find it on the ribbon as shown below.

How to use nintex forms in sharepoint list
How to use nintex forms in sharepoint list

One of the beauties of Nintex forms is it allows you to create a responsive form or a classic form. You can see below it will ask to “Choose a designer” as shown below.

install nintex in sharepoint online
install nintex in sharepoint online

If you Click on Responsive Form, Nintex Forms designer will create a responsive design list or library form like below.

Once your list form customization over and want to publish form, you can do a one-click Publish, by simply clicking on the Publish button.

nintex responsive forms
nintex responsive forms

If you choose Classic Form, see it looks different from the responsive form as shown below screenshot. It will design a classic form like below for the desktop layout.

But Nintex Forms also allows you to create forms for different devices like for Mobile, tablet, Desktop/Laptop etc.

Nintex classic form example
Nintex classic form example

Since we have added Nintex forms to the SharePoint Online sites, let us see a few more examples n how to customize list forms using Nintex.

1. Change Nintex Forms header banner in SharePoint

Let us see, how to change the default header banner in SharePoint Online Office 365 Nintex forms in list forms. By default when you customize a SharePoint list form using Nintex Forms for Office 365 in SharePoint Online, you will see a Nintex banner. We can easily change the header banner in Nintex forms for Office 365.

By default when you design a form using Nintex Forms for Office 365 then you will be able to see the default banner of Nintex in the header which looks like below:

nintex form change header banner
nintex form change header banner

But the business requirement is to change this and to either giver, a banner related to the organization or you can write simple text.

To change this, Open the particular SharePoint list in the browser, then from the Ribbon, click on LIST tab and then click on Nintex Forms button in Customize List section.

This will open the Nintex Form designer.

To apply a new image, First, upload the image to a picture library or you can upload it to the images folder itself. Then in the Nintex form designer, select the image, and then in the Properties (presented on the right side) window under the Settings section, change the image page. Then you can Save and Publish the form.

If you want to add some formatted text, then Right click and Delete the image control from the form.

Then Right-click on the header and then Insert Control -> General and then select a Label control like below:

nintex forms change header banner sharepoint list form
nintex forms change header banner sharepoint list form

Then to write something in the Label, go to the properties windows and in the Settings -> General -> Text, you can write the text which you want. But if you want to format the text, click on More Settings like below:

nintex forms examples
nintex forms examples

When you will go to more settings, it will provide a Rich text editor to format the text. You can format text like below:

nintex forms sharepoint online change header image
nintex forms sharepoint online change header image

Now if you want to see the changes in the preview, click on the Preview button from the designer ribbon. To publish the form directly, click on Publish button or Publish and Close button from the Ribbon.

Now try to add one item to the list, you can see the changes in the form like below:

nintex forms sharepoint online change header image
nintex forms SharePoint online change header image

This is how to change the header in Nintex forms.

2. Add different layouts into Nintex forms

Let us now see, how to add different layouts to list forms that are customized using Nintex forms for Office 365.

One of the good things about Nintex forms is you can very easily design forms for other devices apart from Desktop. You can design forms for Smart Phone, Generic Tablet, iPad, Windows Tablet, Android Tablet, Nintex Mobile Phone & Nintex Mobile Tablet in Nintex forms for Office 365 SharePoint Online.

Here we will see how we can design a form for Smart Phone so that when you open your SharePoint online site in your smartphone, you will have a nice layout of your list form.

Open your SharePoint online site and then navigate to the particular list for which you want to design a different layout. From the Ribbon click on Nintex forms which will open your Nintex designer.

In the Nintex form designer by default, it will show the form for your desktop layout. From the Ribbon click on Properties button as shown in the fig below:

design nintex forms for multiple devices
design nintex forms for multiple devices

Then from the Properties section (right side) click on Add More Layouts button as shown in the fig below:

nintex forms add layout
nintex forms add layout

After this it will display all the layout, from there select Smart Phone as shown in the fig below:

nintex forms smartphone layout
nintex forms smartphone layout

This will show your form for Smart Phone layout, in this form you can add remove controls or you can apply any designs you want to apply for the form. Once your design over publishes the form to see the changes. You can see the form like below:

nintex forms add different layout
nintex forms add different layout

From the designer page itself, you can change the view to see how the how the form is appearing in a different layout. In the Properties section, it will show different layouts you have created. You can click on the layout to see how the form is appearing.

nintex forms examples
nintex forms examples

Apart from this from the left side in the Nintex designer, you can see the CONTROLS IN USE tab to see what are the controls used in each layout.

nintex forms add layout
nintex forms add layout

This is how to add different layouts in Nintex forms for Office 365.

3. Create column in Nintex forms designer

Let us see, how to create columns in Nintex forms designer in Office 365. Rather than creating a column in the browser through list settings, we will create a column in Nintex forms designer itself.

Open your SharePoint online office 365 site in the browser, then navigate to the particular list. For this particular example, I am opening my existing list.

From the Ribbon click on Nintex Forms button which will open the Nintex forms designer.

creating column in nintex forms
creating column in nintex forms

When it open Nintex Forms designer, from the Ribbon, click on Create Column as shown in the fig below:

nintex forms 2013 create column
nintex forms 2013 create column

This will open the Create column dialog box which usually comes while creating a column in a list using the browser. Fill in the column details like Name, Type, etc. Here I have just added a column with Multiple lines of text type. Once you click on OK, the column will get created.

The column will be available in the List Columns section which is there in the left side in Nintex forms designer. If you will expand to List Columns tab you will be able to see our newly created column. In my case I have created “AboutMe” column which looks like below:

nintex forms create column
nintex forms create column

If you want to add the column to the list form, then drag the column from the Forms Control and put it in the form.

Now publish the form from the Publish button from the ribbon. Once it is published successfully, you will be able to see the column when you will try to add an item to the list.

Nintex forms create column
Nintex forms create column

This is how to create a column in Nintex forms for Office 365.

4. Reset to out of box list forms from Nintex Forms

Let us see, how to reset back to default out-of-box forms from forms that are customized using Nintex forms for Office 365. Here I have a SharePoint Online list form which is customized using Nintex forms for Office 365, I want to rest the list form to use out of box list form.

Here I have already customized a list using Nintex forms for Office 365. Now I do not want to use Nintex forms, I want to revert back to old out of box forms.

Follow below steps to reset back to out of box list forms. Open the particular list and then from ribbon click on Nintex Forms which will open the Nintex Designer. Then from the Ribbon click on “Delete Form” as shown in the fig below:

nintex forms
nintex forms

This will ask for a confirmation message “Are you sure you want to delete this form?”. Click OK as shown in the fig below:

nintex forms for office 365
nintex forms for office 365

This is how to reset to out of box list forms from Nintex Forms for Office 365.

5. Auto populate current user name in Nintex Forms for Office 365

Let us see how to auto-populate people picker control in Nintex forms in SharePoint online office 365.

In this particular example, I am working with a list that is already customized using Nintex Forms. In that particular list, I have added on People picker control column. Then from the list, go to the Ribbon and Clik on Nintex Forms to customize the list form using Nintex.

In the Nintex Form Designer, first, drag and drop a People control into the form. Then in the Properties box from Settings section, choose the column name in the Connected to drop-down list.

nintex forms auto populate current logged in user
nintex forms auto populate current logged in user

Then click on More Settings which will open the Control Settings dialog box. From the General section, click on Default value which will open Formulas and Functions. Nintex provides various functions among which 3 are related to Name, Email ID & Login ID.

  • Current User (Display Name): This will populate the display name of the current user.
  • Current User (Email): This populates the email id of the current user.
  • Current User (Login ID): This will populate the Login ID of the current user.

For this particular example, I have used Current User (Display Name) which looks like below:

sharepoint 2013 auto populate field with current user
sharepoint 2013 auto populate field with current user

Now you can publish the form from the InfoPath designer. When you will try to add an item to the list, you will be able to see the current user’s display name will auto-populate like below:

auto populate people picker nintex forms
auto populate people picker nintex forms

This is how to auto populate logged in user name in Nintex forms for Office 365.

6. Add Custom CSS in Nintex form for Office 365

Let us see, how to Add Custom CSS to the Nintex forms for Office 365 in SharePoint Online.

In this example, I will explain how to add a CSS code and how to add that CSS class to control settings in the Nintex form. Nintex professionals also search for Nintex forms custom css includes.

Here in this Nintex forms example, I will show you how we can add some custom css class into Nintex form and how we can use the same css class into labels in the Nintex forms.

Include custom CSS in Nintex Forms

Step 1: Create a SharePoint list and customize it using Nintex form designer as shown below.

Nintex classic form example
Nintex classic form example

Step 2: Go to Designer tab ->click on Form Settings. In Settings-Form,
Add your  CSS code in Custom CSS, highlighted with red color as shown below.

.custom-Cookie-font { 
font-family: 'Cookie', cursive;
font-size:15px;
color:red;
}
Custom css in nintex forms
Custom css in nintex forms

Step 3: Now copy your CSS class(“.Custom-Cookie-font”). Go to label control -> Right-click on the label(State) and click on “Settings“. In the Control Settings – Label window,  Add CSS class as shown below. We can add more CSS classes in the “CSS Class” section. when you are adding the class name you just give space between class names.

Get this font-family from google-fonts link” https://fonts.google.com/?selection.family=Cookie “.

Add custom css in nintex forms
Add custom css in nintex forms

Step 4: Add the same CSS class in Second Label(Country) control also as shown above.

Step 5: See the below screenshot after adding CSS in the form. State and Country labels have changed the font, font size, and color.

Add custom font in nintex forms
Add custom font in nintex forms

This is how to use add custom CSS in Nintex forms for Office 365 SharePoint online. Here I have used custom CSS to give a different font and color in Nintex forms.

7. Add Custom JavaScript in Nintex Forms for Office 365

Let us see, how to add JavaScript/JQuery in Nintex form for office 365 in SharePoint Online.

In this example, I am going to explain how to get textbox value and display in calculated value control.

We will learn how to add custom javascript/jquery in Nintex form for Office 365, how to call Javascript by using function name in Nintex form, how to create the variables in Nintex forms for Office 365. People also search for nintex forms custom javascript.

Add Custom JavaScript or jQuery in Nintex forms for Office 365

Step 1: Create a list and go to your list ribbon, click on Nintex forms. now you will get Nintex form Designer view as shown below.

nintex forms custom javascript
nintex forms custom javascript

Step 2: Drag and Drop the “Calculated value” control from “FromControl” on the Nintex form to get and displaying textbox value after clicked on the “Submit” button as shown below.

nintex forms custom javascript
nintex forms custom javascript

Create a JavaScript variable in Nintex forms

Step 3: Double click on Textbox control, In control settings, go to “Advanced “. Select “Yes” from the drop-down list in “Store Client ID in JavaScript variable“. Enter the variable name in “Client ID JavaScript variable name

Create a JavaScript variable in Nintex forms
Create a JavaScript variable in Nintex forms

Step 4: Next, Double click on “Calculated Value“, click on the  Textbox control and add the Name from “Named Controls” in “INSERT REFERENCE” tab. If you want to add text before the value, enter text in “Value prefix” as shown below.

nintex forms calculated field
nintex forms calculated field

Next, go to “Advanced“, create JavaScript variable name (same as we discussed in step 3) as shown below.

nintex forms for office 365
nintex forms for office 365

Add Custom JavaScript in Nintex forms

Step 5: Click on “Form Settings“, Add your javascript/jquery code in “Custom JavaScritpt” and Add your JQuery reference link in “Custom JavaScript Include”  as shown below.

NWF$(document).ready(function(){
NWF$("Button").click(function(){
retriveTextBoxValue();
});
});                                                                                                                        function retriveTextBoxValue() {
var empName = NWF$("#" + varEmpName).val();
if(empName != ' '){
NWF$("#" + employeeName).val(empName);
}
else{
alert("Employee Name is empty");
return false;
}
}
Add Custom JavaScript in Nintex forms
Add Custom JavaScript in Nintex forms

How to Call JavaScript Method name in Nintex forms

Step 6: Double click on “Save” button, Change Button Action to “Javascript“, Button type “Button” and Button label as “Submit” as shown below.

  • Next go to the Advanced, copy and paste your Method name(
    retriveTextBoxValue() ) in “Client Click” as shown below.
  • You are new to Nintex forms, go to “Formatting“, delete CSS Class name “nf-save-button” because we changed button Action to Javascript and we are not submitting any data to the list just retrieve the Textbox value and display in a “Calculated Value” control on the Nintex forms.
  • You can do this way also, instead of the Existing “Save” button on the Nintex form, delete that Save button, drag and drop the new Button control from the “FORM CONTROLS” on the Nintex forms. 
  • No default CSS Class names in new controls added from the “FORM CONTROLS”.
Call JavaScript Method in Nintex forms
Call JavaScript Method in Nintex forms

Step 7: Now save and Publish the Nintex forms. Enter the name in the text box and click on Submit button and see the value of the Textbox as shown below. 

You will get an error message when you click on the Submit button without enter the name in the Textbox control as shown below.

nintex forms jquery
nintex forms jquery

This is how to write custom JavaScript in Nintex forms Office 365 and call javascript function on a button click in Nintex forms for Office 365.

8. Add JavaScript in Nintex forms

Let us see, how to add JavaScript inside Nintex forms for Office 365. This is a very beginner article where we will just see how we can show an alert while loading the Nintex forms using JavaScript.

Here let us open the SharePoint Online list, where you want to show the alert box. From the list ribbon (Classic site) or command bar (modern site) click on Nintex Forms button like below, which will open the Nintex Forms for Office 365 designer.

Nintex forms for office 365 javascript
Nintex forms for office 365 javascript

Then in the Nintex forms designer, click on Form Settings button like below:

How to use JavaScript in Nintex forms for Office 365
How to use JavaScript in Nintex forms for Office 365

Now in the Settings – Form dialog box, expand Custom JavaScript and put the below JavaScript code. Here if you will check the code, we are showing the alert box in the document ready.

How to use JavaScript in Nintex forms for Office 365
How to use JavaScript in Nintex forms for Office 365 SharePoint Online
NWF$(document).ready(function(){
alert("Welcome to Nintex Forms to use JavaScript");
});

Now Save it and then Publish the Nintex form to SharePoint Online site.

Now when you will open the list and try to add one item into that SharePoint Online list, it will show the dialog box on the form load like below:

How to use JavaScript in Nintex forms for Office 365?
How to use JavaScript in Nintex forms for Office 365

This is how to add JavaScript in Nintex forms.

You may like the following tutorials:

Conclusion

In this Nintex tutorial, we learn about the Nintex forms for Office 365.

  • Nintex Forms for Office 365
  • Nintex forms Benefits and Features
  • Add Nintex forms for Office 365 to SharePoint
  • Customize SharePoint List Forms using Nintex
  • Change Nintex Forms header banner in SharePoint
  • Add different layouts into Nintex forms
  • Create a column in Nintex forms designer
  • Reset to out of box list forms from Nintex Forms
  • Auto-populate current user name in Nintex Forms for Office 365
  • Add Custom CSS in Nintex form for Office 365
  • Add Custom JavaScript in Nintex Forms for Office 365
>