Card – クレジットカード入力をかっこうよく表現 // MOONGIFT Archived

Webにおいてクレジットカードの入力は頻繁にあると思います。番号、有効期限、保有者名、CVCの入力が主になると思いますが、その入力フォームをかっこうよくしてくれるのがCardです。

Cardの使い方

こちらは適用前。普通のフォームですね。

そこにこんな感じのJavaScriptを実行します。カスタマイズも可能です。

$('form').card({ container: $('.card-wrapper') });

そうするとこのようなフォームに変化します。

まるで本物のクレジットカードのような表示がされます。

CVCの入力になるとカードが回転するアニメーション付きです。

カードの種類を読み取って表示が変わります。

Cardはインタラクティブな表現なので、入力した内容がそのままカード面に反映されるのが面白いです。また、CVCのようにどこに書いてある項目なのか分かりやすく説明できるのでユーザビリティ向上にもつながりそうです。

CardはJavaScript製のオープンソース・ソフトウェア（MIT License）です。