WordPressプラグイン「Contact Form 7」のスタイルシートのカスタマイズ方法

2018年12月17日2019年9月16日WordPressCSS, お問い合わせフォーム, メールフォーム, ワードプレス

当サイトは結局ContactForm7は使わなくなりました。理由は、フィーチャーフォン（ガラケー）では表示できないからです。

送信ボタン、パソコンだとちゃんと普通のボタンクラスが反映されているんですけど、iPhoneやiPadだと反映されていなくて、Contact Form 7のカスタマイズ方法を調べました。

Contact Form 7 – WordPress プラグイン | WordPress.org 日本語

お問い合わせフォームプラグイン。シンプル、でも柔軟。

https://ja.wordpress.org/plugins/contact-form-7/

Contents

1. Contact Form 7のカスタマイズ方法
2. 参考記事

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クラスは、コンタクトフォームにクラスを追加すると、レスポンシブルな表示になります。