確認メッセージボックスのスタイル設定

フォームの確認メッセージをブランドの見た目と雰囲気に合わせたいですか？デフォルトでは、WPForms は成功した送信を緑色のボックスで表示しますが、簡単な CSS コードでこのスタイルを簡単に変更したり、完全に削除したりできます。

このガイドでは、確認メッセージのスタイルをカスタマイズして、より一貫性のあるフォームエクスペリエンスを作成する方法を説明します。

デフォルトのスタイリングを理解する

WPForms は、フォーム送信成功メッセージを特定のパディングと境界線を持つ緑色のボックスで自動的に囲みます。これは多くのサイトでうまく機能しますが、次のことを行いたい場合があります。

• よりクリーンな見た目のためにスタイルを完全に削除する
• ブランドに合わせて色を変更する
• パディングや境界線などの特定の要素を変更する
• 特定のフォームにのみカスタムスタイルを適用する

確認メッセージのカスタマイズ

確認メッセージのスタイルを変更するさまざまな方法を見てみましょう。サイトにカスタム CSS を追加する方法がわからない場合は、WordPress にカスタムコードを追加する方法に関するガイドを確認してください。

すべてのフォームの背景スタイリングを削除する

すべてのフォームの確認メッセージからデフォルトの緑色のスタイルを完全に削除するには、次の CSS を追加します。

.wpforms-confirmation-container-full {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

上記の CSS を使用すると、確認メッセージの背景色と境界線が削除されます。

特定のフォームのカスタマイズ

単一のフォームの確認メッセージを変更するには、次の CSS を使用します（1000 をフォームの ID に置き換えてください）。

div#wpforms-confirmation-1000 {
    color: inherit !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

フォーム ID の見つけ方がわからない場合は、フォーム ID の見つけ方に関するチュートリアルを確認してください。

背景色の変更

すべてのフォームの確認メッセージの背景色を変更するには：

div.wpforms-confirmation-container-full {
    background: #333333 !important;
    color: #ffffff !important;
    border: none !important;
}

この例では、白いテキストで暗い背景を作成します。目的の色に合わせるために、色コード（#333333 および #ffffff）を調整してください。

これで、確認メッセージのスタイルを正常に調整できました！次に、他のフォーム要素をカスタマイズする方法を学びたいですか？カスタムスマートタグの作成に関するガイドを確認して、フォームに動的なコンテンツを追加してください。