How to Customize SharePoint Online List form using Nintex forms for Office 365 (Part-1)

In this SharePoint tutorial, how to Create and Customize SharePoint Online List form using Nintex forms for Office 365.

I will explain how to add controls on a Nintex form, how to add a logo to a Nintex form, how to add controls in a panel inside a Nintex form and how to add one panel in another panel inside a Nintex form.

Before doing this example, you should have an Office 365 SharePoint Online site and Nintex Forms for Office 365 should have been added to the SharePoint Online site.

Customize List Form using Nintex Forms

Step 1: I have created a list in SharePoint Online with columns and named it “Employee Registration Form” as shown below.

create list form using nintex
create list form using nintex

Step 2: Go to the List tab, click on the “Nintex Forms” icon on the SharePoint ribbon as shown below.

nintex classic form design
create list form using nintex forms

Step 3: Now it will show you the “Choose designer” window, here you will select the “classic Form” or “Responsive Form”. In this example, I Choose “classic form”.

nintex forms office 365
nintex forms office 365

Step 4: When you click on “classic From”, the form will appear as shown below. All our list columns will appear in the form.

Build nintex forms
Build nintex forms

Design SharePoint List Form using Nintex forms

Now, we will see various ways how we can design SharePoint list form using Nintex forms for Office 365.

Desktop Layout Settings in Nintex Form

We can easily change the height and width of the Nintex Form. Go to Designer tab, click on “Properties” on the ribbon. Now it will appear on the right side of the form. go to the Layout section, click on “Layout Settings” as shown below.

Create nintex form in SharePoint Online
Create nintex form in SharePoint Online

It will open “Settings – Layout” window, here you can change Height and width of the canvas and Grid cell. Next click on the SAVE button.

Create Nintex form in SharePoint Online
Create Nintex form in SharePoint Online

Change Logo on Nintex Form

Now we will see how to change the logo in Nintex form. By default, it shows the “Nintex Forms for Office 365” logo. It is a common requirement to change this Nintex Form logo as per your business requirement.

change logo nintex forms
change logo nintex forms

We can do the changes in three ways follow the below steps.

  • The first option, When you click on image control, Control tab will appear on the Nintex forms ribbon, here you can select “Control Settings” as shown below.
create nintex forms office 365
change logo nintex forms
  • The second option, after clicking on Image control, go to the”Settings” section under the “Properties” Panel. here add image URL as shown below and for more settings click on  ” More Setting ” button.
change logo of nintex forms for Office 365
change logo of nintex forms for Office 365
  • The Third Option, Right-click on “Image Control”, then click on “Settings” as shown below.
create nintex forms office 365
create nintex forms office 365 and change logo
  • You can follow any one of the above things. after clicking on it, “Control Settings – Image” window has appeared as shown below.
  • Here, In the General section, enter the name, add  URL of the image (mandatory)and Alternative text.
  • In the Appearance section, make visible is “Yes”, and set Horizontal width and Vertical height as per your requirement.
nintex forms sharepoint online

Now your image is added in the form as shown below.

build Nintex forms
Customize Nintex forms and change logo in nintex forms

How to associate Nintex Forms Controls to the SharePoint list column?

Now I will show you how we can associate Nintex Forms controls to SharePoint list columns.

Click on the label control (or right click on the label control and select “settings“) then ” settings” section will appear in the “Properties” panel.

If you want to change the text you can change in the Text section as shown below.

Next, go to “associated control” and select column name which you want to associate the label as shown below. (by default it will be added because we are retrieved all columns  from the SharePoint list)

when you created new label control in the form follow the above steps.

nintex forms sharepoint online un
associate Nintex Forms controls to SharePoint list columns
associate Nintex Forms controls to SharePoint list columns

Same steps for the Text control as said above for the label control see the below screenshot.

nintex forms sharepoint online
Nintex forms SharePoint online
Nintex forms SharePoint online

How to set a Default value (Current user) for the Textbox Control?

Now I will show you how to set a default current username in a text box control in Nintex Forms in Office 365 SharePoint Online.

  • Right-click on the Text control, then click on “Settings” then it will open “Control Settings – Single Line Textbox“.
  • Here got to “Default Value Source“, select “select Specify Default Value” from the Drop-down list.
  • Next, go to the “Default value“, when you click the cursor on Textbox control then the “INSERT REFERENCE” panel has appeared on the right side.
  • Here double click on the “Current User (Display Name)“, then it will be added in the textbox control of the “Default value” as shown below.
populate current user in nintex forms
populate current user in nintex forms

Go to the design tab click on “Preview“, in Preview settings window, click on “Generate Preview“. Username added in the text box as shown below.

populate current user in nintex forms
populate current user in nintex forms

Place textbox control inside a label control (we can place any control inside another control)

See the below screenshot of label and text controls.

Nintex forms for Office 365
Nintex forms for Office 365

Resize the control and place the textbox control in the label control as shown below.

Nintex forms for Office 365
Nintex forms for Office 365

Check out below Nintex tutorials which we can use to customize SharePoint Online list forms:

Conclusion

In this Nintex Forms tutorial, we discussed how to customize a SharePoint Online list form using Nintex forms for Office 365? How to change the Nintex Forms logo in Nintex form? How to change the width and height of a Nintex Forms for Office 365 list form? How to auto-populate the current user in Nintex Forms? How to associate Nintex Forms controls to SharePoint list columns?

In the next blog, we will see how to add panel control to Nintex form and how to place label/text controls in the panel inside Nintex Forms in SharePoint. Read [How to Create and Customize SharePoint Online List form using Nintex forms for Office 365 Part-2]

>