備忘録&雑記

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



広告



参考

【WP】コンタクトフォーム7のカスタマイズ方法

【WordPress】コピペでOK!『Contact Form 7』をレスポンシブ化するカスタマイズ!



広告





広告



関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。