Free Ninja Forms Stylized with CSS

by | Mar 23, 2021

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

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