リッカート尺度フィールドテーブルのカスタマイズ方法

WPFormsのリッカート尺度フォームフィールドのスタイリングをカスタマイズしますか？ このフィールドのスタイリングをサイトのブランディングカラーに合わせたい場合は、このチュートリアルで方法を説明します。リッカート尺度フォームフィールドをカスタマイズするために必要な基本的なCSSの例をご紹介します。

フォームの作成

まず、フォームを作成し、リッカート尺度を含むフォームフィールドを追加します。

リッカート尺度フォームフィールドを含むフォームの作成についてサポートが必要な場合は、ドキュメントを確認してください。

リッカート尺度のカスタマイズ

次に、このCSSをサイトにコピーする必要があります。

方法がわからない場合は、このチュートリアルを確認してください。

form#wpforms-form-971 .wpforms-field-likert_scale table.classic thead tr {
    background-color: #FFE0B2;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=checkbox]:checked+label:after {
    background-color: #FF9800;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td label:hover:after{
    border: 1px solid #EF6C00;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) td {
    background-color: #FFE0B2;
}

上記のスタイリングは、偶数行と奇数行の色、およびチェックされたオプションの色を変更します。このCSSは、リッカート尺度のモダンまたはクラシックスタイルもカバーしています。

-971を変更する必要があります。これは例のフォームIDです。ご自身のフォームIDに一致するようにこの数値を更新する必要があります。

フォームIDの検索にヘルプが必要な場合は、このドキュメントを確認してください。

これで完了です！ CSSを使用するだけで、フォームのリッカート尺度のスタイリングをカスタマイズできます。ネットプロモータースコアフォームフィールドのスタイリングもカスタマイズしますか？ ネットプロモータースコアフィールドのカスタマイズ方法のチュートリアルをお試しください。

よくある質問

Q: オプションの単語の折り返しを削除するにはどうすればよいですか？

A: デフォルトでは、WPFormsはCSSを使用してテキストに単語の折り返しを追加します。追加のCSSを追加することで、これを削除できます。

-971をご自身のフォームIDに合わせて変更することを忘れないでください。

form#wpforms-form-971 .wpforms-field-likert_scale table.classic th, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern th {
    word-break: auto-phrase;
}