Aloha and welcome. In this video, I show you how to stylize your Ninja Forms with CSS. You can do this with the free version of the Ninja Forms plugin and the paid version as well. You can use my CSS code provided below.
Get Ninja Forms Today using my affiliate link to support the channel. Thank you.
CSS Code
Feel free to copy and paste my CSS code provided below. You’ll need to add the css class .contact-styled to your form as shown in the video.
/* All form styles */
.nf-help {
color: #bdc3c7 !important;
}
/* End All form styles */
/* Contact Form Styles */
.contact-styled {
background: rgb(240, 240, 240);
padding: 10px 30px 40px 30px;
border: 1px solid rgb(236, 236, 236);
box-shadow: rgba(0, 0, 0, 0.20) 0px 3px 8px;
font-family: Arial, Helvetica, sans-serif;
color: #7f8c8d;
}
.contact-styled h3 {
color: #2c3e50;
}
.contact-styled .nf-field-label {
color: #7f8c8d;
text-transform: capitalize;
}
.contact-styled .nf-form-content input[type=button] {
background: #2ecc71;
font-weight: 700;
font-size: 22px;
border-radius: 3px;
}
.contact-styled .nf-form-content input[type=button]:hover {
background: #27ae60;
color:#fff;
}
.contact-styled .nf-error.field-wrap .nf-field-element:after {
background: #e74c3c;
}
.contact-styled .nf-form-fields-required {
margin-bottom: 10px;
}
.contact-styled .nf-error .nf-error-msg {
color: #e74c3c;
}
.contact-styled .nf-error-msg, .ninja-forms-req-symbol {
color: #e74c3c;
}
.contact-styled .nf-pass.field-wrap .nf-field-element:after {
color: #2ecc71;
content: "\f164";
}
/* End Contact Form Styles */
