フォーム（Contact Form 7）の追加・編集方法

WordPress自体には、フォーム生成機能はありません。フォームを生成して埋め込むには、外部ツールもしくはプラグインを使います。当サンプルサイトでは、「Contact Form 7」というプラグインを使っています。基本的な使い方は、開発元の公式ドキュメントも併せて参照ください。

基本説明
自動送信メールの設定方法
フォームのデザイン調整
フォームの埋め込み方法
サンクスページへのリダイレクト設定
サンプルコード

基本説明

Contact Form 7 をインストールして有効化すると、ダッシュボードの項目「お問い合わせ」が追加されます。ここから、フォームの追加や編集を行います。

以下はフォームの編集画面です。

テキストやメールアドレス、電話番号、送信ボタンなど、各種テンプレートパーツが揃っているので、それらを組み合わせてフォームを作ります。

項目を入力必須にするには、「*」　を記述します。

自動送信メールの設定方法

Contact Form7では、管理者宛てのメールと送信者宛てのメール、2種類の自動送信メールを、フォームごとに設定できます。
参考：メールのセットアップ | Contact Form 7 [日本語]

自動送信メールの内容を編集するには、「メール」のタブを選択して、編集画面を開きます。

上部は管理者宛ての自動送信メールの設定項目です。「お問い合わせがありました」「見積り依頼がありました」といった通知用として使います。

各設定項目の概要

送信先
メールの送信先アドレスを指定する項目です。通常、フォームの管理者が受け取るためのメールアドレスを入力します。複数の受信者が必要な場合は、カンマで区切って複数のアドレスを指定できます。
例: admin@example.com, support@example.com

送信元
メールが送信される送信元アドレスを指定します。一般的に、ウェブサイトのドメインに属するメールアドレスを使用します。

題名
メールの件名を指定する項目です。フォーム送信時に管理者が受け取るメールの件名として表示されます。「新規お問い合わせ」「〇〇〇の資料がダウンロードされました」など、分かりやすい内容にすると良いでしょう。

追加ヘッダー
追加のメールヘッダーを設定するオプションで、例えば「Cc」や「Bcc」を指定することができます。

メッセージ本文
送信されるメールの内容を指定するメインの部分です。ここで、フォームに入力された各フィールドの値を挿入するショートコードを使って、管理者宛のメール内容を作成します。

以上が、管理者宛ての自動送信メールの設定です。

次は、フォーム送信者（つまりお問い合わせしてくれたユーザー）への自動送信メールの設定方法を解説します。編集画面下部の「メール（2）を使用」にチェックを入れます。

そうすると、編集項目が出てきます。

各設定項目の概要

送信先
送信先は、ユーザーが入力したメールアドレスに設定します。通常、[your-email] のように、ユーザーがフォームに入力したメールアドレスフィールドのショートコードを指定します。

送信元
メールの送信元アドレスを設定する項目です。ここでは、サイトのドメインに属するメールアドレスを使用するのが一般的です。support@yourdomain.com などのサポート用メールアドレスも適しています。

題名
自動返信メールの件名を設定します。送信内容確認メールであることをわかりやすくするために、「お問い合わせありがとうございます」や「資料ダウンロード完了しました」といった表現が一般的です。

追加ヘッダー
追加ヘッダーには特に設定が必要ないことが多いですが、Reply-Toを設定しておくと、ユーザーが自動返信メールにそのまま返信できるようになります。例えばsupport@yourdomain.com のように、ユーザーが返信しやすいサポート用のメールアドレスを設定しておくと便利です。

メッセージ本文
自動返信メールの内容で、ユーザーに送信内容の確認や受付完了を知らせます。感謝の言葉や返信までの目安時間、資料ダウンロードフォームであれば資料のダウンロードリンクなどを記載すると良いでしょう。

以上が、送信者宛ての自動送信メールの設定です。

フォームのデザイン調整

Contact Form 7のフォームにはデザインは施されていないので、見た目を整えるには、CSSでカスタマイズする必要があります。以下は、当サンプルサイトの、デザイン調整済みのフォームです。

「外観」 > 「カスタマイズ」 > 「追加CSS」に、フォームの外観をカスタマイズするコードを記述しています。

/* Contact Form7のデザイン */
/* フォーム全体のスタイル */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
	padding: 20px;
}

/* ラベルと入力欄の余白 */
.wpcf7-form p {
  margin-bottom: 10px;
	  font-size: 16px;
}

/* ラベルの赤い「必須」マーク */
.wpcf7-form .red{
  font-size: 12px;
  color: red;
  margin-left: 5px;
}

/* テキスト入力欄のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
	background-color: #f5f8fa; /* 入力フィールドの背景色 */
}

