Diviのフォームフィールドにフローティングラベルを追加する方法

公開: 2021-06-21

Diviのフォームフィールドにフローティングラベルを追加すると、DiviフォームのデザインとUXを微妙でありながら強力な方法で向上させることができます。 通常、（Diviだけでなく）Webサイトのフォームには、ある種の入力フィールドとその入力フィールドのラベルが含まれています。 たとえば、フォームには、テキスト（または名前）を入力できる名前のテキスト入力フィールドと、そのフィールドの入力ボックス（つまり「名前」）のラベルが含まれている場合があります。 このラベルは、フォームのスタイルに応じて表示または非表示になります。 ラベルに加えて、入力フィールドには、ユーザーが入力値を入力するまで表示されたままになる、入力フィールド内の一種の一時的なラベルとして機能するプレースホルダー疑似要素を含めることもできます。 Diviでは、デフォルトのデザインはラベル要素を非表示にし、プレースホルダーテキストのみを表示します。 Diviフォームにフローティングラベルを追加すると、デザイナーは「プレースホルダーのみ」のフォームスタイルの洗練された感触を維持し、ユーザーが値を追加するたびにフィールドの上にラベルを表示（またはフローティング）することができます。

このチュートリアルでは、Diviメールオプションフォームにフローティングラベルを追加する方法を紹介します。 これを行うには、Diviビルダーを使用して電子メールオプションフォームを設計します。 次に、カスタムCSSとJQueryを追加して、ユーザーがフィールドにフォーカスしたときにこれらの非表示のラベルを表示します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

https://youtu.be/j1m14XFztdc

私たちのYoutubeチャンネルを購読する

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

チュートリアルに取り掛かりましょう。

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

  1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
  2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
  3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviのフォームフィールドへのフローティングラベルの追加

メールオプチンフォームの作成

DiviBuilderのデフォルトセクションに1列の行を追加します。

フォームフィールドのdiviフローティングラベル

EmailOptinフォームを列に追加します。

フォームフィールドのdiviフローティングラベル

Email OptinSettingsモーダルを開きます。 [コンテンツ]タブで、タイトルテキストを更新し、本文テキストを削除します。

フォームフィールドのdiviフローティングラベル

メールアカウントサービスプロバイダーをリンクしてください。 そうでない場合、電子メールオプチンはライブページに表示されません。

フォームフィールドのdiviフローティングラベル

次に、次の背景色をメールオプチンに追加します。

  • 背景色：＃1f4b74

フォームフィールドのdiviフローティングラベル

[デザイン]タブで、フォームのレイアウトを更新します。

  • レイアウト：ボディを上に、フォームを下に

フォームフィールドのdiviフローティングラベル

次に、フィールドスタイルを次のように更新します。

  • フィールド背景色：透明
  • フィールドテキストの色：#ffffff
  • フィールドマージン：1.5emトップ
  • フィールドパディング：上0.5em、下0.5em、左1em、右1em
  • フィールドテキストサイズ：1.2em
  • フィールドラインの高さ：2em

フォームフィールドのdiviフローティングラベル

次に、フィールドの境界線のスタイルを更新します。

  • フィールドの丸みを帯びた角：0px
  • フィールド下部境界線幅：2px
  • フィールド下の境界線の色：#ffffff

フォームフィールドのdiviフローティングラベル

タイトルのフォントスタイルも更新しましょう。

  • タイトルフォントの太さ：太字
  • タイトルフォントスタイル：TT
  • タイトルテキストの配置：中央

フォームフィールドのdiviフローティングラベル

それでは、ボタンのスタイルを設定しましょう。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストの色：＃1f4b74
  • ボタンの背景色：#ffffff
  • ボタンの文字間隔：0.1em
  • ボタンのフォントの太さ：太字
  • ボタンのフォントスタイル：TT

フォームフィールドのdiviフローティングラベル

最後のデザインのカスタマイズでは、次のようにフォームに最大幅とパディングを追加しましょう。

  • 最大幅：500px
  • パディング：上5％、下5％、左3％、右3％

フォームフィールドのdiviフローティングラベル

最後に、CSSクラスをモジュールに追加して、次のステップでCSSおよびJQueryコードを使用してモジュールをターゲットにできるようにする必要があります。

フォームフィールドのdiviフローティングラベル

カスタムコードの追加

カスタムCSSとJQueryを追加するには、メールオプトインフォームモジュールの下にコードモジュールを追加します。

フォームフィールドのdiviフローティングラベル

CSS

コードコンテンツボックスに、次のCSSを貼り付けて、CSSが必要なスタイルタグでラップされていることを確認します。 

.et-float-labels p {
  position: relative !important;
}

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

フォームフィールドのdiviフローティングラベル

JQuery

終了スタイルタグの下に、次のJQueryを貼り付け、必要なスクリプトタグでラップします。 

jQuery(document).ready(function ($) {
  var $floatLabelInput = $(".et-float-labels .input");
  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });
  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });
});

