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.

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);
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;
font-weight: 700;
font-size: 22px;
border-radius: 30px;

.contact-dark .nf-form-content input[type=button]:hover {
background: #2ed573;

.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;

.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


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