AI要約
フォームにカスタムHTMLを組み込みたいですか？WPFormsのHTMLフィールドを使用すると、それが可能です。これは、テキスト、リンク、その他の要素をフォームに追加する場合に役立ちます。
このチュートリアルでは、WPFormsのHTMLフィールドで利用可能なすべてのオプションと、その使用例について説明します。
この記事の内容
さらに進む前に、WordPressサイトにWPFormsがインストールされ有効化されており、ライセンスが確認済みであることを確認してください。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。
フォームにHTMLフィールドを追加する
HTMLフィールドは高度な機能であるため、フォームビルダーのFancy Fieldsの下にあります。
フォームに追加するには、クリックするか、プレビューエリアにドラッグアンドドロップします。
HTMLを追加する以外に設定する必要があるフィールドオプションはラベルのみです。提供されたフィールドに好きなテキストを入力できます。
他のフィールドとは異なり、HTMLフィールドのラベルは、プレビューエリアで識別するのに役立つように、フォームビルダーでのみ表示されます。ユーザーはフロントエンドでは表示されず、フィールドはフォームのエントリに含まれません。
注意：フォームで通知メールを設定している場合、HTMLフィールドの内容は通知メールに含まれません。
HTMLフィールドの使用
HTMLフィールドの使用の基本は非常に簡単です。フィールドオプションパネルの提供されたフィールドにテキストまたはHTMLを入力するだけです。
ただし、このフィールドにはさまざまなユースケースがあります。非常に柔軟性が高く、さまざまな状況に適応できます。
以下に、最も人気のあるユースケースのいくつかを詳しく説明します。
注意：フォームのHTMLフィールドにショートコードを追加したいですか？その方法に関する完全なチュートリアルについては、開発者向けドキュメントをご覧ください。
フォームにスタイル付きテキストを追加する
HTMLフィールドは、入力方法の説明や、ユーザーがエントリを送信する前に表示したい重要な情報など、フォームに追加のテキストを追加する多くの方法の1つです。
ただし、HTMLフィールドは、太字テキストや斜体などのスタイル付きテキストを含めることができる点でユニークです。フィールドオプションパネルのコードフィールドに適切なHTMLタグを直接追加できます。
注意：HTMLが初めての場合は、Mozilla Developer NetworkのHTMLリファレンスページでHTML要素と属性の完全なリストを見つけることができます。
フロントエンドでは、上記の例は次のようになります。
さらに、HTMLタグを使用して、フォームの追加テキストに見出し、リストなどを追加できます。
フォームにリンクを追加する
HTMLフィールドを使用すると、フォームにリンクを追加することもできます。これは、フォームに入力しながら別のページにすばやくアクセスできるようにしたい場合に役立ちます。
HTMLフィールドにリンクを追加するには、<a>タグを使用する必要があります。まず、リンクのアンカーとして使用したいテキストの前後に開始タグと終了タグを追加します。
次に、開始タグにhref属性を追加し、リンクしたいURLに設定します。
フロントエンドでは、フォーム内のクリック可能なリンクとして表示されます。
注意: HTMLでリンクを作成するための詳細については、Mozilla Developer Networkのハイパーリンクの作成ガイドを参照することをお勧めします。
フォームに画像を埋め込む
<img>要素を使用して、フォームに画像を追加することもできます。これを行うには、[フィールドオプション]パネルの[コード]フィールドに<img>を追加します。
次に、画像のsrcまたはソースURLを追加する必要があります。フォームに追加する画像がWordPressメディアライブラリにある場合は、[添付ファイルの詳細]を確認してそのURLを見つけることができます。
ファイルURLはウィンドウの下部にあり、ボタンをクリックしてクリップボードにコピーできます。
次に、HTMLフィールドの<img>要素に追加します。
HTML属性を使用して、画像のサイズを変更したり、代替テキストを追加したりすることもできます。フロントエンドでは、次のようなものになります。
注意: HTMLを使用してフォームに画像を追加することについてさらにヘルプが必要な場合は、Mozilla Developer NetworkのHTMLでの画像に関するチュートリアルを参照することをお勧めします。
フォームに動画を埋め込む
この記事で説明する最後のユースケースは、フォームに動画を埋め込むことです。これを実現するには、<iframe>と呼ばれるHTML要素を使用する必要があります。
注意: iframeとその仕組みの詳細については、WPBeginnerのこの用語の用語集エントリを参照してください。
まず、[フィールドオプション]パネルの[コード]フィールドに<iframe></iframe>要素を追加します。
次に、埋め込みたい動画のsrcを追加する必要があります。使用している動画をWordPressメディアライブラリにアップロードした場合は、前のセクションで説明したようにファイルURLを見つけることができます。
YouTube動画の場合は、[共有] » [埋め込み]をクリックして、iframe全体をコピーし、HTMLフィールドに貼り付けることができます。
srcをHTMLフィールドに追加したら、HTML属性を使用してiframeのサイズなどを変更できます。フロントエンドでは、次のようなものになります。
注意: iframeの使用に関する完全なチュートリアルについては、Mozilla Developer Networkのiframe要素に関する記事を確認してください。
よくある質問
これらは、HTMLフィールドについてよく受ける質問の一部です。
フォームのHTMLフィールド内でスマートタグを使用できますか？
はい、スマートタグはフォーム内でデータを動的に取得および表示する方法ですが、HTMLフィールドではデフォルトで処理されません。ただし、簡単なPHPスニペットを使用すると、これらのフィールドでスマートタグを有効にできます。
この機能の実装方法の詳細については、開発者ドキュメントを参照してください。
注意：これには、サイトにコードを追加するなど、高度な機能が必要となるため、開発者向けです。
以上です！これで、WPFormsのHTMLフィールドの使用方法について、いくつかのアイデアが得られました。
次に、フォームにカスタムCSSを追加する方法について学習しますか？私たちの初心者向けチュートリアルには、開始するために必要なすべてが含まれています。