Diviフォームに入力するときに要素にCSSフォーカス状態スタイリングを追加する方法

ほとんどのWebサイトの主な目標の1つは、フォームの送信です。 これは、企業がセールスリードや電子メールサブスクライバーなどを獲得する方法です。 効果的なウェブデザインは、訪問者にとってフォーム送信をより魅力的にすることができ、エンゲージメントを高める1つの方法は、「記入」プロセス中にフォームにスタイルを追加することです。 これを行うには、CSSのフォーカス状態の力を利用できます。 実際、DiviにはDiviのフォームモジュール（Contact、Email Optinなど）に組み込まれているフォームフィールドのフォーカススタイルオプションがあるため、フォーカス状態でこれらのフォームフィールドのスタイルを設定するために外部CSSに依存する必要はありません。

このチュートリアルでは、訪問者がDiviフォームのフィールドをクリックしたときに、複数の要素のスタイルを変更するエキサイティングな方法を紹介します。 フォーカスされている特定のフィールドにDiviの組み込みフォーカススタイルを追加できるだけでなく、フィールドを囲む要素のスタイルも変更できます。 これにより、微妙なアニメーションとデザインでフォーム送信のUIを改善できます。

始めましょう！

スニークピーク

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

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

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

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

始めるために必要なもの

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

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

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

：focus-withinCSS疑似クラスの使用

Diviには、フォーカス状態でフォームフィールドをスタイル設定するための組み込みオプションがすでにあるため、このチュートリアルでは、そのフォーカススタイルを他の要素にも拡張する方法について説明します。 追加のフォーカス状態のスタイル設定を実現するために、Divi Builderと、 ：focus疑似クラスを使用するカスタムCSSのスニペットをいくつか使用します。

心配しないでください。見た目ほど複雑ではありません。

：focusと：focus-withinの違い

：集中

：hoverと同様に、CSSの：focus疑似クラスは、要素がフォーカス状態にあるときはいつでも、要素にスタイルを適用するために使用されます。 フォーカス状態は通常、フォームの入力フィールドなどの要素をクリックすることでトリガーされます。 たとえば、ユーザーがフォームフィールド内をクリックすると、フィールドのフォーカス状態がアクティブになります。 これにより、 ：focus psuedo-classを使用して、CSSでそのフィールドのスタイルをターゲットにすることができます。

：focus-within

：focus疑似クラスは、フォーカス状態にある要素のスタイルをターゲット（または表現）します。 ただし、 ：focus-within疑似クラスはこれをさらに一歩進めます。 ：focus-within疑似クラスは、フォーカスされている要素のスタイルと、フォーカスされている要素を含む要素のスタイルをターゲットにします。 これは、フォーカスされている要素の任意の親要素をターゲットにして、要素がフォーカスされている間にそれらのスタイルを適用できることを意味します。 つまり、フォームフィールド内をクリックして、フォームフィールドの背景色を変更し（ ：focusを使用）、同時にフォームフィールドの親セクションの背景色を変更する（ ：focus-withinを使用）ことができます。

Diviフォームに入力するときに要素にフォーカス状態のスタイリングを追加する

：focusと：focusがどのように機能するかをある程度理解できたので、このチュートリアルでフォーカス状態のスタイルをいくつか追加してテストしてみましょう。

既成のレイアウトを追加

まず、Travel Blog Contactページの既成のレイアウトを追加して、このチュートリアルのデザインをすぐに開始し、お問い合わせフォームを例として使用できるようにします。 これを行うには、ビルダー設定メニューからライブラリからロードアイコンをクリックします。 [既成のレイアウト]タブで、[Travel Blog Layout Pack]をクリックして、連絡先ページのレイアウトを選択します。 次に、[このレイアウトを使用]ボタンをクリックします。

お問い合わせフォームの設定を更新する

連絡先ページのレイアウトで、連絡先フォームモジュールの設定を開き、タイトルを「GetinTouch」というテキストで更新します。

