formBuilder

JavaScript

ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

formBuilderはドラッグ&ドロップでフォームを手軽につくることができるjQueryプラグインです。ボタンやチェックボックスなどさまざまなフォームのメニュー項目が用意されています。ラベルなども自由に編集できるので、効率よくフォームを作成したい方にはとても便利ですね。

formBuilder

デモ

右側にあるメニューリストから好きな項目を左側へドラッグ&ドロップしながらフォームをつくっていきます。

並べ替えもドラッグで簡単にできるので、直感的にサクサク操作可能です。

メニューにはButton、Checkbox、Checkbox Group、Date Field、File Upload、Header、Paragraph、Radio Group、Select、Text Field、Text Areaがあります。

各項目の編集からラベルやクラスなども指定できるのがいいですね。手軽にフォームを作成できるのはもちろん、カスタマイズ性にも優れているのがGoodです。

できあがったら右側のメニューリストの下にある「</>」というボタンをクリックすると、そのフォームのマークアップが表示されます。

というわけで、ドラッグ&ドロップでサクッとフォームのつくりたいという方は、ぜひチェックしてみてはいかがでしょうか?

formBuilder

関連記事

  1. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  2. Responsive Parallax Drag-slider With Transparent Letters
  3. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  4. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  5. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

  6. Uglipop.js

    JavaScript

    軽量でミニマルなモーダルボックスを実装できる「Uglipop.js」

    Uglipop.jsは軽量でミニマル、カスタマイズ性にも優れたモーダル…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP