Contact Form 7をレスポンシブ対応する

 

クラスを追加

下記のように「Contact Form 7」のフォーム設定において下記のようにクラスを追加する。

例）form-widthというクラスを追加

で、スタイルシートに下記を追加。

.form-width { max-width: 100%;}

これだけ。

あとついでに「送信」ボタンをフラットなデザインにしたいので、下記も追加。

.wpcf7-submit {
font-size: 1.2em;
padding: 5px 30px;
background-color: #248;
color: #fff;
border-style: none;
}

.wpcf7-submit:hover:enabled {
background-color: #24d;
color: #fff;
}

これで完成。.wpcf7-submit:hover:enabled は「承諾の確認」ボタンを押したときのみ送信ボタンがhover反応させるためのもの。

ほれできた。

 

 - WordPress

  関連記事