フィールドフォーカススタイル

[デザイン]タブで、フィールドフォーカススタイルを次のように更新します。

• フィールドフォーカスの背景色：rgba（255,107,90,0.15）
• フィールドフォーカステキストの色：＃000000

これにより、実際のフィールドのフォーカス状態がスタイル設定されます（Divi Builder設定にネイティブなオプション）。

お問い合わせフォームCSSクラス

次に、次のように、[詳細設定]タブの連絡先フォームにカスタムCSSを追加します。

• CSSクラス：divi-form-focus

これは、フォームフィールドがフォーカスされているときにフォームスタイルをターゲットにするために使用するクラスになります。

列設定の更新

次に、お問い合わせフォームの親列の設定を開きます。

パディング

• パディング：上5％、下5％、左3％、右3％

列CSSクラス

[詳細設定]タブで、列に次のCSSクラスを指定します。

• CSSクラス：divi-column-focus

これは、フォームフィールド（子要素）がフォーカスされているときに列スタイルをターゲットにするために使用するクラスになります。

セクションCSSクラスを追加

フォームフィールド（セクションの子要素でもある）がフォーカスされているときにCSSを使用してセクションスタイルをターゲットにするには、連絡先フォームを含むセクションの設定を開き、次のCSSクラスを追加します。

• CSSクラス：divi-section-focus

コードモジュールを使用したカスタムCSSの追加

前に説明したように、フォームフィールドがフォーカスされている場合は、 ： focusCSS疑似クラスを使用して他のDivi要素のスタイルを設定します。 スタイルを設定する要素（フォーム、列、セクション）には、CSSでそれらをターゲットにするために使用できるカスタムクラス（「divi-form-focus」、「divi-column-focus」）が既に与えられています。 、「divi-section-focus」）。

これで、CSSコードを追加するだけです。 これを行うには、お問い合わせフォームモジュールの下にコードモジュールを追加します。

次に、コードコンテンツ領域内に次のコードを貼り付けます。

必ず必要なスタイルタグでコードをラップしてください。

  /*add smooth transitions for focus state styles*/
  .divi-form-focus, .divi-column-focus, .divi-section-focus, .divi-form-focus h2 {
    transition: all 300ms
  }
  
  /*style form module h2 heading in form focus state*/
  .divi-form-focus:focus-within h2 {
    font-size: 14px !important;
    color: #888888;
  }
  
  /*style parent column in form focus state*/
  .divi-column-focus:focus-within {
		background: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0,0,0,0.2);
  }
  
  /*style parent section in form focus state*/
  .divi-section-focus:focus-within {
    background: rgba(255,107,90,0.15);
  }
 

要素のCSSクラス（つまり「divi-column-form」）を持つ各CSSスニペットには、フォームフィールドがフォーカスされているときにその要素クラスのスタイルを表すために、 ：focus-within疑似クラスがあることに注意してください。 1つのスニペットは、フォームのフォーカス状態でフォームのh2（またはタイトル）のスタイルを設定します。 1つのスニペットは、フォームのフォーカス状態で親列のスタイルを設定します。 また、1つのスニペットは、フォームのフォーカス状態で親セクションのスタイルを設定します。

最終結果

これが最終結果です。 フォームに入力するときに、さまざまな要素のスタイルがどのように変化するかに注目してください。

最終的な考え

Diviでフォームに入力するときに要素にCSSフォーカススタイルを追加すると、フォーム送信のユーザーエクスペリエンスを大幅に向上させることができます。 重要なのは、フォームがフォーカス状態のときにスタイルを設定する要素に追加するカスタムクラスとともに：focus-within疑似クラスを使用することです。 これは、ページに最小限のカスタムCSSを追加することで実行できます。独自のカスタムCSSの追加に精通している場合、可能性は計り知れません。

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

乾杯！