お問い合わせ、支払い、サインアップなど、フォームを実装するためのHTMLとCSSのテンプレート -Boilerform

フォームを実装するのが苦手、という人は少なくないと思います。
お問い合わせフォーム、支払いフォーム、サインアップフォームなど、さまざまなプロジェクトで利用されるフォームを実装するのに役立つHTMLとCSSで制作されたテンプレート集を紹介します。

サイトのキャプチャ

Boilerform
Boilerform -GitHub

Boilerformのデモ

デモではフォームに利用するさまざまな要素のパターン、それらを組み合わせて実装されたお問い合わせや支払いフォームを確認できます。

まずは、フォームのパターン ライブラリから。
「Input Field」では、サイズ、プレースホルダー、バリデーションのステータスのさまざまなバリエーションを持つ一般的な入力フィールドが揃っています。ユーザーがデータをできるだけ効率的に入力するのに役立つ属性が追加されています。

フォームのパターン ライブラリ

フォームのパターン ライブラリ

フォームのパターン ライブラリ

フォームのパターン ライブラリ

フォームのパターン ライブラリ

フォームのパターン ライブラリ

プロジェクトで利用されるさまざまなフォームのデモも公開されています。
Boilerformではいくつかの視覚的調整を加えてネイティブなHTMLの検証機能も備えています。表示メッセージは、データ属性を使用してカスタマイズすることができます。

お問い合わせフォームのデモ

お問い合わせフォームのデモ

カード支払いフォームのデモ

カード支払いフォームのデモ

サインアップフォームのデモ

サインアップフォームのデモ

Boilerformの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: HTML

フォームを実装するためのラッパーを用意します。

あとは、パターン ライブラリやデモから必要な要素をコピペします。

sponsors

top of page

©2018 coliss