ネットプロモータースコアフィールドのカスタマイズ方法

ネットプロモータースコアフォームフィールドの外観をカスタマイズしますか？ 少しのCSSを使用することで、サイト上のこのフォームフィールドの見た目を簡単に変更できます。このチュートリアルでは、CSSを使用してこのフィールドのスタイルを変更する方法を説明します。

フォームフィールドの追加

まず、フォームとフィールドを作成し、ネットプロモータースコアフィールドをフォームに追加してから、このフィールドのオプションを設定する必要があります。

これについてサポートが必要な場合は、ドキュメントを確認してください。

ネットプロモータースコアのカスタマイズ

次に、このCSSをサイトにコピーする必要があります。サイトにCSSを追加する方法についてサポートが必要な場合は、このチュートリアルを確認してください。

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の見つけ方についてサポートが必要な場合は、このチュートリアルを確認してください。

これで完了です！ CSSを使用してネットプロモータースコアフォームフィールドを正常にカスタマイズしました。レーティングフォームフィールドアイコンのスタイルをカスタマイズしますか？ レーティングアイコンの外観をカスタマイズする方法の記事をご覧ください。

よくある質問

Q: 表示されるテキスト（全く可能性がない）を変更するにはどうすればよいですか？

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;
}