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

当ブログで無料配布している「ブログの書き方テンプレート」は受け取っておりますか?無料で資料請求できますので、この機会にぜひどうぞ💁♂️
【挫折0宣言】『ワンコイン』戦略会議を開催しています
オンラインビジネスの悩みを僕に直接相談できるワークショップです。 「Zoom」を利用して開催です。ご自宅から、お気軽にどうぞ😌
ご都合のよい、日程をクリックです
- クオリティ重視で、少人数制としております
【募集枠 各回2名】
- 現状の直近の悩みを、ご準備お願いします
【濃い相談形式です】
嬉しいお声をいただいております

お知らせ:厳選した下記のコンテンツがおすすめです
個人から、中小企業様向けに対応しており、Webメディア構築 or リモートワーク(テレビ会議システム)の導入をご検討の方は、ぜひどうぞ🙇
おすすめコンテンツ
無料コンテンツ
- 3日間の短期集中講座|無料で学べるメディア運営
- ブログ記事テンプレート【基本構造】(無料配布)
- 30分の無料相談会&体験レッスン(オンライン開催)
- 【入門ガイド】経験ゼロ→お金を生み出すブログを開始する完全マップ
有料コンテンツ
- 3500円:ブログやメディア運営を学べるオンラインスクール
- 【1人で完結】完全在宅「リモートワークビジネス講座」
- 【最短1日で完成】ベース構築キット【早期的に、環境を構築しよう】
- 【1つ目の壁】ブログ100記事パートナー【4ヶ月で乗り越える】
- 【ネット集客】『01blog Boot Camp』【7日間プログラム】
- Web制作・デザイン・毎月の運用サポート
当ブログと他のサイトの圧倒的な違いは、様々な疑問や悩みを解決するために【無料体験レッスン】30分の無料相談会&体験レッスン(オンライン開催)に初回限定で参加できることです。
どうしても分からなかったり、1人で悩むことがあればご相談ください。
その他、ご相談&ご質問がございましたら、お気軽にどうぞ。
» お問い合わせ

僕は、こんな人です

ゾノ@スモール起業ビルダー
当ブログの筆者。日本一わかりやすいブログ教師/高校教師の職を捨て起業失敗→在宅リモートワークで月収7桁達成→V字回復。10代から不登校や非行で根っからの引きこもり人間。現在はオンライン講座『外出せずに学べるパソコン教室』を運営し生徒は累計230名。個人がマイペースに生きるコツを発信しています。朝大好きです→ #01blog朝活の会
» プロフィール詳細はこちら
チップをいただけると、心から喜びます
人気記事【ブログ書くことない】ブログ書き方テンプレートで解決【ひな形】
人気記事【発表】オンライン学習サイト完備のコミュニティ【01blog College】