WordPressでお問い合わせフォームを作る方法
2025年11月6日【WordPressのカスタム】
Contact Form 7で作ったお問い合わせフォームに確認画面を追加する方法
Confirm Plusで簡単実装！
しかし、標準では「確認画面」がなく、ユーザーが送信前に内容をチェックできません。この記事では、Confirm Plus Contact Form 7 プラグインを使って、既存のフォームに確認画面を追加する方法を紹介します。
実際にアルファーパートナーズのサイトでもこの方法を採用しています。
完成形
使用するプラグイン
◎Contact Form 7（すでに導入済み）◎Confirm Plus Contact Form 7（確認画面追加用）
（Confirm Plusは、Contact Form 7に「確認画面 → 送信完了画面」の流れを追加できる拡張プラグインです）
Confirm Plusのインストール手順
①WordPress管理画面で「プラグイン > 新規追加」→ 検索欄に「Confirm Plus Contact Form 7」と入力②検索結果から「Confirm Plus Contact Form 7」を探す
③「今すぐインストール」をクリック
④「有効化」をクリック
既存フォームに確認ボタンを追加
すでにあるContact Form 7のフォームを編集します。例として、以下のようなフォームがあるとします。
<p>お名前<br />
[text* your-name]</p>
<p>メールアドレス<br />
[email* your-email]</p>
<p>お問い合わせ内容<br />
[textarea your-message]</p>
<p>[submit "送信"]</p>
変更するコードはこちら
<p>[confirm "入力内容を確認する"]</p>
<p>[submit "送信する"]</p>
[confirm] → 確認画面を表示するボタン[submit] → 確認後に送信するボタン
確認画面の動作
プレビューまたは固定ページでフォームを確認します。「入力内容を確認する」ボタンを押すと、入力した内容が確認画面に一覧で表示されます。
「戻る」で修正、「送信する」でメール送信が完了します。
デザインを調整したい場合
Confirm Plusで自動生成される確認画面のデザインを変更したい場合は、テーマのCSSに追記してカスタマイズします。例：確認画面の見出しを中央寄せにする
.confirm-title {
text-align: center;
font-size: 1.2em;
margin-bottom: 1em;
}
※confirm.cssを参考に、上書き調整が可能です。実際の運用例（アルファーパートナーズのサイト）
アルファーパートナーズの公式サイトでも、この方法で「確認画面付きフォーム」を導入しています。 ユーザーが送信前に内容をチェックできることで、誤送信防止・安心感アップにつながります。まとめ
- ・Contact Form 7にConfirm Plusを組み合わせるだけで確認画面を追加できる
- ・既存フォームにもすぐに導入可能
- ・デザイン調整もCSSで柔軟に対応できる
