Ninja Forms, anyone?

[lianam]

Does anyone use Ninja Forms? Or does anyone know how to adjust the sizing of them? I can't seem to do it within the forms section of the dashboard (where you would do all the set up for the form). I just think it looks so big and bulky! I'd love to make the overall size smaller as well as make the field sizes smaller. Oh, I'm using the Enterprise theme, if that helps. 🙂 THANK YOU!

http://hdfamilylawgroup.com/

[Sridhar Katakam]

Add the following in Enterprise Pro's style.css:

.ninja-forms-required-items {
	margin-top: 20px;
	margin-bottom: 20px;
}

.ninja-forms-all-fields-wrap input {
	padding: 10px;
}

.ninja-forms-form .field-wrap label {
	font-size: 14px;
}

#ninja_forms_field_4 {
	margin-left: 0;
	margin-top: 5px;
	width: 100%;
}

.ninja-forms-all-fields-wrap input[type="submit"] {
	padding: 10px 30px;
}

.ninja-forms-all-fields-wrap .submit-wrap {
	margin-bottom: 0;
}

to get http://d.pr/i/1kMna.

---

Genesis Tutorials | Follow me on Twitter

[lianam]

This was great! Thank you so much. Is there any way to size it down even more? Or make it so that the fields don't have so much space in between them? I'm just trying to condense it and make it look a little more professional (and not so large and in your face!). Thanks!!!

[Sridhar Katakam]

I have set the field labels to be inside the field so the form looks compact. However, it is not working for the Phone field. You may want to contact Ninja Forms about it.

---

Genesis Tutorials | Follow me on Twitter

[lianam]

Do you have any idea how to make the reCAPTCHA field look more like the other fields (same size)?

[Sridhar Katakam]

Not possible as far as I know.

See http://stackoverflow.com/a/28619922/778809.

---

Genesis Tutorials | Follow me on Twitter

[lianam]

Thanks so much. It looks so much better! I sent a message to Ninja Forms, but it looks like I may never get a reply/help. It says there will be a delay on responses. If you happen to think of how to get the Phone field fixed, I would love to have your help! Thanks!

[Sridhar Katakam]

Ping them in Twitter. They seem to be pretty active.

There is one workaround though. For the Phone field, set the label also as the Placeholder text. It should then appear inside the field on the front end.

---

Genesis Tutorials | Follow me on Twitter

[lianam]

Aha...Brilliant idea! That worked. For some reason, though, the font color is darker. Any idea how to fix that so it matches the other text?

[Sridhar Katakam]

Add

#ninja_forms_field_8::-moz-placeholder {
	color: #aaa;
}

#ninja_forms_field_8::-webkit-input-placeholder {
	color: #aaa;
}

---

Genesis Tutorials | Follow me on Twitter

[lianam]

That worked perfectly! I noticed that the text "Message" is not lined up with the text in the other fields (needs to be pushed a little over to the left). What should I adjust?

[Sridhar Katakam]

Add 7px padding to .ninja-forms-form .textarea-wrap textarea in style.css.

---

Genesis Tutorials | Follow me on Twitter

[lianam]

Perfect!!! Thank you so much!

[Author]

Posts