Make Dark Forms With Ninja Forms And CSS. CSS Code Included.

by | Mar 31, 2021

Aloha and welcome. In this video I show you how to quickly and easily style your Ninja Forms with a dark style.

The CSS code is provided below. You do need to add the css class .contact-dark to your WordPress CSS file or to your themes custom css placement and to the Ninja Form settings as well.

Please follow the video for complete instructions.

Get Ninja Forms Today

NOTE: The video will show here once it has been published.

/* Contact DARK Styles */
.contact-dark {
background: #2f3542;
padding: 10px 30px 40px 30px;
border: 1px solid rgb(236, 236, 236);
border-radius:30px;
box-shadow: rgba(0, 0, 0, 0.20) 0px 3px 8px;
font-family: Arial, Helvetica, sans-serif;
color: #f1f2f6;
}

.contact-dark h3 {
color: #f1f2f6;
}

.contact-dark .nf-field-label {
color: #a4b0be;
text-transform: capitalize;
}

.contact-dark .nf-form-content input:not([type=button]), .contact-dark .nf-form-content textarea {
background: #2f3542;
border: 1px solid #57606f;
border-radius: 30px;
box-shadow: none;
color: #787878;
transition: all .5s;
}

.contact-dark .nf-form-content input[type=button] {
background: #7bed9f;
	width:50%;
font-weight: 700;
font-size: 22px;
border-radius: 30px;
}

.contact-dark .nf-form-content input[type=button]:hover {
background: #2ed573;
color:#fff;
	text-decoration:none;
}

.contact-dark .nf-error.field-wrap .nf-field-element:after {
background: #ff6348;
	border-radius: 0 30px 30px 0;
}

.contact-dark .nf-form-fields-required {
margin-bottom: 10px;
	color:#ff6348;
}

.contact-styled .nf-error .nf-error-msg {
color: #ff6348;
}

.contact-dark .nf-error-msg, .contact-dark .nf-error .nf-error-msg, .contact-dark .ninja-forms-req-symbol, .contact-dark .nf-error .ninja-forms-field {
	color: #ff6348 !important;
	border-color:#ff6348 !important;
}

.contact-dark .nf-pass.field-wrap .nf-field-element:after {
color: #2ecc71;
content: "\f164";
}
/* End Contact DARK Styles */

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

Get Started With Bluehost

Disclosure

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

Powerful Forms With Ninja Forms

Ninja Forms

Monetize Your Sites With Ezoic Ads