投票結果確認画面のスタイリング方法

概要

確認ページに表示される投票結果画面のスタイルを変更したいですか？ Survey and Pollsアドオンを使用すると、これらの結果を確認メッセージ内に表示することを簡単に選択できます。少しの CSS で、これらの結果のスタイルを簡単に変更することができます。 このチュートリアルでは、投票結果のスタイルを変更する方法をステップごとに説明します。

デフォルトでは、投票結果にはすでにスタイルが追加されています。

セットアップ

このドキュメントでは、このチュートリアルのステップに従ってフォームを作成済みであると仮定します。

投票結果を有効にする

まず、フォームビルダーを開き、設定 " アンケートと投票タブを開きます。

そこで、チェックボックス「投票結果を有効にする」をクリックします。

CSSコードの追加

投票結果にスタイルを設定するには、このCSSをコピーしてあなたのサイトに貼り付ける必要があります。 サイトへのCSSの追加方法についてヘルプが必要な場合は、こちらのチュートリアルをご覧ください。

#wpforms-confirmation-194 .wpforms-poll-answer-bar {
    background-color: #c45e1b;
    background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px);
    border-right: 1px solid #c45e1b;
}
 
#wpforms-confirmation-194 {
    background: transparent;
    border: none;
}

その際、-194を特定のフォームのフォームIDと一致するように更新することを忘れないでください。フォームIDの見つけ方については、こちらのチュートリアルをご覧ください。

上記のCSSでグラデーションの色を選ぶ際にサポートが必要な場合は、CSS Gradientのサイトでオンライン・ジェネレーター（無料）をご利用ください。

これで完了です！ これで、CSS を使って確認画面の投票結果のスタイルを変更することに成功しました。フォームフィールドのプレースホルダーのスタイルを変更する方法を知りたいですか？ フォームフィールドのプレースホルダーテキストをスタイルする方法についてのチュートリアルをご覧ください。