I have made the decision to ditch Contact Forms 7 in favor of Ninja Forms, but I have noticed that the fields from Ninja Forms are appearing thinner (skinnier) in height than the default height of fields in the X Integrity Light theme. See screenshot here: http://www.inbluetesting.com/observatory/wp-content/uploads/2014/10/Screen-Shot-2014-10-17-at-2.42.28-pm.png

I also have Contact Form 7 installed and its fields (see the top blue reservation panel in the screenshot) are appearing at the correct height, but Ninja Forms for some strange reason are appearing thin.

If anyone could help me solve this, I would greatly appreciate it.

Dan

Wordpress Version 4.0
Integrity Light Child Theme Version 1.0.0
Shortcode Plugin Version 2.4.0

Please give us the URL of a page contains this form so we can help with this.

Thank you.

Please add the following CSS code under Customize -> Custom -> CSS:

.ninja-forms-form-wrap input, .ninja-forms-form-wrap select, .ninja-forms-form-wrap textarea {
padding: 7px 10px;
}

Hope that helps.

I have a booking panel with a single “Arrival” field (which is a datepicker field). I need to know how to put a calendar icon in the field just to the left of the “Arrival” text. You helped me previously to put the calendar icon in the field when I was using Contact Form 7 here: http://theme.co/x/member/forums/topic/integrity-light-styling-questions/ (point #4). And it looked exactly how I wanted it to look (see screenshot): http://www.inbluetesting.com/observatory/wp-content/uploads/2014/10/Screen-Shot-2014-10-17-at-9.49.06-pm.png

But when I tried to change the code to be compliant with Ninja Forms, it didn’t work. You can probably see why.

Here is the code I tried to edit:

.ninja-forms input[type="text"].hasDatepicker {
   padding-left: 30px;
   position:relative;
   line-height:32px;
}

span.ninja-forms-form-wrap.date-785{
	position:relative;
	display:block;
}

span.ninja-forms-form-wrap.date-785:before {
content: "\f073";
position: absolute;
top: 6px;
left: 10px;
z-index:100;
font-family: fontawesome;
}

Can you see what I’m doing wrong?

Can you please add this CSS code below Under Customizer > Custom > CSS

#ninja_forms_field_8_div_wrap, #ninja_forms_field_9_div_wrap {
	position: relative;
}
#ninja_forms_field_8_div_wrap:before, #ninja_forms_field_9_div_wrap:before {
	content: "\f073";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 100;
	font-family: fontawesome;
}
#ninja_forms_field_8, #ninja_forms_field_9 {
	padding-left: 30px;
}

Let me know how it works,

Cheers

Please edit the code above to be.

#ninja_forms_field_5_div_wrap,
#ninja_forms_field_8_div_wrap, 
#ninja_forms_field_9_div_wrap {
	position: relative;
}

#ninja_forms_field_5_div_wrap:before,
#ninja_forms_field_8_div_wrap:before, 
#ninja_forms_field_9_div_wrap:before {
	content: "\f073";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 100;
	font-family: fontawesome;
}

#ninja_forms_field_5,
#ninja_forms_field_8, 
#ninja_forms_field_9 {
	padding-left: 30px;
}

You can either put the code in custom > css or in the child theme’e style.css.
Both will work just fine.

Hope that helps.