PHPackages                             doubleedesign/doublee-ninja-markup - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. doubleedesign/doublee-ninja-markup

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

doubleedesign/doublee-ninja-markup
==================================

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

078HTML

Since Jun 8Pushed 2mo agoCompare

[ Source](https://github.com/doubleedesign/doublee-ninja-markup)[ Packagist](https://packagist.org/packages/doubleedesign/doublee-ninja-markup)[ RSS](/packages/doubleedesign-doublee-ninja-markup/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependenciesVersions (1)Used By (0)

BEM markup and styling for Ninja Forms
======================================

[](#bem-markup-and-styling-for-ninja-forms)

This plugin customises the HTML and CSS of the front-end output of [Ninja Forms](https://ninjaforms.com/).

The customised HTML follows [BEM](http://getbem.com/) (Block Element Modifier) methodology, applies some data attributes used for layout and styling in [Comet Components](https://cometcomponents.io) 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 `` element instead of an `` 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
------

[](#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
-----------

[](#development)

### References

[](#references)

- [Custom field templates - Ninja Forms Developer](https://developer.ninjaforms.com/codex/custom-field-templates/)
- [wp.template tutorial - Luke Woodward](https://lkwdwrd.com/wp-template-js-templates-wp)

### Things to watch out for

[](#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).

###  Health Score

22

—

LowBetter than 21% of packages

Maintenance58

Moderate activity, may be stable

Popularity11

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity11

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/563583?v=4)[Leesa Ward](/maintainers/doubleedesign)[@doubleedesign](https://github.com/doubleedesign)

---

Top Contributors

[![doubleedesign](https://avatars.githubusercontent.com/u/563583?v=4)](https://github.com/doubleedesign "doubleedesign (3 commits)")

### Embed Badge

![Health badge](/badges/doubleedesign-doublee-ninja-markup/health.svg)

```
[![Health](https://phpackages.com/badges/doubleedesign-doublee-ninja-markup/health.svg)](https://phpackages.com/packages/doubleedesign-doublee-ninja-markup)
```

###  Alternatives

[microman/kirby-form-block-suite

Contactform based on Kirby blocks.

412.7k1](/packages/microman-kirby-form-block-suite)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)