リッチテキストフィールドの使用

ユーザーにフォーム送信をカスタマイズさせますか？リッチテキストフィールドは、ユーザーがオンラインフォームを送信する前にテキストや画像をフォーマットするための柔軟な方法を提供します。

このチュートリアルでは、WPFormsのリッチテキストフィールドの開始に必要なすべてを紹介します。

---

開始する前に、まずWPFormsがWordPressサイトにインストールおよびアクティブ化されていること、およびライセンスを検証済みであることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。

フォームへのリッチテキストフィールドの追加

リッチテキストフィールドは高度な機能であるため、フォームビルダーのFancy Fieldsの下にあります。

リッチテキストフィールドをフォームに追加するには、クリックするか、プレビューエリアにドラッグアンドドロップします。

次に、Labelフィールドに希望するテキストを入力して、フィールドのラベルを自由に変更してください。

高度なオプションの有効化

リッチテキストフィールドの高度なオプションにアクセスするには、Field OptionsパネルのAdvancedタブに移動します。

次に、より注目すべき高度なオプションであるField StyleとField Sizeの2つについて説明します。

フィールドスタイル

リッチテキストフィールドには、BasicとFullの2つのスタイルオプションがあります。

基本フィールドスタイル

基本フィールドスタイルは非常にわかりやすく、最小限の機能を持つシンプルなツールバーが含まれています。

Basicスタイルのツールバーオプションのリストを次に示します。

• 太字
• イタリック
• 下線
• 取り消し線
• 箇条書きリスト
• 番号付きリスト
• 引用ブロック
• 左揃え
• 中央揃え
• 右揃え
• 元に戻す
• やり直し
• リンクの挿入/編集

フルフィールドスタイル

フルフィールドスタイルには、基本フィールドスタイルで利用可能なすべての機能に加え、さらに多くの機能が含まれています。追加オプションを表示するには、Toolbar Toggleアイコンをクリックします。

フルフィールドスタイルを選択すると、次の追加オプションが利用可能になります。

• 続きを読むタグを挿入
• 水平線
• テキストの色
• テキストとして貼り付け
• 書式をクリア
• 特殊文字
• インデントを減らす
• インデントを増やす
• キーボードショートカット

さらに、ユーザーは左上隅にあるドロップダウンからさまざまなテキスト形式を選択できるようになります。

フィールドサイズ

選択できるフィールドサイズは3つあります: 小、中、または大。各フィールドサイズによって、リッチテキストフィールドの高さが決まります。

リッチテキストフィールドのフィールドサイズを選択するには、フィールドサイズというラベルのドロップダウンメニューをクリックします。

メディアアップロードの許可

リッチテキストフィールドでは、ユーザーが画像ファイルをアップロードするオプションが提供されます。リッチテキストフィールドからアップロードできるすべての画像タイプのリストを以下に示します。

• .jpg、.jpeg、.jpe
• .gif
• .png
• .bmp
• .tiff、.tif
• .webp
• .ico
• .heic

このオプションを有効にするには、フィールドオプションパネルの一般タブに移動します。次に、メディアアップロードを許可するを選択します。

有効にすると、リッチテキストフィールドのツールバーにメディアアイコンが表示されるようになります。このアイコンをクリックすると、ユーザーは画像ファイルをアップロードできます。

アップロードされた画像を含むリッチテキストフィールドは、次のようになります。

デフォルトでは、ユーザーがアップロードしたファイルは、サイトのアップロードディレクトリ内のWPFormsフォルダに保存されます。

ただし、アップロードされたファイルをWordPressメディアライブラリに自動的に保存したい場合は、WordPressメディアライブラリにファイルを保存するを選択します。

リッチテキストフィールドの使用

サイトのフロントエンドでリッチテキストフィールドを操作する際、ユーザーは2つの異なるモードを切り替えることができます。

• ビジュアル: 画像とテキストはテキストエディタに直接表示されます。
• テキスト: 画像とテキストはHTMLで表示されます。

デフォルトでは、リッチテキストフィールドはビジュアルモードで開始されます。ただし、右上隅にあるビジュアルまたはテキストタブを選択することで、モードを切り替えることができます。

それでは、リッチテキストフィールドにテキストを追加して、2つのモードの違いを見てみましょう。

まず、左上隅のドロップダウンをクリックして見出し3を選択し、見出しを追加します。

次に、画像の上にテキストを入力します。

次に、テキストモードでコンテンツがどのように表示されるかを確認するには、テキストタブをクリックします。ここでは、コンテンツがHTMLで表示されていることがわかります。

外部ファイルの埋め込み

もし投稿送信アドオンを使用している場合、ユーザーが投稿を送信する際に、YouTube動画やSpotifyポッドキャストなどの外部ファイルを埋め込めるようにしたい場合があります。

たとえば、ユーザーはYouTubeのiframe埋め込みコードを使用して、リッチテキストフィールドに動画を埋め込むことができます。技術的には、これにより動画がリッチテキストフィールドに埋め込まれて表示されます。

しかし、WPFormsは、ユーザーがフォームを送信した後、埋め込みコードをサニタイズしてクリーンアップします。これは、攻撃者がコードを使用してウェブサイトの脆弱性を悪用するのを防ぐためのセキュリティ対策です。

投稿送信アドオンを通じて投稿された動画を埋め込みたい場合は、リッチテキストフィールドに動画リンクを直接貼り付けるだけです。WordPressが埋め込みコードを追加し、oEmbedを使用してフロントエンドに埋め込まれたファイルを hiển thị します。

これで完了です！WPFormsのリッチテキストフィールドの使用方法について、いくつかのアイデアが得られました。

次に、訪問者がWordPressダッシュボードにアクセスせずにサイトにコンテンツを投稿できるようにしたいですか？投稿送信アドオンのインストールと使用方法に関するガイドをぜひご覧ください。