WordPressフォームにアイコンを追加する

更新日:
Markdownを表示

フォームにアイコンを追加しませんか？アイコンは、フィールドの目的を視覚的に補強するのに役立ち、フォームをよりカスタマイズされた外観にすることができます。

このチュートリアルでは、Font Awesomeのアイコンをフォームに追加する方法について説明します。

WPFormsでのアイコンの使用

サイトにFont Awesomeを追加する

最初のステップは、Font Awesomeのアイコンライブラリをサイトに追加することです。Font Awesomeは、アイコンがフォントとして機能し、サイトの他のフォントと同じ色とサイズを採用するため、フォームにアイコンを追加するのに最適なオプションです。

サイトのヘッダーにコードを追加する方法からプラグインをインストールする方法まで、Font Awesomeアイコンライブラリをサイトに追加する方法はたくさんあります。各オプションの詳細については、WPBeginnerのアイコンフォントをWordPressに追加する方法ガイドを参照してください。

簡単にするために、Better Font Awesomeプラグインを使用します。これは、Font Awesomeアイコンを使用するために必要なリソースをサイトに追加する無料のWordPressプラグインです。

準備ができたら、プラグインをインストールしてください。有効化され次第、チュートリアルの次のステップに進むことができます。

Font Awesomeからアイコンを選択する

サイトでFont Awesomeを使用できるようになると、フォームで使用したいアイコンの検索を開始できます。

注意： Font Awesomeは無料と有料のアイコンの両方を提供しています。Font Awesomeサイトの左側のメニューを使用して、無料アイコンのみを表示できます。

使用したいアイコンのページで、アイコン名のすぐ下に表示されているUnicode値を探してください。

Font Awesome アイコンのUnicodeを見つける

上の画像では、Unicodeはf1d8です。

フォームで使用したい各アイコンのUnicodeをメモしておいてください。このチュートリアルの後半でカスタムCSSスニペットに含める必要があるためです。

フォームにアイコンを追加する

フォームにアイコンを組み込む方法はいくつかあります。以下にいくつかの例を挙げましたが、それらに飛び込む前に注意すべき点がいくつかあります。

まず、以下のほとんどの例では、WordPressサイトにカスタムCSSを追加する必要があります。その方法の詳細については、サイトにカスタムCSSを追加する方法に関するWPBeginnerのステップバイステップガイドを参照してください。

注意：特に、このチュートリアルのCSSをテーマのスタイルシートに追加する場合は、子テーマの使用を強くお勧めします。子テーマの作成方法の詳細については、子テーマの作成方法に関するWPBeginnerのガイドを参照してください。

さらに、CSSスニペットで使用する必要のあるフォントファミリーは、Font Awesomeの無料アイコンを使用するか有料アイコンを使用するかによって異なります。

注意： このチュートリアルでは、無料アイコン用のフォントファミリー"Font Awesome 5 Free"を使用しています。Font AwesomeのProアイコンのライセンスをお持ちの場合は、正しいフォントファミリーを参照していることを確認してください。お使いのバージョンに適したフォントファミリーについては、Font AwesomeのCSS疑似要素に関する公式ドキュメントを確認してください。提供されたスニペットの"Font Awesome 5 Free"を、お使いの特定のフォントファミリーに置き換えるだけです。

フォームタイトルの前にアイコンを表示する

フォームのタイトルの前にアイコンを追加するには、アイコンを挿入するカスタムCSSを作成する必要があります。このCSSは、サイト上のすべてのWPFormsのタイトルの前にアイコンを表示したいのか、それとも特定のフォームのタイトルの前に表示したいのかによって、少し異なります。

すべてのフォームタイトルの前にアイコンを追加する

すべてのフォームタイトルの前にアイコンを表示するためのCSSは、より一般的であるため簡単です。必要なCSSスニペットは次のとおりです。

.wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and backslash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

注意：サイトにCSSを追加する際には、カスタムスタイルが正常に適用されるように、セミコロンの前に!importantを含める必要がある場合があります。詳細については、CSSのトラブルシューティングに関するガイドをご覧ください。

このスニペットには、カスタマイズする必要がある行がいくつかあります。まず、選択したアイコンのFont AwesomeのUnicodeがcontent:の後に含まれていることに注意してください。

この値を、Font Awesomeライブラリの他のアイコンのUnicodeに置き換えることができます。

このCSSには、10ピクセルの右マージンも含まれています。これがないと、アイコンとフォームのタイトルの間にスペースがなくなります。この数値を好きなサイズにカスタマイズできます。

フロントエンドでは、この例は次のようになります。

フォームタイトルの前に追加されたFont Awesomeアイコンの例

特定のフォームタイトルの前にアイコンを追加する

サイト上のすべてのフォームのタイトルの前に同じアイコンを追加する代わりに、より具体的なCSSを使用して単一のフォームをターゲットにすることができます。

そうするには、アイコンを追加したいフォームの固有のID番号を見つける必要があります。

フォームIDは、ショートコードで確認できます。ショートコードは、WPForms » すべてのフォームに移動し、ショートコード列を見ると表示されます。

フォームのショートコードとIDの表示

CSSをより具体的にするためにID番号30を使用します。特定されたフォームのタイトルの前にのみアイコンを追加するCSSは次のとおりです。

#wpforms-30 .wpforms-form .wpforms-title:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and title */
}

このCSSは、サイト上のすべてのフォームタイトルの前にアイコンを追加するスニペットとほぼ同じです。唯一の違いは、#wpforms-form-30を追加したことです。これにより、このスタイルはこのフォームにのみ適用されます。

独自のフォームの場合は、フォームID番号を変更し、表示したいアイコンのUnicodeを、上記のセクションで説明したように置き換えるだけです。

フィールドラベルの前にアイコンを表示する

カスタマイズ可能なCSSスニペットを使用して、フォームの各フィールドラベルの前にアイコンを追加できます。追加する必要のあるコードは、サイト上のすべてのフィールドラベルに1つのアイコンを使用したいのか、それとも特定のフィールドラベルの前にアイコンを表示したいのかによって、わずかに異なります。

すべてのフィールドラベルにアイコンを追加する

サイト上のすべてのフィールドラベルの前にアイコンを表示するには、上記で説明したフォームタイトル用のCSSスニペットと非常によく似たCSSスニペットが必要です。

.wpforms-form .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

スニペット内のUnicodeを、使用したいアイコンのUnicodeに置き換えてください。マージンのサイズもお好みに合わせて調整できます。

フロントエンドでは、フィールドラベルのアイコンは次のように表示されるはずです。

前にFont Awesomeアイコンが付いたフィールドラベル

特定のフィールドのラベルにアイコンを追加する

すべてのフィールドの横に同じアイコンを表示したくない場合があります。単一のフィールドを対象にするには、アイコンを追加したいフィールドの一意のIDを含めることで、CSSスニペットをより具体的にする必要があります。

このアプローチは、上記で説明した単一のフォームのタイトルを対象にするのと非常によく似ています。

スニペットで使用する必要があるフィールドIDを見つけるには、公開されているページまたはフォームプレビューを使用して、フロントエンドでフォームを開きます。次に、対象とするフィールドを右クリックし、Inspectを選択します。

ブラウザインスペクターを使用してフォームプレビューのフィールドのHTMLを表示する

画面が分割され、ページのソースコードが表示されます。対象とするフィールド全体（ラベルと入力ボックスを含む）がハイライトされていることを確認し、IDを探します。

ブラウザインスペクターでフィールドIDを表示する

注意:ブラウザのインスペクターを使用して見つけられるフィールドIDは、フォームビルダーで見られるフィールドIDとは異なります。

特定のフィールドラベルにアイコンを追加するためにCSSスニペットをカスタマイズする場合は、フォームビルダーのフィールドIDではなく、インスペクターから取得した完全なフィールドIDを使用してください。

上記の画像内のフィールドのIDはwpforms-9-field_0-containerです。

特定のフィールドのラベルにアイコンを追加するためのCSSスニペットは次のとおりです。

.wpforms-form #wpforms-9-field_0-container .wpforms-field-label:before { 
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and label */
}

このCSSスニペットの最初の行を確認すると、#の後に見つけたIDが追加されていることがわかります。これで、この単一のフィールドにのみアイコンが追加され、他のフィールドラベル（このフォームまたは他のフォームの）は変更されません。

入力フィールドにアイコンを表示する

フィールドのラベルにアイコンを追加する代わりに、フィールド自体内に表示することもできます。これを行うために使用する必要があるコードスニペットは、このチュートリアルの他のものとはかなり異なりますが、多くの同じ要素を使用しています。

#wpforms-form-9 .wpforms-field,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block {
	position: relative;
}

#wpforms-form-9 input[type="text"],
#wpforms-form-9 input[type="email"],
#wpforms-form-9 textarea {
	padding-left: 35px !important;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label {
	position: relative;
}

#wpforms-form-9 .wpforms-field .wpforms-field-label:before,
#wpforms-form-9 .wpforms-field .wpforms-field-row-block:before {
	position: absolute;
	left: 10px;
	top: 32px;
	z-index: 99999;
	color: #757575;
	font-size: 17px;
	opacity: 0.3;
}

#wpforms-9-field_0-container .wpforms-field-label:before,
#wpforms-9-field_1-container .wpforms-field-label:before,
#wpforms-9-field_2-container .wpforms-field-label:before {
	font-family: "Font Awesome 5 Free";
}

#wpforms-9-field_0-container .wpforms-field-label:before {
	content: '\f007';
}

#wpforms-9-field_1-container .wpforms-field-label:before {
	content: '\f0e0';
}

#wpforms-9-field_2-container .wpforms-field-label:before {
	content: '\f086';
}

このスニペットでカスタマイズする必要がある部分は次のとおりです。

  • #wpforms-form-9の数値を、アイコンを追加したいフォームのIDに変更してください。このIDは、このチュートリアルの前の部分で説明されているように、フォームのショートコードで見つけることができます。
  • スニペット内のwpforms-9-field_0-containerおよびその他のフィールドIDを、自分のフォームのフィールドIDに置き換えてください。この記事の前のセクションで説明されているように、完全なフィールドIDを使用する必要があります。
  • 上記のスニペット内のUnicode（f007、f0e0、f086）を、使用したいFont AwesomeアイコンのUnicodeに置き換えてください。

このサンプルスニペットは、フォームの3つのフィールドにアイコンを追加します。#wpforms-9-field_0-container .wpforms-field-label:before,と表示される行を繰り返し、独自のフォームIDとフィールドIDを追加することで、さらに多くのフィールドにアイコンを追加できます。

次に、スニペットの最後の行を繰り返し、例のフィールドIDを自分のフィールドIDに置き換えます。

注意: このスニペットは、次のフィールドタイプとのみ互換性があります。

  • 一行テキスト
  • 段落テキスト
  • 名前
  • Eメール
  • ウェブサイト / URL

これらの行を削除して、フォームのフィールド数を減らすこともできます。

最後に、アイコンの外観を変更したい場合は、次の行の値を変更することで、位置、色、サイズ、および不透明度を調整できます。

position: absolute; 
left: 10px; 
top: 32px; 
z-index: 99999; 
color: #757575; 
font-size: 17px; 
opacity: 0.3;

フロントエンドでは、私たちの例は次のようになります。

アイコンが追加されたテキストフィールド

HTMLフィールドにアイコンを表示する

HTMLフィールドにアイコンを追加するのは最も簡単なオプションであり、カスタムCSSは必要ありません。

必要なのは、HTMLフィールド内に簡単なショートコードを追加することだけです。例として、上記のいくつかの例で使用した紙飛行機のアイコンに必要なショートコードを次に示します。

[icon name="paper-plane"]

これを別のアイコンに合わせて調整するには、Font Awesomeの特定のアイコンのページから名前をコピーするだけです。アイコン名は、ページの上部近くの大きなテキストに表示されます。

Font Awesomeアイコンの名前

次に、上記のショートコードのpaper-planeを、使用したいアイコンの名前に置き換えます。

フロントエンドでは、HTMLフィールドのアイコンは次のようなものになります。

HTMLフィールド内のFont Awesomeアイコン

HTMLフィールドでは、必要に応じてアイコンショートコードの周りにテキストやHTMLを追加することもできます。詳細については、HTMLフィールドの完全なチュートリアルを参照してください。

送信ボタンにアイコンを追加する

このチュートリアルで共有する最後の例は、フォームの送信ボタンにアイコンを追加する方法です。

必要なスニペットは次のとおりです。

.wpforms-form button[type=submit]:before {
    content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: "Font Awesome 5 Free";
    margin-right: 10px !important; /* Distance between icon and button text */
}

この記事の他の例と同様に、目的のアイコンのUnicodeを必ず置き換えて、必要に応じてマージンを変更してください。

フロントエンドでは、送信ボタンのアイコンはこれに似たものになります。

アイコン付きの送信ボタン

右側にアイコンを配置する

左側ではなく右側にアイコンを配置したい場合は、:beforeの代わりに:afterを使用できます。たとえば、送信ボタンの右側に紙飛行機のアイコンを配置するには、次のコードスニペットを使用できます。

.wpforms-form button[type=submit]:after {
content: '\f1d8'; /* Unicode for icon, be sure to keep the quotes and forward slash */
font-family: "Font Awesome 5 Free";
margin-right: 10px !important; /* Distance between icon and button text */
}

上記のコードスニペットは、送信ボタンの右側にアイコンを配置します。

右側にアイコンが付いた送信ボタン

これで完了です！これで、フォームのさまざまな要素にアイコンを追加できます。

背景画像を使用してフォームの外観をカスタマイズしたいですか？CSSでフォームに背景画像を追加する方法に関するチュートリアルをご覧ください。

まだ解決しませんか？ どうすればお手伝いできますか？
最終更新日: 2024年5月21日

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。