doubleedesign/doublee-ninja-markup

There is no license information available for the latest version (dev-master) of this package.

Overrides Ninja Forms' front-end HTML markup with BEM-style class names, and provides some base CSS to match.

Maintainers

Package info

github.com/doubleedesign/doublee-ninja-markup

Language:HTML

Type:wordpress-plugin

pkg:composer/doubleedesign/doublee-ninja-markup

Statistics

Installs: 31

Dependents: 0

Suggesters: 0

Stars: 0

Open Issues: 0

Security

Advisories: 0

Aikido package health analysis

dev-master 2025-12-31 09:03 UTC

Unknown License 276c1d067f520b9b938ef7c57635077450379b55

  • Leesa Ward <leesa.woop@doubleedesign.com.au>

This package is auto-updated.

Last update: 2026-03-08 04:51:37 UTC

README

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

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).