Style your Ninja Forms in minutes with CSS. CSS Code Included.

Aloha and welcome. In this video, I show you how to quickly stylize your ninja forms with CSS like the photo above. In fact it’s so easy I provide you with the CSS code below and all you have to do is add it your your CSS file in WordPress or in your Custom CSS section for your WordPress theme.

Get Ninja Forms Today

You also need to add the CSS class .contact-styled to your Ninja Form. Follow the video for instructions.

/* Contact Form Styles */
.contact-styled .nf-help {
color: #bdc3c7 !important;
}

.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 */