Showing Ninja Forms HTML code and a styled CSS form.

Ninja-Forms-CSS.css

/* STYLING NINJA FORMS - add to your stylesheet and adjust */

/* The full form */
#ninja_forms_form_1_wrap {
	background-color: #f89a16;
	padding: 20px;
	
	border: 2px solid #ccc;
	border-radius: 8px;
	box-shadow: 0px 3px 5px #444;
}

/* Fields marked with an * are required text */
.ninja-forms-required-items {
	margin-bottom: 15px;
}

/* All Input fields */
.ninja-forms-field {
	background-color: #e5e5e7;
	border: 1px solid #fff;
	font-size: 16px;
	border-radius: 5px;
}

/* Name field label and input box. 
NB! Notice the styling changes on resizing the browser. Fix this in your media queries. This will change from theme to theme.*/
#ninja_forms_field_1_div_wrap,
#ninja_forms_field_1 {
	width: 47%;
	min-width: 220px;
	height: 35px;
	float: left;
	margin-right: 28px;
}


/* Email field input */
#ninja_forms_field_2{
	width: 47%;
	min-width: 220px;
	height: 35px;	
	float: right;
}

/* Message field input */
#ninja_forms_field_3{
	
}

/* The Send button */
#ninja_forms_field_5 {
	background-color: #8d5303;
	border: 1px solid #333;
	border-radius: 8px;
	
	text-shadow: 2px 1px 3px #000;
	box-shadow: 0px 3px 5px #444;
}

/* The Send button - hover - mouse over effect */
#ninja_forms_field_5:hover{
	background-color: #8d5303;
	border: 1px solid #ccc;
	text-shadow: 0px 0px 2px #ccc;
	box-shadow: 1px 1px 2px #ccc;
}

Ninja-Forms-HTML

The default Ninja Forms HTML code.

**** The full form area. To edit the look of the form edit either the following id or the class. ***
<div id="ninja_forms_form_1_cont" class="ninja-forms-cont">
		<div id="ninja_forms_form_1_wrap" class="ninja-forms-form-wrap">

	<div id="ninja_forms_form_1_response_msg" style="" class="ninja-forms-response-msg "></div>	
	
***** The form fields area.***
	<form id="ninja_forms_form_1" enctype="multipart/form-data" method="post" name="" action="" class="ninja-forms-form">
	<input type="hidden" id="_wpnonce" name="_wpnonce" value="905e7362bc"><input type="hidden" name="_wp_http_referer" value="/test/?page_id=62&amp;preview=true&amp;form_id=1">	<input type="hidden" name="_ninja_forms_display_submit" value="1">
	<input type="hidden" name="_form_id" id="_form_id" value="1">
		<div id="ninja_forms_form_1_all_fields_wrap" class="ninja-forms-all-fields-wrap">

***** The text: “Fields marked with an * are required” ***** 			
<div class="ninja-forms-required-items">Fields marked with an <span class="ninja-forms-req-symbol">*</span> are required</div>
		
***** Name field label *****
<div class="field-wrap text-wrap label-above" id="ninja_forms_field_1_div_wrap" data-visible="1">
       <input type="hidden" id="ninja_forms_field_1_type" value="text">
       <label for="ninja_forms_field_1" id="ninja_forms_field_1_label" class="">Name <span class="ninja-forms-req-symbol"><strong>*</strong></span	</label>

***** Name field input *****
   <input id="ninja_forms_field_1" data-mask="" data-input-limit="" data-input-limit-type="" data-input-limit-msg="" name="ninja_forms_field_1" type="text" placeholder="" class="ninja-forms-field  ninja-forms-req " value="" rel="1">
   <div id="ninja_forms_field_1_error" style="display:none;" class="ninja-forms-field-error">
   </div>
</div>
												
***** Email field label *****
<div class="field-wrap text-wrap label-above" id="ninja_forms_field_2_div_wrap" data-visible="1">
	<input type="hidden" id="ninja_forms_field_2_type" value="text">
	<label for="ninja_forms_field_2" id="ninja_forms_field_2_label" class="">Email <span class="ninja-forms-req-symbol"><strong>*</strong></span>	</label>

***** Email field input *****
    <input id="ninja_forms_field_2" data-mask="" data-input-limit="" data-input-limit-type="" data-input-limit-msg="" name="ninja_forms_field_2" type="text" placeholder="" class="ninja-forms-field  ninja-forms-req email " value="" rel="2">
    <div id="ninja_forms_field_2_error" style="display:none;" class="ninja-forms-field-error">
    </div>
</div>
												
***** Message field label *****
<div class="field-wrap textarea-wrap label-above" id="ninja_forms_field_3_div_wrap" data-visible="1">
	<input type="hidden" id="ninja_forms_field_3_type" value="textarea">
	<label for="ninja_forms_field_3" id="ninja_forms_field_3_label" class="">Message <span class="ninja-forms-req-symbol"><strong>*</strong></span>	</label>

***** Message field input *****
	<textarea name="ninja_forms_field_3" id="ninja_forms_field_3" class="ninja-forms-field  ninja-forms-req" rel="3" data-input-limit="" data-input-limit-type="" data-input-limit-msg=""></textarea>
	<div id="ninja_forms_field_3_error" style="display:none;" class="ninja-forms-field-error">
	</div>
</div>
												
***** Spam field label *****
<div class="field-wrap spam-wrap label-left" id="ninja_forms_field_4_div_wrap" data-visible="1">
       <input type="hidden" id="ninja_forms_field_4_type" value="spam">
	<label for="ninja_forms_field_4" id="ninja_forms_field_4_label" class="">What is thirteen minus 6? <span class="ninja-forms-req-symbol"><strong>*</strong></span>	</label>

***** Spam field input *****
	<input id="ninja_forms_field_4" name="ninja_forms_field_4" type="text" class="ninja-forms-field  ninja-forms-req" value="" rel="4">
	<div id="ninja_forms_field_4_error" style="display:none;" class="ninja-forms-field-error">
	</div>
</div>
												
***** Send button field *****
<div class="field-wrap submit-wrap label-above" id="ninja_forms_field_5_div_wrap" data-visible="1">
	<input type="hidden" id="ninja_forms_field_5_type" value="submit">
	<div id="nf_submit_1">
	<input type="submit" name="_ninja_forms_field_5" class="ninja-forms-field " id="ninja_forms_field_5" value="Send" rel="5">
	</div>
	<div id="nf_processing_1" style="display:none;">
	<input type="submit" name="_ninja_forms_field_5" class="ninja-forms-field " id="ninja_forms_field_5" value="Processing" rel="5" disabled="">
	</div>
	<div id="ninja_forms_field_5_error" style="display:none;" class="ninja-forms-field-error">
	</div>
</div>
</div>

</form>
</div>
</div>