【JIN】Contact Form 7の送信ボタンの大きさと色のカスタマイズ【コピペOK】

みなさんのホームページにもお問い合わせのページが設けられているのではないでしょうか？

お問い合わせのページは「ContactForm7（コンタクトフォーム）」というプラグインを使うとあっという間に作成することができますよ。

今回WordPressテーマ「JIN」で、Contact Form 7を使ってお問い合わせフォームを作ったのですが、「送信ボタン」のカスタマイズで、大きさは変わるものの、なぜかボタンの色が変わらない！という問題に直面しました。

公式サイトでのカスタマイズ方法も、今のところ見付けられませんでしたので、今回私がボタンの大きさと色を変えた方法をご紹介します。

送信ボタンのカスタマイズでお悩みの方は宜しければ参考にして下さいね。

Contact Form 7の送信ボタンの大きさと色を変えてみました

完成形はこうなります！

では、Contact Form 7のインストールから見ていきましょう。

Contact Form 7をインストールする

「ダッシュボード」-「プラグイン」-「新規追加」をクリックします。

新規追加の画面で「Contact Form 7」を検索し、「有効化」します。

Contact Form 7を使えるようにする

「ダッシュボード」-「お問い合わせ」-「新規追加」をクリックします。

コンタクトフォームを追加の画面に必要項目を入力

コンタクトフォームのコードを問い合わせのページに張り付ける

「ダッシュボード」-「お問い合わせ」-「コンタクトフォーム」をクリックします。

先ほど作ったコンタクトフォームのショートコードを「お問い合わせ」のページに張り付ければ完了です。

コンタクトフォームの完成

JINのデフォルトでは、コンタクトフォームはこんな感じです。

「送信ボタン」を見やすくカスタマイズする

デフォルトのままでは、送信ボタンが小さめで色が薄いため、ボタンのサイズ大きくして色を付けていきます。

CSSでボタンの色と形の変更ができました！

試行錯誤の末、なんとか大きさ・色変え成功！

「ダッシュボード」-「外観」-「カスタマイズ」-「追加CSS」を開きます。

追加CSSのところに以下のコードを追加して下さいね。

※色は、1つめの「background」のところで変更して下さい。

「更新」を押して変更完了！

みなさんも変わりましたでしょうか？

私のように、JINでコンタクトフォームの送信ボタンのカスタマイズで困った方は、コピペして使ってみて下さいね。