WPFormsの評価フィールドアイコンの見た目をもっと良くしたいですか？フォームビルダーは基本的な色とアイコンのオプションを提供しますが、CSSを使用してより洗練されたスタイリングを実現することができます。
このガイドでは、あなたのブランドにマッチしたユニークな外観のために、評価アイコンをカスタマイズする方法を紹介します。
フォームの設定
まず、フォームを作成し、評価 フィールドを追加します。まずはフォームビルダーでお好みのアイコンと色を選択してください。フォームの作成にヘルプが必要な場合は、最初のフォーム作成ガイドをご覧ください。
カスタム・アイコン・スタイルの追加
評価アイコンをカスタマイズするには、このCSSをサイトに追加してください。カスタムCSSの追加方法がわからない場合は、カスタムCSSの追加方法をご覧ください。
form#wpforms-form-1000を実際のフォームIDに置き換えてください。フォーム ID を見つけるのに助けが必要な場合は、フォームとフィールド ID の見つけ方をご覧ください。
カスタム画像を評価アイコンに使用する
デフォルトのアイコンの代わりに独自の画像を使用したい場合は、この代替CSSを使用できます：
/* Style custom image rating icons */
form#wpforms-form-1000 .wpforms-field-rating-item {
padding-right: 6px;
background-image: url(https://yoursite.com/wp-content/uploads/2022/03/crown-3.jpg);
height: 50px;
width: 50px;
background-repeat: no-repeat;
background-size: 50%;
}
/* Style hover and selected states */
form#wpforms-form-1000 .wpforms-field-rating-item:hover,
form#wpforms-form-1000 .wpforms-field-rating-item.selected {
background-size: 70%;
}
/* Hide default SVG icons */
form#wpforms-form-1000 .wpforms-field-rating svg {
display: none;
}
よくある質問
Q: これらのスタイルはカンバセーショナル・フォームで使えますか？
A:はい！この CSS はConversational Formsアドオン、Forms Pagesアドオン、および投稿、ページ、ウィジェットにフォームを埋め込む際に評価アイコンの見た目をカスタマイズします。
以上でWPFormsの評価フォームのアイコンのカスタマイズは完了です！次に、reCAPTCHAのキャプチャテーマの外観もカスタマイズしたいですか？そのためには、Google reCAPTCHAのキャプチャテーマを変更するチュートリアルをご覧ください。