プラグインを追加する

お問い合わせページの作成には、WordPressで広く使われている「Contact Form 7」というプラグインを導入します。ページの本文に直接文章を書き込む必要はありません。プラグインから生成される専用のコード（ショートコード）を貼り付けるだけで、簡単にお問い合わせフォームを表示できます。

Contact Form 7の導入

プラグイン ▶︎「プラグインを追加」を参照します。「プラグインの検索」に「Contact Form 7」と入力しインストール後「有効」に設定します。有効にするとサイドに「お問い合わせ」という項目が増えます。

Contact Form7は、簡単にお問い合わせフォームを作ることができます。設定を確認してみましょう。

フォームのテンプレート

フォームのテンプレートを編集します。▶︎ 公式サイトを、参照する。

それぞれフォームによるコントロールは、以下のようになっています。
text
[text your-name]＝ 1行入力欄＝　<input type="text">
[text* your-name]＝* は必須入力。未入力では送信できない
email
[email your-email]＝メール形式専用。
[textarea your-message]＝複数行入力。<textarea>
<label> お名前
[text* your-name]
</label>

<label> メールアドレス
[email* your-email]
</label>

<label> 題名
[text your-subject]
</label>

<label> メッセージ本文
[textarea your-message]
</label>

[submit "送信"]

フォーム

実際の完成フォームを見ながら、以下のように、項目を増やしていきます。

<div class="contact-form">

  <label>お名前 <span class="required">必須</span>
    [text* your-name autocomplete:name placeholder "山田 太郎"]
  </label>

  <label>メールアドレス <span class="required">必須</span>
    [email* your-email autocomplete:email placeholder "sample@example.com"]
  </label>

  <label>電話番号 <span class="optional">任意</span>
    [tel your-tel autocomplete:tel placeholder "090-0000-0000"]
  </label>

  <label>会社名 <span class="optional">任意</span>
    [text your-company placeholder "株式会社〇〇"]
  </label>

  <label>お問い合わせ種別 <span class="required">必須</span>
    [select* your-type include_blank "制作のご相談" "お見積もり" "講座について" "その他"]
  </label>

  <label>希望納期 <span class="optional">任意</span>
    [date your-date]
  </label>

  <label>参考サイトURL <span class="optional">任意</span>
    [url your-url placeholder "https://example.com"]
  </label>

  <label>ご用件 <span class="required">必須</span>
    [textarea* your-message placeholder "お問い合わせ内容をご入力ください"]
  </label>

  <div class="privacy-check">
    [acceptance your-acceptance] プライバシーポリシーに同意します [/acceptance]
  </div>

  <div class="submit-wrap">
    [submit "送信する"]
  </div>

</div>


ショートコードを貼る

フォーム保存後、ショートコードが表示されますのでそのまま固定ページに貼ってください。

送信元と送信先

Contact Form 7を設定する際、初心者が最も戸惑いやすいのが「送信元（From）」と「送信先（To）」です。特に、

「問い合わせした人のメールアドレスを、送信元に書けばいいんじゃないの？」

と思いやすいのですが、現在はそれを行うとエラーや迷惑メール判定の原因になることがあります。それぞれの役割を整理しましょう。

項目役割
送信元（From）このサイトから送信された、というアドレス
送信先（To）実際にメールを受け取るアドレス

また、問い合わせした相手へ返信できるようにするため、追加ヘッダーへ以下を設定することが一般的です。

Reply-To: [your-email]

これにより、「返信」ボタンを押した際、フォーム入力者のメールアドレス宛に返信できるようになります。現在は迷惑メール対策が厳しくなっており、サイトドメインと異なるメールアドレスを送信元にすると、警告が表示されることがあります。そのため、

「送信元はサイトドメイン」
「送信先は実際に受け取るメールアドレス」

と覚えておくと理解しやすいでしょう。

スタイルシート

コンタクトフォーム専用のスタイルを追加します。

/* =========================
   お問い合わせフォーム Contact Form 7 
========================= */

.contact-form {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px;
  background: #fff;
  border-radius: 16px;

}

.contact-form label {
  display: block;
  margin-bottom: 24px;
  font-weight: 700;
  line-height: 1.6;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fafafa;
  font-size: 16px;
  line-height: 1.6;
}

.contact-form textarea {
  min-height: 180px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #333;
  background: #fff;
}

.required,
.optional {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.required {
  background: #2F2A8B;
  color: #fff;
}

.optional {
  background: #eee;
  color: #555;
}

.privacy-check {
  margin: 32px 0 24px;
  font-size: 14px;
}

.privacy-check label {
  margin-bottom: 0;
  font-weight: 400;
}

.privacy-check input {
  width: auto;
  margin-right: 8px;
}

.submit-wrap {
  text-align: center;
}

.contact-form input[type="submit"] {
  width: auto;
  min-width: 220px;
  padding: 16px 40px;
  border: none;
  border-radius: 999px;
  background: #2F2A8B;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .3s ease;
}

.contact-form input[type="submit"]:hover {
  opacity: .75;
}
.privacy-check label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.privacy-check input[type="checkbox"] {
  margin: 0;
}

/* =========================
   Contact Form 7 メッセージ 
========================= */

.wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
  color: #c00;
}

.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px;
  border-radius: 8px;
  font-size: 14px;
}



@media (max-width: 768px) {


/* =========================
   Contact Form 7 
========================= */
	  .contact-form {
    padding: 24px;
    border-radius: 12px;
  }

  .contact-form input[type="submit"] {
    width: 100%;
  }