「contact form 7」に確認・完了画面を追加する方法まとめ！

「contact form 7」の初期設定では、フォームに必要事項を入力し「送信」をクリックすると、すぐにメールが送信されるようになっています。

入力した内容を確認する画面やお問い合わせの完了画面があった方が親切なので、「contact form 7」に確認・完了画面を追加してみます。

事前にWordPressのインストールと「contact form 7」を設置しておいてください。

「contact form 7」に確認画面を追加する手順

「contact form 7」に確認画面を追加するために「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」の設定画面に「確認ボタン」と「戻って編集ボタン」が追加されています。

↓「contact form 7」の設定画面の「送信」の左にカーソルを合わせてから「戻って編集ボタン」をクリックしてください。

左にカーソルを合わせる理由はボタンの並びを「確認」「戻る」「送信」の順にしたいからです。

↓「フォームタグ生成: 戻って編集ボタン」の画面が開きますので「ラベル」に「戻る」を入力し「タグを挿入」をクリックしてください。

↓「送信」ボタンの左横に「戻る」ボタンを設置するコードが追加されています。

次に「確認」ボタンを設置します。

↓「contact form 7」の設定画面の「戻る」の左にカーソルを合わせてから「確認ボタンボタン」をクリックしてください。

↓「フォームタグ生成: 確認ボタン」の画面が開きますので「ラベル」に「確認」を入力し「タグを挿入」をクリックしてください。

↓「戻る」ボタンの左横に「確認」ボタンを設置するコードが追加されています。

↓最後に「保存」をクリックしてください。

↓「contact form 7」に「確認」ボタンが表示されています。必要事項を入力し「確認」ボタンをクリックしてください。

↓入力した内容がボックスに表示され「戻る」と「送信」ボタンが表示されています。「戻る」をクリックすると入力画面に戻り、「送信」をクリックするとメールが送信されます。

これで「contact form 7」に「確認」ページを追加できました。

↓以下のような固定ページを作成します。

↓「functions.php」に以下のコードを追加してください(一番下でOK)。

add_action('wp_footer','add_complete_page');
function add_complete_page() {
echo <<< EOD

EOD;
}

「functions.php」を編集する前に必ずバックアップを取っておきましょう。

↓「送信」ボタンをクリックすると「送信完了」の画面が表示されました。

これで「contact form 7」に「完了」ページを追加できました。

「contact form 7」は簡易にフォームを設置できる反面、物足りなさを感じてました。

今回のカスタマイズで、より使いやすいフォームになったはずです。簡単に設置できるので、ぜひ試してみてください。

以上「「contact form 7」に確認・完了画面を追加する方法まとめ！」でした！

それではまた。