【WP】コンタクトフォーム7の送信ボタンを見やすくする

2016年9月3日

コンタクトフォームの送信ボタンを、大きく見やすくする方法をご紹介します。

更新履歴
・2018.11.12:プラグインの仕様変更により記事を修正しました
・2018.12.06:ボタンサイズの記述を消去しました

コンタクトフォームの送信ボタン

送信ボタンをカスタマイズする前は、小さいし白色で目立たない。

コンタクトフォームボタンの画像
ボタンが目立たないし小さい・・・

そこでボタンの色を変えて大きくし、アクセスしやすいようにします。

送信ボタンのクラス名は?

送信ボタンのクラス名は、

input.wpcf7-submit

でした。右クリックから検証を選択して調べました。

検証機能の画像
この検証機能を使って調べました

送信ボタンのCSS記述例

いきなり答えからいきます。

/* — お問い合わせフォーム 送信ボタンのカスタマイズ — */
input.wpcf7-submit {
padding:1em;/* ボタン内の余白 */
margin:2em 0em;/* ボタンの上下にのみ余白 */
background: #49a9d4;/* 背景色 */
border-radius: 5px;/* 角を丸く*/
color: #fff;/* 文字の色*/
font-size: 18px;/* 文字の大きさ */
font-weight: bold;/* 太字*/
}
input.wpcf7-submit:hover {
opacity: 0.8;/* マウスオンで半透明に */
}

CSSに書く内容は以上の通り。

このままコピペで行けますが、予めバックアップを取るなど安全に注意して自己責任で行ってください。なお、このカスタマイズは、プラグイン「コンタクトフォーム7」の場合のみになりますのでご注意ください。

まとめ

コンタクトフォームの送信ボタンを見やすくする方法をご紹介しました。カスタマイズするクラス名がわかりにくかったので、調べて記事にしました。