美しいフォームを作成するための10個のコードスニペット

通常、すべてのWebサイトには、チェックアウトページであろうと単純な連絡先ページであろうと、何らかのフォームが必要です。

フォームが機能することを確認することが重要であるため、使いやすさが一番です。 しかし、信頼できるデザインは常により魅力的であるため、美学も重要です。

デザインのアイデアにこだわるなら、このコレクションが役立つかもしれません。 これは、無料のソースコードを使用した10のフォームデザインのコレクションです。 さまざまな配色、入力フィールドスタイル、活版印刷スタイルなどがあります。

さらに、これらはすべて無料でホストされているため、好みに合わせてコードをコピーしてアラウンドを再生できます。

1.マテリアルデザイン

ここ数年で名声が高まっているGoogleのマテリアルデザイン言語については、誰もが知っています。 マテリアルデザインのコンセプトはAndroidアプリを対象としていましたが、急速にウェブに広がりました。

GoogleのマテリアルUIのミニマリストスタイルが気に入った場合は、JonUhlmannによって作成されたこのマテリアルフォームを確認してください。

CSS / HTMLの前処理のためにSassとPugで実行されます。 また、かなり軽量なフォームであり、マテリアルデザイン要素はすべてのブラウザで同じようにレンダリングされる必要があります。

そこにいるすべてのマテリアルデザイナーにとって、本当にインスピレーションです。

2.海中

水生スタイルで構築されたこの非常にユニークなコンタクトフォームで海に旅行してください。

ページの背景全体が繰り返しパターンを使用して、海水の波を作成します。 しかし、小さなアニメーションの魚は、背景画像からのビューにアニメーション化するまったく別の物語です。

さらに、入力フィールドを選択するたびに、フレンドリーなタコが挨拶のために表示されます。 なんて趣のある！

3.ブートストラップ3フォーム

デフォルトのブートストラップスタイルはかなり退屈であり、この時点で実際に死ぬほど使用されています。 同じ一般的なスタイルのBootstrapサイトを見ると、デザイナーが怠惰すぎてカスタマイズできないか、エクスペリエンスに集中しすぎて気にしないことが想像できます。

このBS3フォームは、Bootstrapフレームワークの上に構築することで正しく機能します。 入力フィールドと送信ボタンのいくつかのスタイル変更を使用して、Bootstrapされたとは決して知らない愛らしいBootstrapフォームを作成します。

BS3レイアウトを実行している場合は、このようにフォームを作り直すことを確実に検討してください。 Bootstrap上に構築されたサードパーティのフレームワークを使用して、よりカスタマイズされた設計を試すこともできます。

4.エレガントな連絡先

Font Awesomeアイコンといくつかの基本的なレスポンシブスタイリングを備えたこのお問い合わせフォームは、まさに他に類を見ないものです。

特に大きなデザインの場合は、フォームにアイコンを追加することを常にお勧めします。 より多くのフィールドを使用すると、より多くの躊躇が生じ、ユーザーは問題なくフォームを飛ぶことを望んでいます。

これらのシンプルなアイコンは、各フィールドに手がかりを追加するため、必要な情報の種類が一目でわかります。

また、少しユニークなものを探している場合は、別のアイコンフォントをミックスに追加してみてください。

5.小さなログイン

時々、小さなものが本当に最高のものです。 そして、このフォームUIは、非常に縮小されたログインフォームを作成することでそれを証明します。

タイポグラフィはフォームデザインで巨大であり、私はログインフィールドで小さい書体を好むことがよくあります。 それは本当にウェブサイトと小さなテキストがレイアウトにどれだけうまく溶け込むかに依存します。

ただし、このフォームには、フォームのプロセスを説明する小さな進行ステップのグラフィックが側面にぶら下がっています。 2つのフィールドしか与えられていないので、これはちょっとばかげているように見えますが、より大きな登録フォームの場合、プログレスバーはユーザーエクスペリエンスにとって非常に貴重であることがわかります。

6.ログインとサインアップのコンボ

ログイン時間を短縮したい場合は、ログインフォームと登録フォームを1つのページにまとめてみてください。 思ったよりずっと簡単で、このpeで素敵なデモを見ることができます。

横にあるログイン/登録リンクをクリックするたびに、フォームを回転させて表示する美しいカスタムアニメーションが表示されます。 すべてjQueryを介して動作しますが、アニメーションはCSSを介して機能することもできます。

しかし、このレイアウトには、切り替え後も「非表示」フォームの下部が表示されるバグが1つあります。 これは、CSSの可視性プロパティを使用するか、位置をもう少し範囲外に移動することで解決できます。

7.黒板の連絡先

これは間違いなくページから飛び出す本当のユニークなフォームスタイルです。 この黒板の接触フォームは、背景のグラデーションを使用して、黒板に反射する光の効果を作成します。

加えて、木製のボーダーは、このことを本物として売るのに役立ちます。

クリエイターのGregSweetは、典型的な人間の手書きのように見えるカスタムWebフォントも使用しています。 これは、フォームに最後の仕上げを追加するのに最適なので、学校に戻ったような気分になります。

8.クレジットカードのチェックアウト

私はたくさんのチェックアウトフォームを見てきましたが、Fabio Ottavianiによるこのデザインは、おそらく私が今まで出会った中で最高のものです。

JavaScriptを使用して入力フィールドの検証を処理しますが、クレジットカードはすべてCSSです。 フォームに打ち込んだ数字に基づいてアニメーション化し、クレジットカードのCVV番号を入力すると後ろに回転します。

9.カスタムサインアップ

純粋なCSSサインアップフォームの場合、このスニペットは実際にビスケットを取ります。 小さなドロップシャドウのある単一のコンテナで休むのはとても簡単な感じです。

ただし、入力フィールドは、それらのアイコンをそれぞれに追加するために必要なスペースを含め、大幅にカスタマイズされています。

フィールドをハイライトすると、境界線がモスグリーンに明るくなります。 アイコンの色も変わることに気付くでしょう！ クレジットカードの選択メニューでさえ、独自のカスタムスタイルがあります。

これは純粋にCSSで作成するにはかなり複雑な効果ですが、開発者のJoseCarneiroがそれを実現しました。

10.フローティングラベル

カスタムフローティングラベルは、フォームデザインで私のお気に入りのトレンドの一部です。 それらは常に使いやすさの向上に役立ち、入力した後でもフィールドの明確な説明を提供します。

CSS3とCompassで実行されているこのフローティングラベルフォームをご覧ください。

作成者のAntonSimanovは、ラベルにjQueryを使用していますが、プラグインなしですべてカスタムコーディングされています。 彼のソリューションは、テキストエリアや選択メニューを含むすべての一般的な入力スタイルで機能することは言うまでもありません。

どんなスタイルのフォームを目指していても、このギャラリーが前進するためのアイデアやスニペットを提供してくれることを願っています。

デザインパターンを研究すればするほど、自分のプロジェクトのために構築しなければならないアイデアが増えます。 そして、CodePenはそれらのアイデアを集めるための素晴らしいサイトです。