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

by | Mar 31, 2021

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.

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

Get Ninja Forms Pro Today!

Subscribe On Youtube

I appreciate you reading and watching my content. If you haven’t already, please consider subscribing to my YouTube channel as it really helps the channel grow so I can continue doing what I do for you.

Thank You For Your Support

The Most Popular Hosting Period

Disclousre

This site is monetized with affiliate links to companies like Elegant Themes, Blue Host, Amazon, and others that pay a small commission if you purchase a product through a link on this website.

This allows me to continue to produce great content for this site and I appreciate your support. All products recommended by me are both used and approved by myself.

 

I Recommend Divi From Elegant Themes

Ninja Forms

Ninja Forms

Ezoic Ads

Pin It on Pinterest

Share This