Ninja Forms CSS Styling for Divi

With increasingly more competing premium WordPress plugins it becomes harder and more difficult to a good forms plugin. Most WordPress plugins have a choice to test their service free of charge, either through a fundamental free edition, a trial period or internet demo. In this case recommend Contact Form 7 or Ninja forms which I used throughout all my client’s website.

The default styling provided by Ninja Forms when used on Divi looks pretty out of place. There is a premium add-on for Ninja Forms that will allow you to style your forms, for most users I would suggest this if you are not comfortable using code. Though with a little bit of CSS you can make Ninja Forms look pretty close to Divi’s native contact form module.

The code below can be added to your themes css file and will provide a very similar feel to the native Divi Contact Form Module. Depending on your fonts and colors being used you might need to tweak a few items. To get the placeholder text to be contained inside the form fields there is a setting you will need to change when creating the form. A sample of this code in action can be seen on my demo form on the footer.

/* START - Divi Ninja Form Styling */
.nf-form-cont input, .nf-form-cont select{
	background-color: #eee;
	border: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	font-size: 16px;
	color: #999 ;
	padding: 16px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.nf-form-cont select{
	width: 100% !important;
	height: 50px !important;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
}
.ninja-forms-required-items {
	display: none;
}
textarea.ninja-forms-field{
	background-color: #eee;
	border: none;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	font-size: 16px;
	color: #999 ;
	padding: 16px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
*[id^='nf_submit_'] > .ninja-forms-field {
	float: right;
	width: 150px;
	color: #1e73be !important;
	margin: 8px auto 0;
	cursor: pointer;
	font-size: 20px;
	font-weight: 500;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	padding: 6px 20px;
	line-height: 1.7em;
	background: transparent;
	border: 2px solid;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	transition: all 0.2s;
}
*[id^='nf_submit_'] > .ninja-forms-field:hover {
	background-color: #eee;
	border-color:#eee;
	padding: 6px 20px !important;
	width: 170px;
}
/* END - Divi Ninja Form Styling */