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

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

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

参考記事