In this Nintex tutorial, we will discuss, 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
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
.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.
You may like following Nintex tutorials:
- Cascading dropdown in Nintex forms for Office 365 SharePoint Online
- Enable or Disable Save Button Based on Checkbox (Choice field) in SharePoint Online in Nintex Forms
- How to Show Hide Fields on Multiple Choices Checkbox in SharePoint Online List Form using Nintex forms for Office 365
- How to Customize SharePoint Online List form using Nintex forms for Office 365 (Part-2)
- How to Customize SharePoint Online List form using Nintex forms for Office 365 (Part-1)
- How to implement Validations in Nintex forms for Office 365 in SharePoint Online (4 Examples)
- How to Add Custom JavaScript or jQuery in Nintex forms for Office 365 SharePoint Online
- How to make a field mandatory based on Dropdown selected field Value in Nintex forms for Office 365
- How to use lookup function in Nintex forms for office 365 SharePoint Online
- Nintex Document Approval Workflow in SharePoint Online
Through this Nintex forms tutorial, I have explained how we can use add custom
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