ご注意！

この記事にはCSSコードが含まれており、開発者を対象としています。このコードは便宜上提供していますが、コードのカスタマイズやサードパーティの開発についてはサポートしていません。

追加のガイダンスについては、WPBeginnerのカスタムCSSの追加に関するチュートリアルをご覧ください。

閉じる

会話型フォームのキーテキストを変更する

更新：
Markdownを表示

会話型フォームアドオンを使用しており、選択入力フィールドに表示されるキーテキストを変更したいですか？デフォルトでは、アドオンは会話モードでフォームを表示する際に、複数選択入力フィールドに キー A、キー B、キー C などを追加します。ただし、カスタムCSSでこのテキストを変更できます。

デフォルトでは、チェックボックスと複数選択フィールドは、会話型フォームの各オプションに「キー」とそれに続く文字を表示します。

このチュートリアルでは、キーテキストを別のものに変更するCSSスニペットを共有します。

フォームの作成

まず、新しい会話型フォームを作成し、フィールドを追加します。これには、少なくとも1つの チェックボックス フィールドと1つの 複数選択（ラジオボタン）フィールドが含まれます。

フォームを作成し、少なくとも1つのチェックボックスフィールドと1つの複数選択フィールドを含むフィールドを追加します

チェックボックスと複数選択フィールドの違いについて疑問に思っていませんか？

チェックボックスは、ユーザーが固定数の選択肢から項目を選択できるようにします。対照的に、ラジオボタン（複数選択フィールド）は、ユーザーが定義済みの複数の選択肢の中から1つの項目のみを選択できるようにします。必要であれば、チェックボックスフィールドでユーザーが選択できるオプションの数を制限することができます。

キーテキストを変更するためのCSSの追加

このチュートリアルでは、フォームに「キー」という単語を表示したくありません。このテキストを「項目」に変更します。

CSSは、メディアクエリと呼ばれるものの中に配置します。これは、CSSが指定した 最小幅 がない限り適用されないようにCSSに伝える方法です。メディアクエリの詳細については、メディアクエリとは何か、およびその使用方法に関するMozilla Developerガイドをご覧ください。

さて、このテキストを変更するために、サイトにCSSを追加する時間です。以下のCSSをコピーしてサイトに貼り付けるだけです。サイトにCSSを追加する方法がわからない場合は、このチュートリアルを確認してください。

#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item) label:before {
    counter-increment: wpforms-radio;
    content: counter(wpforms-radio, upper-alpha);
    left: 10px;
}
 
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before, 
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before {
      content: counter(wpforms-radio, upper-alpha);
    content: "Item " counter(wpforms-radio, upper-alpha);
  }

このCSSは、チェックボックス および 複数選択 のすべてのフォームフィールド、ならびに チェックボックス項目 および 複数項目 フィールドのような支払いフィールドの キー という単語を 項目 に変更します。単語 項目 をフォームに表示したいものに置き換えるだけです。

注意：このCSSを使用すると、CSS経由で追加されるため、このテキストは翻訳できなくなります。多言語サイトをご利用の場合は、このチュートリアルは推奨されません。

CSSを追加すると、キーテキストの変更を確認できます

よくある質問

これらは、会話型フォームアドオンのプレビューのカスタマイズに関するトップクラスの質問の一部への回答です。

テキストを完全に削除するにはどうすればよいですか？

テキストを完全に削除するには、このCSSをサイトに追加してください。サイトにCSSを追加する支援については、このチュートリアルを参照してください。

#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before {
  content:none;
}
 
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label {
  padding: 9px 9px 9px 9px;
}

これで完了です！会話型フォームのキーテキストを正常に変更しました。

次に、会話型フォーム用の独自の専用スタイルシートを含めたいですか？会話型フォーム用のスタイルシートをエンキューする方法に関するチュートリアルをご覧ください。

タグ：
まだ解決しませんか？ どうすればお手伝いできますか？
最終更新日：2024年12月09日