投票結果確認画面のスタイル設定方法

概要

確認ページに表示されるアンケート結果画面のスタイルを設定しますか？ アンケート・投票アドオンを使用すると、これらの結果を簡単に確認メッセージ内に表示できます。少しの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で変更することに成功しました。フォームフィールドのプレースホルダーのスタイルを設定する方法を学びたいですか？フォームフィールドのプレースホルダーテキストのスタイル設定方法に関するこのチュートリアルをご覧ください。