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;
}

最後までお読みいただき、ありがとうございます。下記のおしらせコーナーも、是非チェックしてくださると喜びます🙇‍
当ブログで無料配布している「ブログの書き方テンプレート」は受け取っておりますか？無料で資料請求できますので、この機会にぜひどうぞ💁‍♂️

【挫折０宣言】『ワンコイン』戦略会議を開催しています

オンラインビジネスの悩みを僕に直接相談できるワークショップです。「Zoom」を利用して開催です。ご自宅から、お気軽にどうぞ😌

ご都合のよい、日程をクリックです

クオリティ重視で、少人数制としております【募集枠各回2名】
現状の直近の悩みを、ご準備お願いします【濃い相談形式です】

» 今すぐ予約を確保する！

嬉しいお声をいただいております

オンラインでホームページ作りの勉強会に参加。サイト構築にHTMLやCSSの基礎理解は必須。仕組みに慣れればそんなに難しくないです。固定費はサーバー代とドメイン代ぐらいでそんなにお金もかかりません。無料で有益でここまで高品質な勉強会って中々ないんじゃないかな🙇‍

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

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

おすすめコンテンツ

無料コンテンツ

有料コンテンツ

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

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

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

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

僕は、こんな人です

ゾノ@スモール起業ビルダー
当ブログの筆者。日本一わかりやすいブログ教師／高校教師の職を捨て起業失敗→在宅リモートワークで月収7桁達成→V字回復。10代から不登校や非行で根っからの引きこもり人間。現在はオンライン講座『外出せずに学べるパソコン教室』を運営し生徒は累計230名。個人がマイペースに生きるコツを発信しています。朝大好きです→ #01blog朝活の会
 » プロフィール詳細はこちら

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

人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】

ワードプレス学習用｜参考メモ