フローティングラベルでフォームをモダンでインタラクティブな外観にしませんか?フローティングラベルは、ユーザーがフォームフィールドを操作するとアニメーションするフィールドラベルを表示するエレガントな方法を提供します。
このガイドでは、WPFormsを使ってこの機能を実装する方法を紹介します。
フォームの作成
まずは簡単なお問い合わせフォームを作成します。フォームの作成にサポートが必要な場合は、こちらのドキュメントをご覧ください。
フォームに電話番号フィールドがある場合は、フォーマットをUSまたはInternationalに設定する必要があります。このスニペットはスマートフォーマットでは動作しません。
また、各フィールドにプレースホルダー・テキストを追加する必要があります。このテキストは、フィールドを選択し、詳細設定タブをクリックしてテキストを追加することで追加できます。
この方法についてヘルプが必要な場合は、フィールドにプレースホルダー・テキストを追加するガイドをご覧ください。
CSSクラスの追加
次に、CSSクラスに floating をフローティング・ラベルにしたいフィールドに追加する。
各フィールドを1つずつ選択し 上級 タブに追加する。 floating 内 CSSクラス フィールドにいる。
フローティングラベル - PHPスニペット
ラベルをフォームフィールドの上にあったものから、フォームフィールドのすぐ下にあるものにするために、小さなPHPスニペットをいくつか追加します。
あなたのサイトにスニペットを追加する方法と場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。
このスニペットが行っているのは、フィールドの前に表示されていたフィールド・ラベルの位置を削除し、フィールドの後に配置することです。
フローティングラベル - CSSスニペット
フォームが作成され、スニペットが配置されたので、カスタムCSSをサイトに追加して、すべてをまとめる必要があります。
カスタムCSSを追加する方法と場所については、こちらのチュートリアルをご覧ください。
よくあるご質問
Q: フィールドバリデーションは表示されますか？
A:もちろんです！バリデーションエラーは同じスタイルで表示されます。
Q: なぜこれが機能しないのですか？
もしプレースホルダー・テキストをフィールドに配置しなかった場合、ユーザーがフィールド内をクリックしても、ラベルがフローティング効果を持つようには見えません。
これで終わりです！これで、ユーザーがフィールドに入力し始めると、フローティングラベルが浮かび上がるフォームができました。次に、確認メッセージの色を変更しますか、それとも完全に削除しますか？確認メッセージボックスのスタイリングを削除する方法をご覧ください。