ユーザーがフォーム送信をカスタマイズできるようにしたいですか?リッチテキストフィールドは、ユーザーがオンラインフォームを送信する前にテキストや画像をフォーマットする柔軟な方法を提供します。
このチュートリアルでは、WPFormsのリッチテキストフィールドを使い始めるために必要な知識をすべて紹介します。
使い始める前に、まずあなたのWordPressサイトにWPFormsがインストールされ、有効化されていること、そしてライセンスが確認されていることを確認する必要があります。その後、フォームビルダーにアクセスするために新しいフォームを作成するか、既存のフォームを編集することができます。
フォームにリッチテキストフィールドを追加する
リッチテキストフィールドは高度な機能なので、フォームビルダーのファンシーフィールドの下にあります。
リッチテキストフィールドをフォームに追加するには、そのフィールドをクリックするか、プレビューエリアにドラッグ＆ドロップします。
次に、Labelフィールドに好きなテキストを入力して、フィールドのラベルを自由に変更してください。
高度なオプションを有効にする
リッチテキストフィールドの詳細オプションにアクセスするには、フィールドオプションパネルのAdvancedタブに移動します。
次に、より注目すべき2つの詳細オプションについて説明します：フィールドスタイルと フィールドサイズです。
フィールドスタイル
リッチ・テキスト・フィールドには、「ベーシック」と「フル」の2つのスタイル・オプションがあります。
基本的なフィールドスタイル
ベーシック・フィールドのスタイルは、最小限の機能しかないシンプルなツールバーが含まれるため、非常にわかりやすい。
ベーシックスタイルのツールバーオプションの一覧です：
- 太字
- イタリック
- アンダーライン
- 取り消し線
- 箇条書きリスト
- 番号付きリスト
- ブロッククオート
- 左寄せ
- 中央揃え
- 右揃え
- 元に戻す
- やり直し
- リンクの挿入/編集
フルフィールドスタイル
フル・フィールド・スタイルには、ベーシック・フィールド・スタイルで利用可能なすべてのものと、それ以上のものが含まれます。追加オプションを表示するには、ツールバートグルのアイコンをクリックしてください。
以下は、フルフィールドスタイルを選択したときに利用可能になる追加オプションのリストです：
- 続きを読むタグを挿入
- 水平線
- 文字色
- テキストとして貼り付ける
- 明確なフォーマット
- 特殊文字
- インデントを小さくする
- インデントを増やす
- キーボードショートカット
さらに、ユーザーは左上隅にあるドロップダウンから、さまざまなテキスト形式を選択できるようになる。
注：ユーザーが投稿できるコンテンツの長さを管理するために、リッチテキストフィールドに文字数制限を設定することができます。この制限の実装方法については、開発者向けドキュメントをご覧ください。
フィールドサイズ
フィールドのサイズは、小、中、大の3種類から選べます。それぞれのフィールドサイズによって、リッチテキスト・フィールドの高さが決まります。
リッチ・テキスト・フィールドのフィールド・サイズを選択するには、フィールド・サイズと書かれたドロップダウンメニューをクリックしてください。
注：WordPressはInternet Explorer 11のサポートを停止しています。Internet Explorer 11 をお使いの場合、リッチテキスト欄にメディアを追加する機能がフロントエンドで期待通りに動作しない可能性があります。
メディアのアップロードを許可する
リッチ・テキスト・フィールドは、ユーザーが画像ファイルをアップロードするためのオプションを提供します。ここでは、リッチテキストフィールドからアップロードできるすべての画像タイプのリストを示します：
- .jpg, .jpeg, .jpe
- .gif
- .png
- .bmp
- .tiff, .tif
- .webp
- .ico
- ハイック
このオプションを有効にするには、Field OptionsパネルのGeneralタブに移動します。そして、Allow Media Uploadsを選択します。
有効にすると、リッチ・テキスト・フィールドのツールバーにメディア・アイコンが表示されます。このアイコンをクリックすると、ユーザーは画像ファイルをアップロードできます。
リッチ・テキスト・フィールドがアップロードされた画像でどのように見えるかを示します：
デフォルトでは、ユーザがアップロードしたファイルはサイトのUploadsディレクトリのWPFormsフォルダ内に保存されます。
ただし、アップロードしたファイルをWordPress Media Libraryに自動的に保存したい場合は、Store files in WordPress Media Libraryを選択してください。
リッチ・テキスト・フィールドの使用
サイトのフロントエンドでリッチテキスト・フィールドを操作する際、ユーザーは2つの異なるモードを切り替えることができます：
- ビジュアル：画像やテキストはテキストエディタに直接表示されます。
- テキスト：画像とテキストはHTMLで表示されます。
デフォルトでは、リッチテキストフィールドはビジュアルモードで開始されます。しかし、右上のビジュアルまたはテキストタブを選択することで、異なるモードを切り替えることができます。
では、2つのモードの違いを見るために、リッチ・テキスト・フィールドにテキストを追加してみましょう。
まず、左上のドロップダウンをクリックして見出し3を選択し、見出しを追加します。
次に、画像の上にテキストを入力します。
テキスト・モードでコンテンツがどのように見えるかを見るには、テキスト・タブをクリックしてください。ここで、コンテンツがHTMLで表示されるのがわかります。
外部ファイルの埋め込み
Post Submissionアドオンを使用している場合、投稿時にYouTubeビデオやSpotifyポッドキャストなどの外部ファイルを埋め込むことができます。
例えば、ユーザーがYouTubeのiframe埋め込みコードを使用して、リッチ・テキスト・フィールドに動画を埋め込むとします。技術的には、これはリッチ・テキスト・フィールドに埋め込まれた動画を表示することになります。
しかし、WPFormsはユーザがフォームを送信した後に埋め込みコードをサニタイズしてクリーンアウトします。我々は、ウェブサイトの弱点を突くためにコードを使用する攻撃者からユーザーを保護するために、このセキュリティ対策を実装しています。
Post Submissionアドオンを使って投稿された記事に動画を埋め込みたい場合は、リッチテキスト欄に動画のリンクを直接貼り付けるだけです。埋め込みコードの追加とフロントエンドでの埋め込みファイルの表示は、oEmbedsを使用してWordPressが行います。
注：oEmbedをサポートしているサイトのリストについては、WordPressの公式ドキュメントを参照してください。
以上です！これでWPFormsのリッチテキストフィールドの使い方のヒントが得られました。
次に、訪問者がWordPressダッシュボードにアクセスせずにサイトにコンテンツを投稿できるようにしたいですか？Post Submissionsアドオンのインストールと使用方法についてのガイドをぜひご覧ください。