Form Templating

Over the past few weeks, we’ve been working on something new to Ninja Forms: field templating. This represents a fundamental shift in how we render fields and forms. In Ninja Forms 2.9.x, display information for fields is stored within each field registration function. A textbox field, for instance, is registered with a callback function that is used when it is time to display a textbox. PHP calls the display function every time a textbox appears in the form. Since the textbox markup is written within a PHP function, if you want to change how textboxes look, you have to go to the field registration, track down the display callback, and modify the code. This is very messy, and not very modular. Frankly, it sucks. For 3.0, we wanted something that would be easy to modify and customize.

This approach will allow theme developers to drop HTML template replacements in their theme folder, where they’ll take priority over our defaults. This is similar to how WordPress page and post templates work. Unlike our current callback method, these templates are separated from the PHP that generates the page. Each template defines how a field, like a textbox, should be rendered. Like the WordPress page and post templating system, Ninja Forms will now look in specific locations for HTML files that represent field templates.

So if you wanted to modify how textboxes look, you could drop a new HTML file in your theme/ninja-forms/templates/ folder, and Ninja Forms would load that instead of our default. If you want to change the way that fields are rendered so that they are compatible with Bootstrap or Foundation markup, you can do that without modifying any core files or writing any PHP. Want to swap out our default <div> field wrapper for an <li>? Just change one template file. Want to change the way that the form is wrapped? Great, create a new form wrap template. The new templating system makes Ninja Forms even more flexible than it already is and works hand-in-hand with our decision to render forms on the front-end with Backbone and Underscore.