Support » Plugin: Ninja Forms - The Easy and Powerful Forms Builder » [Plugin: Ninja Forms Lite] Changing the width of the form fields

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Kevin Stover


    Hey Puuuma,

    This would need to be done with some custom CSS styling. I’m not a CSS guru, but if you google it, you should be able to find information on changing textbox sizes in CSS.

    depends on which label alignment do you use. for example for textbox-label-adove:

    in ninja_forms_display.css

    .span-textbox-label-above {}
    	.span-textbox-label-above input {padding: 2px 5px; width: 97%;}
    	.span-textbox-label-above label {}

    change to:

    .span-textbox-label-above { width: 200px;}
    	.span-textbox-label-above input {padding: 2px 5px; width: 92%;}
    	.span-textbox-label-above label {}


    What if I wanted the label aligned to the left of the textbox, for instance?

    Also, when I view the .css file for the display, it says “(inactive).” How do I make it active?

    I am sorry if these are very simple things to do; I am extremely new to CSS.

    Hello !

    There’s no such thing like `.span-textbox-label-above {}
    .span-textbox-label-above input {padding: 2px 5px; width: 97%;}
    .span-textbox-label-above label {}` in ninja-forms-display.css


    I’ve defined a new class

    .short-field {
    width: 200px;

    and indicated in the CSS class custom field of my textbox, but nothing happens.

    I can check with Chrome’s page checking that class becomes
    class=”ninja-forms-field ninja-forms-req short-field”
    but…. field remains full lenght.

    Any help please ?

    Plugin Author Kevin Stover


    Hi pikkabbu,

    I’m not really great at CSS, but if you send me a link to a page with the form you are trying to style, I’ll take a look at it.

    Plugin Author James Laws


    Hi pikkabbu,

    I do all our css so as Kevin said post a link and I’d be happy to help. The issue is that Ninja Forms tries to add as little CSS as possible so that when goof theme designers create good design for dorm elements we don’t override those styles. It is actually very easy to style Ninja Forms but admittedly only if you are fairly comfortable with CSS. If not it can be a little more difficult. especially if you theme has done odd things in it’s styling choices.

    We are releasing a new extension on Monday that makes Ninja Forms super easy to style and I’ll post the link here as soon as we launch it.

    Hi James,

    Thank you for your message.

    At this moment, I decided ti use another plugin, but I’ll be happy to try the new version and give Ninja’s another chance.

    We all must to appreciate creators that offer us free plugin to make our sites greater and better. (We all need to remember that donating is a great way to thank authors)

    Thank you Kevin !

    I use to manage rather well with CSS. The problem is that the plugin doesn’t use the css I (we) add to its own css file.

    In fact, that’s the 1st and only time this occurs to me.

    I do think that plugins are made to be used and their creations are aimed to user’s application.

    So I don’t understand well why some authors invest so much time and efforts creating very nice plugins and very few to let users use and enjoy them. 😉

    Plugin Author James Laws


    We have just released the Layout & Styles Extension for Ninja Forms. Check it out and see if it will solve your problems or makes styling your forms so much easier.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: Ninja Forms Lite] Changing the width of the form fields’ is closed to new replies.