### [Net Promoter Scoreフィールドのカスタマイズ方法](https://wpforms.com/developers/how-to-customize-the-net-promoter-score-field/)
**公開日:** 2019年11月25日
**著者:** エディトリアルチーム
**抜粋:** CSSを使用すると、Net Promoterフィールドのスタイルを簡単にカスタマイズできます。この記事では、その方法を説明します。
**コンテンツ:**
**Net Promoter Score**フォームフィールドの外観をカスタマイズしたいですか？ 少しのCSSを使用すると、サイト上のこのフォームフィールドの外観を簡単に変更できます。このチュートリアルでは、CSSを使用してこのフィールドのスタイルを変更する方法を説明します。
## フォームフィールドの追加
まず、フォームとフィールドを作成し、**Net Promoter Score**フィールドをフォームに追加してから、このフィールドに必要なオプションを構成する必要があります。
これについてサポートが必要な場合は、[ドキュメントを確認してください](https://wpforms.com/docs/how-to-add-a-net-promoter-score-field-to-wpforms/ "How to Add a Net Promoter Score Field to WPForms")。
## Net Promoter Scoreのカスタマイズ
次に、このCSSをサイトにコピーする必要があります。サイトにCSSを追加する方法についてサポートが必要な場合は、[このチュートリアルを確認してください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for WPForms")。
```
form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td input[type=radio]:checked+label {
background-color: #64B5F6;
}
form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover
{
background-color: #64B5F6;
color: #ffffff;
}
form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover:after {
border: none;
}
```
上記のCSSは、ID **548**のフォームにのみ適用されます。このCSSを保存する前に、フォームIDを自分のフォームIDに合わせて更新する必要があります。
フォームIDの見つけ方についてサポートが必要な場合は、[このチュートリアルを確認してください。](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID")
これで完了です！CSSを使用して**Net Promoter Score**フォームフィールドを正常にカスタマイズしました。**Ratings**フォームフィールドアイコンのスタイルをカスタマイズしたいですか？ [Ratingアイコンの外観をカスタマイズする方法](https://wpforms.com/developers/how-to-customize-the-look-of-the-rating-icons/ "How to Customize the Look of the Rating Icons")に関する記事をご覧ください。
## FAQ
#### Q: 表示されるテキスト（Not At All Likely）を変更するにはどうすればよいですか？
**A:** この表示テキストもCSSで変更できます。
```
form#wpforms-form-548 span.not-likely:before {
content: "Not at all satisfied";
font-size: 14px !important;
}
form#wpforms-form-548 span.extremely-likely:before {
content: "Completely satisfied";
font-size: 14px !important;
}
form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
font-size: 0;
}
```
CSSを使用してフォーム内のテキストを変更または変更した場合、多言語サイトでは翻訳できなくなる可能性があることに注意してください。
**カテゴリ:** スタイリング
**タグ:** CSS, Net Promoter
---