We thought it would be fun and perhaps helpful to provide some examples of styling Ninja Forms for your website. We will post a bunch of these over time just to give you an example of what you could be doing and if you like one you can lift the css below and use it on your own site. Check it all out after the jump.

The Form

My Form Settings

This is a simple contact form with all default field settings with the following exceptions:

• All fields but the spam question have the label set to above the field.
• I added a custom class to the First and Last name of first-name, last-name respectively.

That’s it. Everything else are default settings. I’ve added the form here with the ninja_display_form shortcode and wrapped it in a div with an ID of ninja-form-sample so if you use my css below you may want to take that into account. I’ve also added a post id class to make sure the UI styling of the pop-up only applies to this post.

The CSS

#ninja-forms-sample {
   background: #000;
   background-image: linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -o-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -moz-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -webkit-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -ms-linear-gradient(left bottom, rgb(0,0,0) 14%, rgb(34,34,34) 92%);
   background-image: -webkit-gradient(
     linear,
     left bottom,
     right top,
     color-stop(0.14, rgb(0,0,0)),
     color-stop(0.92, rgb(34,34,34))
   );
   border-radius: 10px;
   color: #777;
   padding: 20px;
   overflow: hidden;
}
#ninja-forms-sample p {
   margin: 0;
}
#ninja-forms-sample .ninja-text-box,
#ninja-forms-sample .ninja-textarea {
   background: #333;
   border: 1px solid #444;
   border-radius: 8px;
   -moz-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   box-shadow: inset 3px 3px 3px rgba(0,0,0,.4);
   color: #ccc;
   line-height: 22px;
   padding: 3px 1%;
   width: 97%;
}
#ninja-forms-sample .ninja-textarea {
   height: 100px;
   overflow: auto;
}
#ninja-forms-sample .first-name-wrap {
   float: left;
   width: 48%;
}
#ninja-forms-sample .last-name-wrap {
   float: right;
   margin-right: 0;
   width: 48%;
}
#ninja-forms-sample .span-spam-label-left {
   float: left;
   width: 48%;
}
#ninja-forms-sample #ninja_field_spam {
   float: none;
   width: 22px;
}
#ninja-forms-sample .span-submit-label-left {
   float: right;
   width: 48%;
}
#ninja-forms-sample #ninja_submit {
   float: right;
}

#ninja-forms-sample #ninja_submit {
   background-color: #c80101;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c80101), color-stop(100%, #a80000));
   background-image: -webkit-linear-gradient(top, #c80101, #a80000);
   background-image: -moz-linear-gradient(top, #c80101, #a80000);
   background-image: -ms-linear-gradient(top, #c80101, #a80000);
   background-image: -o-linear-gradient(top, #c80101, #a80000);
   background-image: linear-gradient(top, #c80101, #a80000);
   border: 1px solid #c80101;
   border-radius: 8px;
   color: #fff;
   line-height: 1;
   padding: 8px 15px;
   text-align: center;
   text-shadow: 0 -1px 1px #64799e;
   text-transform: uppercase;
}
#ninja-forms-sample #ninja_submit:hover {
   background: #e70202;
   border: 1px solid #e70202;
   cursor: pointer; }
#ninja-forms-sample #ninja_submit:focus {
   background: #e70202;
   border: 1px solid #e70202;
}
.ui-widget-overlay {
   background: #000 !important;
   opacity: .90 !important;
   filter: Alpha(Opacity=90) !important;
}
.ui-dialog {
   background: #111 !important;
   border: 10px solid #000 !important;
   border-radius: 10px !important;
   color: #ccc !important;
}
.ui-widget-header {
   background: #111 !important;
   color: #fff !important;
}
.ui-widget-content {
   color: #ccc !important;
}
.ui-widget-content a {
   color: #ff0000 !important;
}

Feel free to use this CSS and tweak it for your own form and look for some other styling in the near future.