2019/09/14 (更新日: 2020/09/26)

【WordPress】Contact Form 7のHTML基本仕様【テンプレート】

Contact Form 7の基本使用のHTMLコードを公開します。

当ブログのお問い合わせは、Googleフォームを使っていますが、Contact Form 7を使用するときは、こんな感じで用意するといいと思います。

Contact Form 7のHTML基本仕様【テンプレート】

※注意：変数名（[your-name]など）は、ご自身で設定してOKです。

元ネタは、僕が運営する「WEBビジネス学園」のコラムサイトです。

<p style="text-align: center;"><span style="font-size: 12pt;"><strong>●●●●●●●へのご依頼・ご相談・お問い合わせ</strong></span></p>

<span class="any">任意</span> 御社名
    [text your-office]

<span class="required">必須</span> お名前 (必須)
    [text* your-name]

<span class="required">必須</span> フリガナ (必須)
    [text* your-name-furi]

<span class="required">必須</span> メールアドレス (必須)
    [email* your-email]

<span class="required">必須</span> メールアドレス確認 (必須)
    [email* your-email_confirm]

<span class="required">必須</span> 電話番号 (必須)
    [tel* tel]

<span class="any">任意</span> お問合せのタイトル (任意)
    [text title]

<span class="required">必須</span> お問合せの内容 (必須)
    [textarea* your-message]

[submit "送信"]

あとは、自由にカスタマイズして使ってOKです

お問い合わせのときに入力して欲しい項目を、自由にカスタマイズして制作すればOKです。

ちなみに、Contact Form 7に関する他の記事も、用意しているのでチェックしておくといいと思います＼(^o^)／
» 【WordPress】Contact Form 7の自動返信メール通知文面【テンプレート】
» 【WordPress】Contact Form 7でメールアドレスの入力ミスチェックでエラーを表示する

更新情報：2020年9月26日

CSSのソースコードを、追記しました。

/* contact form 7 */
/* 必須マーク */
.required{
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #D80100;
	border-radius: 20px;
}

/* 任意マーク */
.any {
	color: #fff;
	margin-right: 10px;
	padding: 6px 10px;
	background: #424242;
	border-radius: 20px;
}

/* 項目名を太字にする */
form p {
	font-weight: 600;
}

/* 入力項目を見やすくする */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea,select.wpcf7-form-control.wpcf7-select {
	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,select.wpcf7-form-control.wpcf7-select {
	background: #FFFFFF;
}

/* 送信ボタンを見やすくする */
input.wpcf7-submit {
	width: 100%;
	height: 80px;
	background: #27c038;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

/* エラーメッセージを見やすくする */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
	color: red;
	font-weight: 600;
}

最後までお読みいただき、ありがとうございます。「先生2.0 〜毎日感謝される働き方を作ろう〜」という無料講義をお届けしています。ぜひご覧になってくださると嬉しいです。
こちらから受け取ることができます↓

自宅で学べる無料講座

お知らせ：厳選した下記のコンテンツがおすすめです

個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク（テレビ会議システム）の導入をご検討の方は、ぜひどうぞ🙇‍

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】３０分の無料相談会＆体験レッスン（オンライン開催）に初回限定で参加できることです。

どうしても分からなかったり、１人で悩むことがあればご相談ください。

その他、ご相談＆ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

無料から学べる「01BLOG COLLEGE」に参加はお済みですか？メディア運営の基礎から応用を、順序立てて学べるオンライン学習サイトです。この機会にぜひどうぞ💁‍♂️

僕は、こんな人です

ゾノ@オンラインティーチャー
オンラインティーチャー養成講師（Teachable特化型）・メディア運営の基礎・ヒット商品企画。『２〜３歩先を行く実験屋』をコンセプトにオンライン社会を前進。手軽にスマホからも学べる『01BLOG COLLEGE』を運営し生徒は累計約510名。「オンラインで先生開業を目指すための講座」を無料配信中！

チップをいただけると、心から喜びます