ContactForm7テンプレート

基本設定

システムメール
管理メール
ユーザーメールクエリ
サイト名
キャッチコピー
法人名
URL
電話番号
FAX番号
住所

フォーム入力部品

必須	項目ラベル	項目キー	タイプ	プレースホルダー	補足文	削除

フォーム

管理者側へ送信するメール

宛先
送信元
題名
追加ヘッダー
メッセージ本文
ファイル添付

ユーザー側へ送信するメール

宛先
送信元
題名
追加ヘッダー
メッセージ本文
ファイル添付

ContactFormカスタムCSS

/* ContactForm7: RichFormスマホ対応 */
.richform legend{
	font-size:16px;
	font-weight:bold;
}
.richform [type="file"]{
	font-size:inherit;
	background:#f5f5f5;
	padding:10px;
	display:block;
	width:100%;
	box-sizing:border-box;
	border:var(--border-width) solid var(--gray);
	border-radius:var(--border-radius);
	transition:background .2s;
}
.richform [type="file"]:hover{
	background:#eee;
	border-color:var(--black);
}
.richform [type="file"]:focus{ border-color:var(--blue); }
.richform [type="text"],
.richform [type="number"],
.richform [type="search"],
.richform [type="tel"],
.richform [type="url"],
.richform [type="email"],
.richform [type="password"],
.richform [type="datetime"],
.richform [type="date"],
.richform [type="month"],
.richform [type="week"],
.richform [type="time"],
.richform [type="datetime-local"],
.richform [type="file"],
.richform textarea{ font-family:inherit; }
@media screen and (max-width: 768px){
	.richform label,
	.richform .em-wide{ width:100%; }
	.richform .em-mid{ width:calc((100% - .5em + 2px) / 2); }
	.richform .em-narrow{ width:100px; }
	.richform [type="text"],
	.richform [type="number"],
	.richform [type="search"],
	.richform [type="tel"],
	.richform [type="url"],
	.richform [type="email"],
	.richform [type="password"],
	.richform [type="datetime"],
	.richform [type="date"],
	.richform [type="month"],
	.richform [type="week"],
	.richform [type="time"],
	.richform [type="datetime-local"],
	.richform [type="file"],
	.richform textarea{ font-size:16px; }
}

/* ContactForm7: 送信ボタン */
.wpcf7-form footer{
	text-align:center;
	font-size:20px;
	margin:40px 20px;
}
.wpcf7-form footer [type="submit"]{
	width:240px;
	padding:14px;
	font-weight:bold;
	font-family:inherit;
	letter-spacing:.1em;
}

/* ContactForm7: 上下エラー文 */
.wpcf7 form .wpcf7-response-output{
	background:steelblue;
	padding:20px;
	color:white;
	margin:10px 0;
	border:0;
}
.wpcf7 form.init .wpcf7-response-output{ display: none; }
.wpcf7 form.sent .wpcf7-response-output{
	background:steelblue;
	padding:20px;
	color:white;
	margin:10px 0;
	border:0;
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output{
	background:crimson;
	padding:20px;
	color:white;
	margin:10px 0;
	border:0;
}
.wpcf7 .screen-reader-response{ color:crimson; }
.wpcf7 .screen-reader-response > ul > li{ list-style:inside square; }

/* ContactForm7: 入力部品ごとのエラー文 */
.wpcf7-not-valid-tip{
	color:crimson;
	display:block;
}