My Form Looks Funny! Help! An Article on Form Presentation

Presentation is everything, they say. While I’d suggest that depends strongly on what it is we’re talking about, if it’s your website we’re discussing then the saying is right on the money. Literally. From the general aesthetic of your website to the user experience involved in navigating and interacting with the site, a pleasing, user friendly experience is absolutely critical for your business’ success.

WordPress has a hundred and one ways to make you look good, from the thousands of available themes to the freedom to write your own CSS to style your site as you please. Since we’re in the business of forms, we want your forms to look stellar on your site: as jaw droppingly beautiful or as eloquently discreet as you wish them to be. Read on with me for a moment and we’ll dissect just what determines what your Ninja Form looks like, and the level of control you have over that aspect of your website.

What Controls How a Ninja Form Looks?

Short answer: you do. There’s an industry term that applies here and is worth bringing up: opinionated design. If a piece of software is opinionated, then it is produced such that the opinions of the designers are enforced in how the software looks and performs wherever that piece of software goes.

The weather app on my phone is a pretty good example of opinionated design. It looks exactly the same from phone to phone, and when you see a widget embedded on someone’s website from that service, it looks and acts the same each and every time.

Ninja Forms is not opinionated. It is coded to be a chameleon. A Ninja Forms’ styling is inherited from the theme that you use on your WordPress website. While there is structural CSS applied to maintain the structural integrity of the form (i.e. positioning of labels relative to the appropriate field, etc), there is no aesthetic or appearance related CSS applied whatsoever. In short, a Ninja Form looks like you tell it to look via your theme. Let’s unpack that statement a bit.

How Much Control Does My Theme Have Over How My Ninja Form Looks?

Almost all of it. To tap another old saying about presentation, a picture speaks a thousand words. StudioPress is a retailer of premium WordPress themes that frequently use Ninja Forms in their demos specifically due to the non-opinionated nature of Ninja Forms.

Browsing their themes, the vast majority are coupled with a Ninja Form. To demonstrate how Ninja Forms inherit their styling from the theme being used, let’s look at different Ninja Forms in the wilds of StudioPress. These examples (and all others) display how Ninja Forms, with no additional styling applied, will look naturally in conjunction with your theme:

Ninja Forms on Beautiful Pro Demo

Beautiful Pro

 


Ninja Forms on Enterprise Po Demo


Ninja Forms on The Modern Studio Demo


Ninja Forms on Genesis Framework Demo

 


Ninja Forms on Executive Pro Demo


Ninja Forms on Outreach ProDemo


Ninja Forms on Metro Pro Demo

It’s not just premium themes that Ninja Forms looks great on naturally, however. We inherit the styling of any theme, and that goes for quality free themes that are coded to WordPress standards as well. Let’s look at the default WordPress themes from the last few years:

Ninja Forms on Twenty Sixteen Demo


Ninja Forms on Twenty FifteenDemo


Ninja Forms on Twenty Fourteen Demo

As you can see, there is not a single way a Ninja Form looks, and in each instance the form looks like it blends in completely with the rest of the page’s styling. That’s highly intentional. We want our forms to look the way you need them to look, and that is accomplished by your Ninja Form adopting the styling of the theme you’ve selected.

But My Form Looks Bad, What’s the Problem?

Bluntly spoken, your theme is the problem. If there’s something broken in the presentation of your form, it comes down to your theme. Because Ninja Forms inherits its styling from the theme you use, if there is a problem with the appearance of your form it is almost certainly due to an irregularity in the way the theme’s styling is coded.

This is the downside of having a non-opinionated piece of software. We do not override the theme’s styling, meaning that if a theme is coded to render gorgeous styling, your form looks gorgeous too. The flipside is that if your theme isn’t so strong in that suite, your forms will reflect that as well.

If My Theme Controls Styling, What’s the Point of Your Layout and Styles Extension?

Layout and Styles gives you a high level of fine tuned, granular control over the styling of your form without having to resort to CSS. One of our priorities with Ninja Forms, and the reasoning behind allowing our forms to inherit their styling from the theme, is to give you as much control as possible over the form’s presentation.

If we make an opinionated piece of software, we’re choosing how your form looks, not you. We don’t feel that’s the best way of handling things. An extension of that thought process is the understanding that, even though your forms are inheriting styling from the theme you’ve chosen, you still may want the freedom to tweak the way your form looks at a granular level.

Now, anyone can do that if they know CSS well enough, but not everyone does. Enter Layout and Styles, a Ninja Forms extension that gives everyone that fine tune, granular control over appearance without having to be great at CSS!

peeking-ninja-300x138The point of all this: we want you to understand why we do what we do, and we want to understand what you need us for to the best of our ability. We feel like once we have that mutual understanding, we’re in the best place possible to establish a beneficial relationship with you, our customers. That’s what this is all about. We get questions fairly frequently about how our forms look due to our decision to put that control in the hands of your theme, and by extension, you. Hopefully this helps clear things up on that point. If you have questions or comments, blast away in the comments; we’re happy to hear from you!