こんにちは、ハル@haru_elpisです。
自由にフォームを作りたい時に使える「jQuery formBuilder」の紹介です。
jQuery formBuilderとは
jQuery formBuilderというプラグインを使うと、ドラッグ・アンド・ドロップの操作のみでフォームを作成できます。HTMLタグも簡単に挿入できます。要素を選定すると、自動的に順番が決定され、インターネット上で変えられません。XMLとJSONのデータにも対応しています。
操作説明
以下のページにアクセスして右側にあるメニューリストから好きな項目を左側へドラッグ&ドロップしながらフォームを作っていきます。
![](https://harublog-elpis.com/wp-content/uploads/cocoon-resources/blog-card-cache/cdcfa39bade450139796c299443b0cd7.png)
jQuery formBuilder
Drag and drop form building
並べ替えもドラッグで簡単にできるので、直感的にサクサク操作可能です。
各項目の編集からラベルやクラスなども指定ができます。
できあがったら右側のメニューリストの下にある「[{…}]」というボタンをクリックすると、そのフォームのマークアップが表示されます。
![](https://harublog-elpis.com/wp-content/uploads/2021/01/スクリーンショット-2021-01-05-12.15.45-1024x526.png)
後はマークアップをコピペするだけで簡単に使用できます。
まとめ
ドラッグ&ドロップでサクッとフォームのつくりたいという方は、ぜひチェックしてみてはいかがでしょうか。
おわりっ
コメント