Custom Field Templates

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.” Form Templating

Register Template File Paths

Field templates are loaded from a collection of file paths. If you are creating a custom template, which does not already exist within Ninja Forms, then you will need to register a new file path from which the template file can be loaded.

Template Structure

Fields are rendered using template files which are loaded by Ninja Forms and assigned by field type. If no template file is found for a specific field type then the template file for the parent field type will be used.

Individual templates files are formatted using the wp.template syntax.

Each template is wrapped in a script tag (of type text/template) and is identified with an id attribute following the convention of tmpl-nf-field-{field_type}.

Below is an example of the textbox field template:

<script id="tmpl-nf-field-textbox" type="text/template">
<input id="nf-field-{{{ }}}" name="nf-field-{{{ }}}" class="{{{ data.renderClasses() }}} nf-element" type="text" value="{{{ data.value }}}" {{{ data.renderPlaceholder() }}} {{{ data.maybeDisabled() }}} {{{ data.maybeDisableAutocomplete() }}} {{{ data.maybeInputLimit() }}}>

view raw
hosted with ❤ by GitHub

Helper Functions

Common functionality is available through helper functions defined by the field view.

Field ID {{{ }}}
Outputs the ID of the field.

Field Value {{{ data.value }}}
Outputs the Value of the field.

Render Field Classes {{{ data.renderClasses() }}}
Renders the field classes at the element level.

Render Placeholder {{{ data.renderPlaceholder() }}}
Renders the placeholder value of the field.

Disabled (maybe) {{{ data.maybeDisabled() }}}
Adds the disabled attribute when appropriate.

Disable Autocomplete (maybe) {{{ data.maybeDisableAutocomplete() }}}
Adds the autocomplete=”off” attribute when appropriate.

Input Limit (maybe) {{{ data.maybeInputLimit() }}}
Adds themaxlength attribute when appropriate.