BEM markup and styling for Ninja Forms

This plugin customises the HTML and CSS of the front-end output of Ninja Forms.

The customised HTML follows BEM (Block Element Modifier) methodology, applies some data attributes used for layout and styling in Comet Components to allow for easier integration of Ninja Forms into Comet-based projects, and makes some other minor changes to markup for improved semantics.

In some places, the markup is simplified by removing superfluous classes, wrapping divs, and attributes. But that said, there are a lot of places this can't be done because the core JavaScript of Ninja Forms relies on them.

For easier theming, this plugin also:

• Makes the submit button a <button> element instead of an <input> element, making it easier to style like other buttons (including button-style links) using techniques like pseudo-elements for adding icons and animated hover effects. To further customise the HTML (for example, to add an SVG instead of using a pseudo-element for an icon), you can override it with your own version by copying the fields-submit.html file into /ninja-forms/templates/ in your theme and making your modifications there.
• Automatically wraps the submission response message with class callout and data-color-theme="success".

To-dos

The styling only covers basic form fields at the moment, and will be extended to cover more field types as I need them.

Development

References

• Custom field templates - Ninja Forms Developer
• wp.template tutorial - Luke Woodward

Things to watch out for

When trying to simplify markup, be careful to check if:

• A class name is used by the Ninja Forms plugin JavaScript
• An ID is used to match an element to something else (e.g., error messages have IDs that are referenced by the aria-describedby attribute of the relevant input fields).