Contact Form 7のCSSをブロックエディタに対応させる

WordPressのメールフォーム、Contact Form 7プラグインを使用した時に、ブロックエディタパターンのテーマなどを使っているとcssが当たっていない場合に遭遇しました。それの解消法です。

Jetpackプラグインにもメール送信機能があるのですが、機能的にContact Form7の方が設定しやすかったのでこちらに乗り換えます。

しかし表示面ではJetpackの方がシンプルで整っていたので表示自体は真似します。

Contact Form 7のcssが当たっていない表示はこんな感じ

Jetpackのメール送信機能の表示はこんな感じ(背景色が違うのは別サイトを参照したためです)

上記のstyleを真似しつつ、Contact Form7 の公式のcss設定を参考にして追加CSSで設定します。

実際のcss設定コードはこちら

.wpcf7-text,
.wpcf7-textarea {
	border-width: 1px;
  box-sizing: border-box;
  line-height: normal;
  padding: 12px 8px;
	width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.wpcf7-submit {
	background-color: #32373c;
  border-width: 0;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  text-decoration: none;
}

このように切り替わります。

これで「HTMLだけの表示で何もデザインされてない」みたいな表示は回避して、とりあえずの体裁は保てるかと思います。

お疲れ様でした。

ホーム » CMS » Contact Form 7のCSSをブロックエディタに対応させる

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA