How to Change the Submit Button Color with WPForms

WPForms 1.8.1以降では、ブロックエディターを通じて組み込みのカラーカスタマイズが提供されていますが、より正確な制御のためにカスタムCSSを使用して同様のことを実現することもできます。

このガイドでは、CSSを使用して送信ボタンの色を変更する方法を説明します。

WPForms 1.8.1のリリースにより、ブロックエディターを使用してフォームをページに追加するだけで、CSSを使用せずに送信ボタンの色を簡単に変更できるようになりました。このフォームスタイリング機能を使用すると、CSSを記述せずにフォームをスタイリングできます。詳細については、こちらの役立つドキュメントをご覧ください。

ただし、カスタムCSSを使用して同様のことを実現することもできます。このチュートリアルでは、送信ボタンの色をスタイリングするためにこの方法を使用します。

フォームの設定

まず、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーを開きます。必要に応じて、目的のフォームフィールドを追加します。

フォームの作成に関するヘルプについては、最初のフォームの作成方法に関する完全なガイドをご覧ください。

CSSコードの追加

次のCSSスニペットは、送信ボタンの色を変更します。

サイトにCSSを追加する方法と場所に関するヘルプについては、カスタムCSSスタイルの追加に関するチュートリアルをご覧ください。

上記のCSSは、サイト上のすべてのWPForms 送信ボタンの送信ボタンの背景色を青（#066AAB）に、テキストを白に変更します。

このCSSの色は16進数コードで定義されています。これについては、こちらのドキュメントで詳しく読むことができます。

注：ホバー時のスタイルなど、送信ボタンに追加のスタイル変更を行う場合は、送信ボタンのスタイリングチュートリアルを参照してください。

コードのカスタマイズ

異なる色を使用するには、コード内の16進数コードを置き換えます。

7行目で、#066AABを目的のボタンの色に置き換えます。

8行目で、#066AABを同じ色に置き換えて、境界線の色と一致させます。

14行目で、#04446Eを目的のホバー時の色（通常はボタンの色の暗い色合い）に置き換えます。

たとえば、赤いボタンを作成するには、次のように使用できます。

background-color: #ff0000 !important;
border-color: #ff0000 !important;

よくある質問

Q: なぜこのCSSは私には機能しないのですか？

A: 変更が表示されない場合は、まずブラウザのキャッシュをクリアしてください。それでも機能しない場合は、テーマがスタイルをオーバーライドしている可能性があります。例に示されているように、CSSルールに!importantを追加してみてください。さらにヘルプが必要な場合は、CSSトラブルシューティングガイドを参照してください。

Q: 次へボタンと前へボタンにも機能しますか？

A: フォームでページ区切りフィールドを使用しており、ナビゲーションに次へおよび前へボタンを使用している場合、これらのすべてのボタンにまったく同じスタイルを適用するCSSを使用します。このCSSをサイトにコピーするだけです。

.wpforms-form button[type=submit], button.wpforms-page-button {
    background-color: #024488 !important;
    border-color: #024488 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
}

.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
    background-color: #022B57 !important;
}

Q: フォームの1つだけを対象にできますか？

A: 1つのフォームのみを変更したい場合は、CSSでフォームIDを指定するだけです。この例では、ページ区切りフィールドの次へボタンおよび前へボタンだけでなく、送信ボタンのフォームID999を対象とします。

999をご自身のフォームIDに合わせて更新する必要があります。

フォームIDの場所がわからない場合は、フィールドおよびフォームIDの場所に関するガイドをご覧ください。

button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
    background-color: #024488;
    border-color: #024488;
    color: #fff;
    transition: background 0.3s ease-in-out;
}

button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
    background-color: #022B57;
}

これで、送信ボタンの色が変更されました。次に、CSSを使用して送信ボタンを他の方法でカスタマイズしますか？CSSを使用して送信ボタンをパーソナライズする方法のチュートリアルをご覧ください。

送信ボタンの色を変更する方法

AI要約