当ページのコンテンツにはプロモーションが含まれています。

WPCustomize

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

JINカスタマイズ

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

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

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

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

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

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

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

完成形はこうなります!

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

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

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

プラグイン新規追加

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

コンタクトフォームを追加

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

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

コンタクトフォーム

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

コンタクトフォーム必要項目

  1. フォームのタイトルを入れます
  2. 必要項目を入れます(デフォルトで良ければこのままでOKです)
  3. 「保存」のボタンをクリックします。

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

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

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

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

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

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

コンタクトフォーム
クリエちゃん
クリエちゃん
う~ん、雰囲気はいいんですが、チョットボタンが小さいし色が薄いですよね。

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

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

コンタクトフォーム
クリエちゃん
クリエちゃん
ボタンの大きさについては簡単にカスタマイズできたものの、色についてはなかなか変更ができず困りました。

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

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

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

送信ボタン色変え

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

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

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

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

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

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