このプラグインは WordPress の最新3回のメジャーリリースに対してテストされていません。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。

Ninja Forms Blocks

説明

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

スクリーンショット

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

インストール

  1. Upload njf_blocks folder to the /wp-content/plugins/ directory
  2. 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%;
}

評価

2018年1月8日
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.
2016年9月3日
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?
2016年9月3日
usefull plugin for ninja form thank you, it create perfectly 2 column. By the is there possible to create 3 column / 4column?
2016年9月3日
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.
8件のレビューをすべて表示

貢献者と開発者

Ninja Forms Blocks はオープンソースソフトウェアです。以下の人々がこのプラグインに貢献しています。

貢献者

“Ninja Forms Blocks” をあなたの言語に翻訳しましょう。

開発に興味がありますか ?

コードを閲覧するか、SVN リポジトリをチェックするか、開発ログRSS で購読してみてください。

変更履歴

1.2

  • Blocks removed from places not realated to form layout

1.1

  • Blocks moved to layout section

1.0

  • Blocks functionality