WordPressプラグイン「Contact Form 7」のスタイルシートのカスタマイズ方法
当サイトは結局ContactForm7は使わなくなりました。理由は、フィーチャーフォン(ガラケー)では表示できないからです。
送信ボタン、パソコンだとちゃんと普通のボタンクラスが反映されているんですけど、iPhoneやiPadだと反映されていなくて、Contact Form 7のカスタマイズ方法を調べました。
Contact Form 7のカスタマイズ方法
CSSに以下のように追記します。
.cf7-form-width {
max-width: 100%; /* フォームの最大幅 */
}
.wpcf7-submit {
display: inline-block;
margin-bottom: 20px;
padding: 8px 12px;
border: 1px solid #000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #000;
color: #fff;
text-decoration: none;
text-shadow: 0 1px #000;
font-weight: bold;
font-size: 12px;
line-height: normal;
cursor: pointer;
}
cf7-form-widthクラスは、コンタクトフォームにクラスを追加すると、レスポンシブルな表示になります。
参考記事
