【WordPress】Contact Form 7 に確認画面を追加する方法
【WordPress】Contact Form 7 に確認画面を追加する方法

WordPressのお問い合わせフォームで定番中の定番プラグインである、Contact Form 7 ですが、送信前の確認画面を表示させる機能がありません。

ここでは、Contact Form 7 に簡単に確認画面を追加できる便利なWordPressプラグイン「Contact Form 7 add confirm」の設置方法を初心者向けに分かり易く解説します。

Contact Form 7 add confirmのインストール

Contact Form 7 add confirmのインストール

①左メニューのプラグイン>新規追加:クリックします

②キーワード:「Contact Form 7 add confirm」と入力し検索します

③「今すぐインストール」ボタン:Contact Form 7 add confirm が表示されたら「今すぐインストール」をクリックします

Contact Form 7 add confirmの有効化

Contact Form 7 add confirmの有効化
Contact Form 7 add confirmのインストールが完了したらプラグインを有効化します。

①「有効化」ボタン:クリックします

お問い合わせフォームの編集

お問い合わせフォームの編集
ここでは、「コンタクトフォーム(sample)」を編集してみます。

①左メニューのお問い合わせ:クリックします

②「コンタクトフォーム(sample)」タイトル:クリックします

確認・戻るボタンパーツの確認

確認・戻るボタンパーツの確認
「確認ボタン」と「戻って編集ボタン」が使えるようになっていますので、フォームの「送信ボタン」の前に追加します。

A 確認ボタンの追加

確認ボタンの追加
「確認ボタン」をクリックしフォームの[submit "送信"]前に追加します。

①ラベル:確認ボタンのラベルを入力します(確認、確認画面へ、など)

②「タグを挿入」ボタン:クリックします

B 戻って編集ボタンの追加

戻って編集ボタンの追加
「戻って編集ボタン」をクリックしフォームの[submit "送信"]前に追加します。

①ラベル:戻って編集ボタンのラベルを入力します(戻って編集する、など)

②「タグを挿入」ボタン:クリックします

メッセージの追加

メッセージの追加
フォームにメッセージを表示させてみます(任意)。

①表示させるメッセージを設定します

②「保存」ボタン:クリックします

①メッセージ表示の設定方法

最初に表示するメッセージ(step1)
<p class="wpcf7c-elm-step1">以下の内容を入力して「確認画面へ」ボタンを押してください。</p>

確認画面に表示するメッセージ(step2)
<p class="wpcf7c-elm-step2">内容を確認し、よろしければ「送信」ボタンを押してください。</p>

フォームの動作確認

フォームの動作確認

実際にフォームへ入力し動作確認してください。

以上、【WordPress】Contact Form 7 に確認画面を追加する方法でした。

おすすめの記事