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.

• Try Nintex forms for Office 365

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.

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

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

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

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

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.

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.

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.

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.

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:

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:

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:

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

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:

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:

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

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

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:

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.

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.

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.

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

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:

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.

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:

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

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.

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:

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:

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.

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;
}

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

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.

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.

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.

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“

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.

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

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;
}
}

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

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.

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.

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

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.

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:

This is how to add JavaScript in Nintex forms.

You may like the following tutorials:

• SharePoint column formatting examples
• SharePoint jslink Examples
• SharePoint Customization Examples
• SharePoint modern list view customization example

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