フォームフィールドのdiviフローティングラベル

コードの分解

CSSについて

まず、フィールドをターゲットにして相対位置を指定し、ラベル要素にフィールド（またはp要素）内の絶対位置を指定できるようにします。 

.et-float-labels p {
  position: relative !important;
}

次に、フォーム上のラベル要素と絶対位置を、配置テキストと重なるようにラベルテキストを配置する他のスタイルで指定します。 display：blockは、デフォルトのdisplay：hiddenプロパティをオーバーライドして、ラベルを表示できるようにします。 次に、可視性を非表示にして非表示にします。 

.et-float-labels .et_pb_contact_form_label {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 1em;
  padding: 0 1em;
  transform: translateY(0%);
  transform-origin: left;
  color: #ffffff;
  font-size: 1.2em;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 0;
}

次に、JQeuryによって制御される「アクティブ」クラスを受け取ったら、上向きのスライドアニメーションでラベルを表示、拡大縮小、および変換（移動）します。 

.et-float-labels .et_pb_contact_form_label.active {
  visibility: visible;
  opacity: 0.6;
  top:0;
  transform: translateY(-100%) scale(0.9);
}

CSSの残りの部分は、トランジションでプレースホルダーを非表示にすることです。 プレースホルダーの疑似要素をターゲットにするためにブラウザーごとに異なるプレフィックスが必要になるため、これを行うには多くの行があります。 ただし、考え方は単純です。プレースホルダーの色を透明に変更します。 

.et_pb_module.et-float-labels form p .input::-webkit-input-placeholder {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.et_pb_module.et-float-labels form p .input::-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-ms-input-placeholder {
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.et_pb_module.et-float-labels form p .input:-moz-placeholder {
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}  
.et_pb_module.et-float-labels form p .input::placeholder {
  transition: all 0.4s ease-in-out;
}

.et_pb_module.et-float-labels form p .input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-moz-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus:-ms-input-placeholder {
  color: transparent !important;
}
.et_pb_module.et-float-labels form p .input:focus::placeholder {
  color: transparent !important;
}

JQueryについて

まず、変数$ floatLabelInputを各フォームフィールドの入力要素として定義します。

  var $floatLabelInput = $(".et-float-labels .input");

次に、入力要素にフォーカスがあるときはいつでも、ラベル要素（入力要素の前の兄弟）にクラス（「アクティブ」）を追加する関数を備えたフォーカスイベントハンドラーを使用します。 「アクティブ」クラスがラベルに追加されると、ラベルが表示され、拡大縮小され、対応するCSSを使用して入力の上の所定の位置に移動されます。

  $floatLabelInput.on("focus", function (e) {
    $(e.target).prev().addClass("active");
    e.stopPropagation();
  });

最後に、ラベルの「アクティブ」クラスをいつ保持するかを決定する関数を使用して、blurイベントハンドラーを使用します。 入力に値がない場合、入力フィールドにフォーカスがない場合でもアクティブのままになります。 値がない場合、クラスは削除され、フィールドのデフォルト状態が返されます。

  $floatLabelInput.on("blur", function (e) {
    if (!$(e.target).val()) {
      $(e.target).prev().removeClass("active");
    } else {
      $(e.target).prev().addClass("active");
    }
  });

（「クリック」の代わりに）「フォーカス」および「ブラー」イベントハンドラーを使用してクラスを追加および削除すると、ユーザーはキーボードのみを使用してナビゲートする場合（つまり、Tabキーを押してフィールドを循環する場合）でも効果を確認できます。

最終結果

これは、Diviメールオプションフォームのフォームフィールドのフローティングラベルの最終結果です。

最終的な考え

Diviフォームにフローティングラベルを追加することはそれほど難しくありません。 電子メールオプションフォーム（または任意のDiviフォーム）の設計は驚くほど簡単です。 ただし、フローティングラベルを追加するときは、フォームフィールドのサイズと間隔をカスタマイズして、フローティングラベルに適切なスペースを残すようにしてください。 その後、カスタムCSSを使用して、ユーザーがフィールドにフォーカスしたときにプレースホルダーを効果的に非表示または表示します。 プレースホルダーの疑似要素をターゲットにするためにブラウザーごとに異なるプレフィックスが必要なため、それらを正しく取得することが重要です。 追加したJQueryは、必要に応じてビューにフロートするラベル要素のクラスを追加および削除します。 全体として、これはユーザーエクスペリエンスを向上させる堅実なマイクロインタラクションです。

他のDiviフォーム（ログインフォームやお問い合わせフォームなど）でも、これと同じプロセスを自由に使用してください。 カスタムコードを追加する前に、フォームにカスタムクラスを追加することを忘れないでください。 その後、フォームフィールドのデザイン設定を微調整して、フローティングラベル用の十分なスペースがあることを確認する必要がある場合があります。

コメントでお返事をお待ちしております。

乾杯！