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.
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.
Step 2: Go to the List tab, click on the “Nintex Forms” icon on the SharePoint ribbon as shown below.
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”.
Step 4: When you click on “classic From”, the form will appear as shown below. All our list columns will appear in the form.
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.
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.
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.
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.
- 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.
- The Third Option, Right-click on “Image Control”, then click on “Settings” as shown below.
- 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.
Now your image is added in the form as shown below.
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.
Same steps for the Text control as said above for the label control see the below screenshot.
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.
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.
Place textbox control inside a label control (we can place any control inside another control)
See the below screenshot of label and text controls.
Resize the control and place the textbox control in the label control as shown below.
Check out below Nintex tutorials which we can use to customize SharePoint Online list forms:
- How to implement Validations in Nintex forms for Office 365 SharePoint Online + 3 Nintex form validation examples
- Nintex Forms for Office 365: Show Hide Fields on Multiple Choices Checkbox in List Form in SharePoint Online
- Cascading dropdown in Nintex forms for Office 365 SharePoint Online
- Nintex Forms: Enable or Disable Save Button Based on Checkbox (Choice field) in SharePoint Online
- How to Add Custom CSS in Nintex form for Office 365 SharePoint Online
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]
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com