コンタクトフォーム7

[Brandia]コンタクトフォーム7をサポートしています。

コンタクトフォーム7は非常に軽量なお問い合わせプラグインですが、プラグイン自体がお問い合わせフォームにCSSを適用しないため、テーマ側でデザインを整える必要があります。

Brandiaのコンタクトフォーム7のデザイン

[Brandia]も当然、コンタクトフォームにデザインを適用しています。

表示例

Brandiaのコンタクトフォームのデザイン
Brandiaのコンタクトフォームのデザイン

適用CSSコード

[Brandia]がコンタクトフォーム向けに適用しているCSSコードは下記の通りです。

このコードは、識別子が「id=”contact-form-7″」となっているCSSが読み込まれている時に出力されます。よってコンタクトフォーム7が無効化されている時は読み込みません。

SCSS
@charset "utf-8";
.must{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #F92931;
	border-radius: 20px;
}
.free {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

form p {
	font-weight: 600;
  label {
    width: 100%;
  }
  span {
    width: 100%;
  }
}
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
	width: 100%;
	padding: 8px 15px;
	margin-right: 10px;
	margin-top: 10px;
	border: 1px solid #d0d5d8;
	border-radius: 3px;
}
textarea.wpcf7-form-control.wpcf7-textarea {
	height: 200px;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
	background: rgba(255, 255, 142, 0.46);
}

input.wpcf7-submit {
	width: 100%;
	padding: 14px 0;
	background: #545454;
  border: 1px solid #545454;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
  transition: all .3s;
  &:hover {
    background: #fff;
    color: #545454;
    transition: all .3s;
  }
}
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}
KAZUのロゴ
KAZU

ちなみにデザインが気に入らない。コンタクトフォームの機能では足りないという方には[Forminator]の利用をオススメしています。

この記事はお役に立ちましたでしょうか? はい いいえ