This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

Ninja Forms Blocks

Description

Ninja Forms Blocks is really simple plugin adding two form elements: [BLOCK] and [/BLOCK].
[BLOCK] is a html div element with custom class option. Using blocks you can:

  • Separate your form elements by logic
  • If you use some bootstrap like framework create columns using classes .col.col-6
  • Create or apply your CSS to form elements groups

Screenshots

  • Add open [BLOCK] and close [/BLOCK] to your Ninja Form
  • Add custom class to [BLOCK]

Installation

  1. Upload njf_blocks folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress
  3. add open [BLOCK] and close [/BLOCK] to your Ninja Form
  4. add css code for your blocks

FAQ

How I can create two columns layout with custom css?

Create two columns with blocks in form editor, add
njf-column njf-column__left
classes to first [BLOCK] and
njf-column njf-column__right
classes to second [BLOCK].
Then add this code to your CSS file (thanks @ronherren):
.njf-column {
display: -moz-inline-stack; /* Firefox inline-block fix /
display: inline-block;
vertical-align: top; /
Align both columns to top /
zoom: 1; /
IE inline-block fix /
*display: inline; /
IE inline-block fix */
width: 49.5%;
}

Reviews

January 8, 2018
My client built all their Ninja forms using this, and now I cannot use the latest Ninja Form, because this add-on does not support it. Author promised to fix it 2 years ago, but nothing has been done.
September 3, 2016
Exactly was I was looking for. I really like to use the css classes built into my theme, Ninja Forms Blocks makes that possible. Now, @Alexander Chernovm, do you plan to test this fine plugin with WordPress 4.5 and Ninja Forms 3 once that arrives?
September 3, 2016
usefull plugin for ninja form thank you, it create perfectly 2 column. By the is there possible to create 3 column / 4column?
September 3, 2016
Until I found the following CSS fixes I would've rated lower, but the simplicity of your solution Alexander is remarkable. Excellent plugin! May I suggest you add the following to your default CSS instructions & FAQ? /* Ninja Forms Blocks - adds 2 columns to forms */ .njf-column { display: -moz-inline-stack; /* Firefox inline-block fix */ display: inline-block; vertical-align: top; /* Align both columns to top */ width: 49.5%; } Also, here is a fix for IE6/7, which I didn't test. Add to above section: zoom: 1; *display: inline; Props to Ryan Doherty of Mozilla.com for this detailed explanation of cross-browser support for inline-block, which also includes an additional fix for IE6 min-height.
Read all 8 reviews

Contributors & Developers

“Ninja Forms Blocks” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Ninja Forms Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

1.2

  • Blocks removed from places not realated to form layout

1.1

  • Blocks moved to layout section

1.0

  • Blocks functionality