How to Customize the Look of the Rating Icons

Markdownを表示

WPFormsの評価フィールドアイコンの外観を強化しますか？フォームビルダーには基本的な色とアイコンのオプションがありますが、CSSを使用すると、より洗練されたスタイルを実現できます。

このガイドでは、ブランドに合わせてユニークな外観の評価アイコンをカスタマイズする方法を説明します。

フォームの設定

まず、フォームを作成し、評価フィールドを追加します。フォームビルダーでお好みのアイコンと色を選択することから始めることができます。フォームの作成方法がわからない場合は、最初のフォームの作成に関するガイドを参照してください。

評価フィールドの使用方法の詳細については、評価フィールドに関する包括的なガイドをご覧ください。

カスタムアイコンスタイルの追加

評価アイコンをカスタマイズするには、このCSSをサイトに追加してください。カスタムCSSの追加方法がわからない場合は、サイトにカスタムCSSを追加する方法に関するガイドを参照してください。

form#wpforms-form-1000 を実際のフォームIDに置き換えてください。フォームIDの見つけ方がわからない場合は、フォームとフィールドIDの見つけ方に関するガイドを参照してください。

このCSSを追加することで、評価アイコンの外観を好きなスタイルに合わせてカスタマイズできるようになりました

カスタム画像を評価アイコンとして使用する

デフォルトのアイコンの代わりに独自の画像を使用したい場合は、この代替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;
}

画像URLをカスタム画像にポイントするように更新してください。この例では、画像サイズは150px x 150pxを想定しています。

よくある質問

Q: これらのスタイルは会話形式フォームでも機能しますか？

A: はい！このCSSは、会話形式フォームアドオン、フォームページアドオンを使用する場合、および任意の投稿、ページ、またはウィジェットにフォームを標準で埋め込む場合に、評価アイコンの外観をカスタマイズします。

これで、WPFormsの評価フォームフィールドアイコンの外観をカスタマイズするために必要なすべてが揃いました！次に、reCAPTCHAのキャプチャテーマの外観もカスタマイズしますか？そうするには、Google reCAPTCHAのキャプチャテーマを変更するチュートリアルをご覧ください。

評価アイコンの見た目をカスタマイズする方法

AI要約