入力フォームをユーザーフレンドリーにする便利なJSプラグイン4つ

入力フォームをユーザーフレンドリーにする便利なJSプラグイン4つ

モモコ

モモコ

お疲れ様です、デザイナーのモモコです。

私がメンバー写真に使っている(`・ω・´)クッションが思った以上に縦に細くて個人的にツボった今日この頃です。

今回は入力フォームを実装する際に入れておくとちょっと便利になるJavaScriptのプラグインを4つご紹介します。

jQuery Label Better

jQuery Label Better

form部品にフォーカスを当てるとplaceholderがふわっと上に移動するプラグイン。

全体的に動きのあるWebサイトを作るときには活躍してくれそうです。

formatter.js

formatter.js

電話番号やクレジットカード番号など、パターンのある数列を1つのform部品内で扱えるようになるプラグイン。

幾つもtext要素を用意せずに済むのでコーディングの時間短縮にもなりそうですね!

jQuery Fullscreen Editor

jQuery Fullscreen Editor

textarea部品にフルスクリーンモードを追加できるプラグイン。

レスポンシブにも対応しており、文字量の多い項目を扱う際には付けてあると利便性がアップしそうです。

ANIMATED CHECKBOXES AND RADIO BUTTONS WITH SVG

ANIMATED CHECKBOXES AND RADIO BUTTONS WITH SVG

checkbox、radioボタンの選択時にアニメーションがつけられるプラグイン。

アニメーション部分はSVGで構成されています。

「項目を選んだ感」が視覚的に分かりやすくなりますね。

まとめ

いかがでしたでしょうか? お問い合わせフォームは直接ユーザーが触る機会の多いページですので、分かりやすく便利に使えるよう、プラグインを上手に利用しましょう。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーのモモコです。ジャンプは単行本派です、よろしくお願い致します。

このメンバーの記事をもっと読む