/* テキストエリアのスタイル */
.wpcf7-form textarea {
  height: 200px;
}

/* プレースホルダーの文字色 */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #bbb;
  font-size: 14px;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  background-color: #10318a;
  color: #fff;
  border: none;
  width:100%;
  padding: 10px 20px;
  font-size: 16px;
	font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #10318a;
  opacity: 0.8; /* 透明度を下げる */
}

/* 必須フィールドエラーの強調（Contact Form 7デフォルトのクラスを使用） */
.wpcf7-not-valid {
  border: 1px solid red;
}

/* 必須フィールドメッセージ */
.wpcf7-response-output {
  margin-top: 20px;
  color: red;
  font-size: 14px;
  text-align: left;
}

/* Contact Form7のデザイン */
/* フォーム全体のスタイル */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
	padding: 20px;
}

/* ラベルと入力欄の余白 */
.wpcf7-form p {
  margin-bottom: 10px;
	  font-size: 16px;
}

/* ラベルの赤い「必須」マーク */
.wpcf7-form .red{
  font-size: 12px;
  color: red;
  margin-left: 5px;
}

/* テキスト入力欄のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
	background-color: #f5f8fa; /* 入力フィールドの背景色 */
}

/* テキストエリアのスタイル */
.wpcf7-form textarea {
  height: 200px;
}

/* プレースホルダーの文字色 */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #bbb;
  font-size: 14px;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  background-color: #10318a;
  color: #fff;
  border: none;
  width:100%;
  padding: 10px 20px;
  font-size: 16px;
	font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #10318a;
  opacity: 0.8; /* 透明度を下げる */
}

/* 必須フィールドエラーの強調（Contact Form 7デフォルトのクラスを使用） */
.wpcf7-not-valid {
  border: 1px solid red;
}

/* 必須フィールドメッセージ */
.wpcf7-response-output {
  margin-top: 20px;
  color: red;
  font-size: 14px;
  text-align: left;
}

フォームに枠線を付けて表示したいページには、そのページの編集画面のカスタムCSSに、コードを追加記述します。

以下のコードを記述すると、枠線が付与されます。

/* フォームに枠線追加 */
.wpcf7-form {
  border: 1px solid #e6e6e6;
}

/* フォームに枠線追加 */
.wpcf7-form {
  border: 1px solid #e6e6e6;
}

フォームの埋め込み方法

作成したフォームを埋め込むには、「Contact Form7」のブロックパーツを使うのが簡単です。

作成済みのフォームをプルダウンから選択します。

サンクスページへのリダイレクト設定

フォーム送信後、以下のようなサンクスページ（完了ページ）にリダイレクトさせる設定もできます。

この仕組みを実装するには、フォームの編集画面で、サンクスページへのリダイレクト設定を記述します。

「location = 'https://sample-site-btob.com/thanks-document-company';」

「location = 'https://sample-site-btob.com/thanks-document-company';」

ここのURL部分を任意のURLに書き換えると、リダイレクト先を変えることができます。

サンプルコード

コピペで使える、Contact Form 7のコードやメール文章をまとめました。

フォームテンプレート

<p>お名前 <span class="red">必須</span><br />
[text* your-name placeholder "お名前を記載ください"]</p>

<p>会社名 <span class="red">必須</span><br />
[text* your-company placeholder "例）株式会社サンプルサイト"]</p>

<p>メールアドレス <span class="red">必須</span><br />
[email* your-email placeholder "例）example@example.com"]</p>

<p>サイトURL<br />
[url your-url placeholder "例）https://sample.bizsite-create.com/"]</p>

<p>質問・相談 <span class="red">必須</span><br />
[textarea* your-message placeholder "ご質問やご相談内容を記載ください"]</p>

<span style="font-size: 14px;">当社の<a href="https://XXXXXXXXXXXXXXXXXXXXXXXX/privacy-policy/" target="_blank">プライバシーポリシー</a>をご確認のうえ、送信ください。</span>

<p>[submit "この内容で問い合わせる"]</p>

<script>
document.addEventListener('wpcf7mailsent', function(event) {
    location = 'https://XXXXXXXXXXXXXXXXXXXXXXXX/thanks-contact/';
}, false);
</script>

<p>お名前 <span class="red">必須</span><br />
[text* your-name placeholder "お名前を記載ください"]</p>

<p>会社名 <span class="red">必須</span><br />
[text* your-company placeholder "例）株式会社サンプルサイト"]</p>

<p>メールアドレス <span class="red">必須</span><br />
[email* your-email placeholder "例）example@example.com"]</p>

<p>サイトURL<br />
[url your-url placeholder "例）https://sample.bizsite-create.com/"]</p>

<p>質問・相談 <span class="red">必須</span><br />
[textarea* your-message placeholder "ご質問やご相談内容を記載ください"]</p>

<span style="font-size: 14px;">当社の<a href="https://XXXXXXXXXXXXXXXXXXXXXXXX/privacy-policy/" target="_blank">プライバシーポリシー</a>をご確認のうえ、送信ください。</span>

<p>[submit "この内容で問い合わせる"]</p>

<script>
document.addEventListener('wpcf7mailsent', function(event) {
    location = 'https://XXXXXXXXXXXXXXXXXXXXXXXX/thanks-contact/';
}, false);
</script>

プライバシーポリシーのリンクとサンクスページへのリダイレクト設定記述の部分は、ご自身のサイトのURLに差し替えてください。

デザイン調整CSS

/* Contact Form7のデザイン */
/* フォーム全体のスタイル */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
	padding: 20px;
}

/* ラベルと入力欄の余白 */
.wpcf7-form p {
  margin-bottom: 10px;
	  font-size: 16px;
}

/* ラベルの赤い「必須」マーク */
.wpcf7-form .red{
  font-size: 12px;
  color: red;
  margin-left: 5px;
}

/* テキスト入力欄のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
	background-color: #f5f8fa; /* 入力フィールドの背景色 */
}

/* テキストエリアのスタイル */
.wpcf7-form textarea {
  height: 200px;
}

/* プレースホルダーの文字色 */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #bbb;
  font-size: 14px;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  background-color: #10318a;
  color: #fff;
  border: none;
  width:100%;
  padding: 10px 20px;
  font-size: 16px;
	font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #10318a;
  opacity: 0.8; /* 透明度を下げる */
}

/* 必須フィールドエラーの強調（Contact Form 7デフォルトのクラスを使用） */
.wpcf7-not-valid {
  border: 1px solid red;
}

/* 必須フィールドメッセージ */
.wpcf7-response-output {
  margin-top: 20px;
  color: red;
  font-size: 14px;
  text-align: left;
}

/* Contact Form7のデザイン */
/* フォーム全体のスタイル */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
	padding: 20px;
}

/* ラベルと入力欄の余白 */
.wpcf7-form p {
  margin-bottom: 10px;
	  font-size: 16px;
}

/* ラベルの赤い「必須」マーク */
.wpcf7-form .red{
  font-size: 12px;
  color: red;
  margin-left: 5px;
}

/* テキスト入力欄のスタイル */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
	background-color: #f5f8fa; /* 入力フィールドの背景色 */
}

/* テキストエリアのスタイル */
.wpcf7-form textarea {
  height: 200px;
}

/* プレースホルダーの文字色 */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #bbb;
  font-size: 14px;
}

/* 送信ボタンのスタイル */
.wpcf7-form input[type="submit"] {
  background-color: #10318a;
  color: #fff;
  border: none;
  width:100%;
  padding: 10px 20px;
  font-size: 16px;
	font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
  background-color: #10318a;
  opacity: 0.8; /* 透明度を下げる */
}

/* 必須フィールドエラーの強調（Contact Form 7デフォルトのクラスを使用） */
.wpcf7-not-valid {
  border: 1px solid red;
}

/* 必須フィールドメッセージ */
.wpcf7-response-output {
  margin-top: 20px;
  color: red;
  font-size: 14px;
  text-align: left;
}

管理者宛てメールメッセージ本文

お問い合わせ情報
会社名: [your-company]
お名前: [your-name]
メールアドレス: [your-email]
サイトURL: [your-url]
お問い合わせ内容:
[your-message]

このメールは、あなたのウェブサイト「[_site_title]」 ([_site_url]) のコンタクトフォームから送信されました。必要に応じてご対応をお願いいたします。

送信者宛てメールメッセージ本文

[your-name] 様

この度はお問い合わせいただき、誠にありがとうございます。
以下の内容でお問い合わせを受け付けました。

会社名: [your-company]
お名前: [your-name]
メールアドレス: [your-email]
サイトURL: [your-url]
お問い合わせ内容:
[your-message] 様

内容を確認のうえ、担当者よりご連絡させていただきます。
今しばらくお待ちいただけますようお願いいたします。

なお、本メールは自動送信メールです。
ご返信いただいても対応ができませんのでご了承ください。

よろしくお願いいたします。

※以下は署名欄。ご自身のビジネス内容に応じて修正してください。
[会社名]
[部署名・担当者名（任意）]
[会社の住所または所在地（必要であれば記載）]
[電話番号]
[メールアドレス]
[ウェブサイトURL]