How to Add Custom CSS in Nintex form for Office 365 SharePoint Online

by
Leave request management and approval

In this Nintex tutorial, we will discuss, how to Add Custom CSS to the Nintex forms for Office 365 in SharePoint Online.

Complete SharePoint Training Course Just for $199 (Just for Today)

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 forms add custom css
Nintex forms add custom css

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;
}
nintex forms custom css includes
nintex forms custom css includes

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

Custom css in Nintex forms for office 365
Custom css in Nintex forms for office 365

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.

Custom css in Nintex forms SharePoint Online
Custom css in Nintex forms SharePoint Online

You may like following Nintex tutorials:

Through this Nintex forms tutorial, I have explained how we can 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.

>