Skip to content

Instantly share code, notes, and snippets.

@dotherightthing
Last active August 15, 2019 08:54
Show Gist options
  • Save dotherightthing/355cfb86ad6ff8e2d587fbab5fd3ad75 to your computer and use it in GitHub Desktop.
Save dotherightthing/355cfb86ad6ff8e2d587fbab5fd3ad75 to your computer and use it in GitHub Desktop.
[Ninja Forms] Easy to create, not particularly accessible. #wordpress

Ninja Forms

Created: 2017.04.17

Upwork clients often ask for form customisations. They two main systems they mention are Ninja Forms and Gravity Forms.

Both Ninja Forms and Gravity Forms allow you to create forms with required fields, make use of field validation, and have the ability to perform calculations based on the data that the user has entered. Unlike Ninja Forms, Gravity Forms isn’t available in a free version. Instead, you’ll need to choose from one of the three paid options the features and capabilities of Ninja Forms can be enhanced by installing one or more of the available extensions

Ease of use

The editor is easy to use:

Editing an input's display properties.

Styling

There's no way to disable the default styling.

As a result the Ninja styling clashes with my existing styling:

Bad alignment due to clashing styles.

Fields utilising a fixed length display the same width as non-fixed-length fields:

A field with a maximum length of four characters displays at 100% wide.

There's also no option to move, remove, or replace the 'Fields marked with an * are required' message.

Anti-spam

Both anti-spam fields and Google's reCAPTCHA are supported.

Accessibility issues

label elements are tied to input elements, but that's where the accessibility starts and ends. It's worth noting that, despite there being a raft of requirements for public/premium WordPress themes, there's no obligation for theme or plugin developers to comply with WCAG. Perhaps this is why Ninja Forms have not done due diligence here.

Grouping

I couldn't find a way to implement a fieldset or a legend.

Managing expectations & errors

Fields aren't marked as required, either using HTML5 or WAI-ARIA.

Invalid fields aren't marked as invalid, and the error messages aren't tied to the fields.

Source code showing missing attributes.

JavaScript dependent

Disabling JavaScript causes the whole form to be replaced by a JavaScript-required message:

Notice: JavaScript is required for this content.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment