WordPressでお問い合わせフォームを作る方法 - アルファパートナーズ株式会社

【WordPressのカスタム】

Contact Form 7で作ったお問い合わせフォームに確認画面を追加する方法
Confirm Plusで簡単実装！

WordPressでお問い合わせフォームを作るとき、最もよく使われるのが「Contact Form 7」。
しかし、標準では「確認画面」がなく、ユーザーが送信前に内容をチェックできません。この記事では、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で柔軟に対応できる

ご相談フォーム

お仕事検索