Skip to main content
Nintex Community Menu Bar
Solved

How do I customized the Form Fields using CSS

  • December 1, 2017
  • 1 reply
  • 474 views
  • Translate

Forum|alt.badge.img+3

Hi All, 

I have a request for a form that I will build in Nintex. The business has given me a wire frame design and I am attempting to create the form based on their design . Does anyone know how to apply CSS to make it look like that image attached?

Is this even possible?

 

Any Help would be greatly appreciated!

 

 Paul G

Best answer by kchaluvadi

Hi Paul,

If you are creating classic forms, you can write your own CSS as shown below:

/* Label controls */

.nf-form-label{
background-color: #1E90FF;
}

/*Input Controls*/
.nf-form-input{
border-style: solid;
border-color: #1E90FF;
border-width: 1px;
}

Using the above sample, you create your own css and add them at the end of "Custom CSS" section of "Form Settings" or create a .css file, add it to site assets and refer in "Advanced --> Custom CSS includes" section of "Form Settings".

A sample screen of the form how it looks after your applying custom css.

Reference to all css classes used by Nintex Forms.

Thanks,

Krishna.

View original
Did this topic help you find an answer to your question?

Forum|alt.badge.img+12

Hi Paul,

If you are creating classic forms, you can write your own CSS as shown below:

/* Label controls */

.nf-form-label{
background-color: #1E90FF;
}

/*Input Controls*/
.nf-form-input{
border-style: solid;
border-color: #1E90FF;
border-width: 1px;
}

Using the above sample, you create your own css and add them at the end of "Custom CSS" section of "Form Settings" or create a .css file, add it to site assets and refer in "Advanced --> Custom CSS includes" section of "Form Settings".

A sample screen of the form how it looks after your applying custom css.

Reference to all css classes used by Nintex Forms.

Thanks,

Krishna.

Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings