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を追加する必要があります。その方法の詳細については、WPBeginnerのサイトにカスタムCSSを追加する方法のステップバイステップガイドを参照してください。

注意: 特に、このチュートリアルの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 を表示する

ID番号30を使用して、CSSをより具体的にします。これは、特定されたフォームのタイトルの前にのみアイコンを追加する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を追加したことです。これにより、このスタイルは1つのフォームにのみ適用されます。

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

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

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

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

サイト上のすべてのフィールドラベルの前にアイコンを表示するには、上記でフォームタイトルのために説明したスニペットと非常によく似た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を見つけるには、公開されているページでフォームをフロントエンドで開くか、フォームプレビューを使用します。次に、対象にしたいフィールドを右クリックして、検証を選択します。

ブラウザインスペクターを使用してフォームプレビューのフィールドの 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は、このチュートリアルの earlier で説明されているように、フォームのショートコードで見つけることができます。
  • スニペット内の wpforms-9-field_0-container およびその他のフィールドIDを、自分のフォームのフィールドIDに置き換えてください。この記事の前のセクションで説明されているように、完全なフィールドIDを使用する必要があります。
  • スニペット内のユニコード (f007、f0e0、f086) を、使用したいFont Awesomeアイコンのユニコードに置き換えてください。

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

次に、スニペットの最後の行を繰り返し、例のフィールドIDを独自のフィールドIDに置き換えてください。

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

  • Single Line Text
  • Paragraph Text
  • Name
  • Email
  • Website / 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 */
}

この記事の他の例と同様に、希望するアイコンのユニコードを置き換え、必要に応じてマージンを変更してください。

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

アイコン付き送信ボタン

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

アイテムの左側ではなく右側にアイコンを配置したい場合は、: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万人以上のウェブサイト所有者に加わりましょう。